/* volunteer.css build 20260904-timetable1 */
/* FND Connect — Volunteer Portal styles.
   Kept as a separate file (served fresh by the app, not the synced httpdocs
   copy) so portal styling never depends on re-running the asset sync. */

/* ============================================================
   Volunteer Portal
   ============================================================ */

/* Sub-navigation — scrolls horizontally on small screens */
.vol-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 43, 95, 0.05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vol-nav::-webkit-scrollbar { display: none; }
.vol-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fnd-navy);
  text-decoration: none;
}
.vol-nav a:not(.is-active):hover { background: var(--panel); }
.vol-nav a.is-active { background: var(--fnd-navy); color: #fff; }
.vol-nav__logout { margin-left: auto; flex: 0 0 auto; }
.vol-nav__logout button {
  min-height: 44px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fnd-navy);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font: 700 0.9rem inherit;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.vol-nav__logout button:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); }

/* Module cards (dashboard tiles) */
.vol-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.vol-module {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 43, 95, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.vol-module:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 43, 95, 0.12); border-color: var(--fnd-magenta); }
.vol-module__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fnd-navy), var(--fnd-magenta));
  color: #fff;
}
.vol-module__icon svg { width: 24px; height: 24px; }
.vol-module h3 { margin: 0; color: var(--fnd-navy); font-size: 1.15rem; }
.vol-module p { margin: 0; color: var(--text); font-size: 0.95rem; }
.vol-module__meta { margin-top: auto; color: var(--muted); font-size: 0.85rem; font-weight: 700; padding-top: 0.25rem; }

/* Panels */
.vol-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 43, 95, 0.05);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.vol-panel__head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.vol-panel__head h2 { margin: 0; font-size: 1.1rem; color: var(--fnd-navy); }
.vol-panel__body { padding: 1.25rem; }

.vol-section-title { font-size: 1.1rem; color: var(--fnd-navy); margin: 1.75rem 0 0.85rem; }

/* Stats */
.vol-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; }
.vol-stat { text-align: center; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.vol-stat b { display: block; font-size: 1.7rem; color: var(--fnd-navy); line-height: 1.1; }
.vol-stat span { color: var(--muted); font-size: 0.85rem; }

/* Chips and badges */
.vol-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.vol-chip { background: var(--pale); color: var(--fnd-magenta); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.8rem; font-weight: 700; }
.vol-badge { display: inline-block; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.vol-badge--approved, .vol-badge--shipped { background: #e6f5ec; color: #1c7a44; }
.vol-badge--pending, .vol-badge--new { background: #fff4e0; color: #9a5b00; }
.vol-badge--processing { background: #e7eefb; color: #1f57c3; }
.vol-badge--draft, .vol-badge--closed, .vol-badge--cancelled { background: #eef2f7; color: #52617a; }
.vol-badge--rejected { background: #fde7ee; color: #b1003f; }

/* Resource bank */
.vol-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.vol-resource { display: flex; flex-direction: column; padding: 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0, 43, 95, 0.04); }
.vol-resource__cat { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fnd-magenta); margin-bottom: 0.3rem; }
.vol-resource h4 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--fnd-navy); }
.vol-resource p { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--muted); }
.vol-resource a { margin-top: auto; font-weight: 800; color: var(--fnd-navy); text-decoration: none; }
.vol-resource a:hover { color: var(--fnd-magenta); }

/* Portal forms */
.vol-form label { display: block; margin-bottom: 0.85rem; }
/* The [hidden] attribute must beat the rule above (else JS-toggled optional
   fields like the donation "Name of the person" stay visible). */
.vol-form [hidden] { display: none; }
.vol-form label > span { display: block; font-weight: 700; font-size: 0.85rem; color: var(--fnd-navy); margin-bottom: 0.3rem; }
.vol-form input[type="text"],
.vol-form input[type="email"],
.vol-form input[type="url"],
.vol-form input[type="tel"],
.vol-form input[type="number"],
.vol-form input[type="date"],
.vol-form input[type="password"],
.vol-form input[type="search"],
.vol-form input[type="file"],
.vol-form select,
.vol-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  box-sizing: border-box;
}
.vol-form textarea { resize: vertical; }
.vol-form input:focus, .vol-form select:focus, .vol-form textarea:focus {
  outline: 3px solid var(--fnd-navy); outline-offset: 2px; border-color: var(--fnd-navy); box-shadow: none;
}
.vol-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 1rem; }

/* Connect Links custom link rows: title + URL match; toggles stay compact */
.vol-form .cl-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto;
  gap: 0.65rem 0.85rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.vol-form .cl-custom-row > label { margin-bottom: 0; min-width: 0; }
.vol-form .cl-custom-row > label:nth-child(n+3) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.7rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--fnd-navy);
}
.vol-form .cl-custom-row > label:nth-child(n+3) > span {
  display: inline;
  margin: 0;
  font-weight: 600;
  font-size: 0.88rem;
}
.vol-form .cl-custom-row input[type="checkbox"],
.vol-form .cl-custom-row input[type="radio"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .vol-form .cl-custom-row {
    grid-template-columns: 1fr 1fr;
  }
  .vol-form .cl-custom-row > label:nth-child(1),
  .vol-form .cl-custom-row > label:nth-child(2) {
    grid-column: 1 / -1;
  }
}
.vol-form .vol-check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; }
.vol-form .vol-check input { width: auto; margin-top: 0.2rem; flex: 0 0 auto; }
.vol-form .vol-hint { color: var(--muted); font-size: 0.88rem; margin: -0.4rem 0 0.85rem; }

/* Role picker */
.vol-rolepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.6rem; }
.vol-rolepick label { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; padding: 0.8rem; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: #fff; }
.vol-rolepick label:hover { border-color: var(--fnd-navy); }
.vol-rolepick label:has(input:checked) { border-color: var(--fnd-magenta); background: var(--pale); }
.vol-rolepick label:has(input:focus-visible) { outline: 3px solid var(--fnd-navy); outline-offset: 2px; }
.vol-rolepick input { width: auto; margin-top: 0.2rem; flex: 0 0 auto; }
.vol-rolepick strong { color: var(--fnd-navy); display: block; }
.vol-rolepick small { color: var(--muted); }

/* Lists of fundraisers / groups */
.vol-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.vol-card { border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 1.1rem; box-shadow: 0 8px 24px rgba(0, 43, 95, 0.05); display: flex; flex-direction: column; }
.vol-card h3 { margin: 0.3rem 0; color: var(--fnd-navy); font-size: 1.1rem; }
.vol-card__media { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 0.75rem; }

/* Progress */
.vol-progress { background: #eef2f7; border-radius: 999px; height: 9px; overflow: hidden; margin: 0.45rem 0 0.6rem; }
.vol-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--fnd-navy), var(--fnd-magenta)); border-radius: 999px; }

/* Actions / jump pills / empty state */
.vol-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vol-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.vol-jump a { display: inline-flex; min-height: 44px; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--fnd-navy); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; text-decoration: none; }
.vol-jump a:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); }
.vol-empty { text-align: center; padding: 1.75rem 1.25rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; background: var(--panel); }

/* Responsive table → stacked cards on phones */
.vol-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vol-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.vol-table th { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.vol-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 640px) {
  .vol-table, .vol-table tbody, .vol-table tr, .vol-table td { display: block; width: 100%; }
  .vol-table thead { position: absolute; left: -9999px; }
  .vol-table tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0.75rem; padding: 0.35rem 0.85rem; }
  .vol-table td { border: none; padding: 0.4rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .vol-table td::before { content: attr(data-label); font-weight: 700; color: var(--fnd-navy); text-align: left; }
}

.vol-meeting-edit {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 1rem 1.1rem 1.05rem;
  margin: 0 0 0.85rem;
}
.vol-meeting-edit__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: baseline;
  margin: 0 0 0.75rem;
}
.vol-meeting-edit__head strong { color: var(--fnd-navy); }
.vol-meeting-edit__head a { font-weight: 700; font-size: 0.88rem; }
.vol-meeting-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.vol-meeting-edit__cancel { margin: 0.55rem 0 0; }
.vol-meeting-edit > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: baseline;
  font-weight: 650;
}
.vol-meeting-edit > summary strong { color: var(--fnd-navy); }

/* Resource tabs (Policies / Forms / Marketing) */
.vol-tabs { margin-top: 0.25rem; }
.vol-tabs__bar {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1.1rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--border);
}
.vol-tab {
  min-height: 44px;
  border: 1px solid var(--border); background: #fff; color: var(--fnd-navy);
  border-radius: 999px; padding: 0.45rem 0.9rem;
  font-weight: 700; font-size: 0.9rem; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.vol-tab:hover { border-color: var(--fnd-navy); }
.vol-tab.is-active { background: var(--fnd-navy); color: #fff; border-color: var(--fnd-navy); }
.vol-tab__count { background: rgba(0, 43, 95, 0.1); border-radius: 999px; padding: 0 0.45rem; font-size: 0.78rem; }
.vol-tab.is-active .vol-tab__count { background: rgba(255, 255, 255, 0.25); }
/* Progressive enhancement: without JS all panels show stacked (tab bar hidden) */
.vol-tab-panel { display: block; }
.vol-tab-panel + .vol-tab-panel { margin-top: 1.25rem; }
.vol-tabs:not(.is-tabbed) .vol-tabs__bar { display: none; }
.vol-tabs.is-tabbed .vol-tab-panel { display: none; }
.vol-tabs.is-tabbed .vol-tab-panel.is-active { display: block; }
.vol-tabs.is-tabbed .vol-tab-panel + .vol-tab-panel { margin-top: 0; }

/* Compact the shared page hero on portal / volunteer pages */
.page-hero .wrap { padding-top: clamp(1.3rem, 3.2vw, 2rem); padding-bottom: clamp(1.3rem, 3.2vw, 2rem); }
.page-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }

/* Raffle prize outreach */
.rpo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.rpo-stat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; }
.rpo-stat b { display: block; font-size: 1.55rem; line-height: 1.1; color: var(--fnd-navy); }
.rpo-stat span { color: var(--muted); font-size: 0.82rem; }
.rpo-compose .vol-form label:last-of-type { margin-bottom: 0; }
.rpo-message { min-height: 180px; line-height: 1.55; font-size: 0.98rem; }
.rpo-hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.75rem; }
.rpo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 0.55rem; align-items: center; margin-bottom: 0.55rem; }
.rpo-remove { border: 1px solid var(--border); background: #fff; color: var(--fnd-magenta); border-radius: 10px; width: 42px; height: 42px; font-size: 1rem; cursor: pointer; line-height: 1; }
.rpo-remove:hover { border-color: var(--fnd-magenta); background: #fff5f9; }
.rpo-toolbar { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 1rem; }
.rpo-preview { margin-top: 1rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.rpo-preview__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 1rem; background: var(--fnd-navy); color: #fff; }
.rpo-preview__head h3 { margin: 0; font-size: 0.95rem; }
.rpo-preview__close { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 8px; padding: 0.2rem 0.6rem; cursor: pointer; }
.rpo-preview__meta { margin: 0; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.85rem; font-size: 0.88rem; }
.rpo-preview__meta dt { color: var(--muted); font-weight: 700; }
.rpo-preview__meta dd { margin: 0; color: var(--ink); word-break: break-word; }
.rpo-preview iframe { width: 100%; min-height: 360px; border: 0; background: #f4f7fb; display: block; }
.rpo-preview__text { margin: 0; padding: 0.85rem 1rem; white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 0.82rem; line-height: 1.45; color: #1a1a1a; background: #f8fafc; border-top: 1px solid var(--border); }
.rpo-outreach-list { display: flex; flex-direction: column; gap: 0.85rem; }
.rpo-card { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 1rem 1.1rem; box-shadow: 0 6px 18px rgba(0, 43, 95, 0.04); }
.rpo-card__head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.rpo-card__title { margin: 0; font-size: 1.05rem; color: var(--fnd-navy); }
.rpo-card__meta { margin: 0; color: var(--muted); font-size: 0.84rem; }
.rpo-card__meta a { color: var(--fnd-navy); }
.rpo-response { margin: 0.75rem 0 0; padding: 0.8rem 0.9rem; border-radius: 10px; background: #f4f0fb; border: 1px solid #ddd2f2; }
.rpo-response h4 { margin: 0 0 0.35rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: #5b3f96; }
.rpo-response pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 0.92rem; line-height: 1.5; color: #1d2b3e; }
.rpo-thread { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.rpo-thread__item { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; background: #fafbfd; }
.rpo-thread__item.is-inbound { background: #f4f0fb; border-color: #ddd2f2; }
.rpo-thread__item.is-outbound { background: #f7f9fc; }
.rpo-thread__label { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rpo-thread__subject { margin: 0 0 0.35rem; font-weight: 700; color: var(--fnd-navy); font-size: 0.9rem; }
.rpo-thread__body { margin: 0; white-space: pre-wrap; font-size: 0.88rem; line-height: 1.5; color: var(--ink); max-height: 12rem; overflow: auto; }
.rpo-actions { margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.45rem; }
.rpo-actions details { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 0.45rem 0.65rem; }
.rpo-actions details > summary { cursor: pointer; font-weight: 600; color: var(--fnd-navy); list-style: none; }
.rpo-actions details > summary::-webkit-details-marker { display: none; }
.rpo-actions details[open] { grid-column: 1 / -1; }
.rpo-actions textarea, .rpo-actions select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; margin-top: 0.45rem; }
.rpo-due { margin: 0.45rem 0 0; padding: 0.45rem 0.7rem; background: #fdf3e3; border-left: 3px solid #c47f1a; border-radius: 6px; font-size: 0.86rem; color: #8a5a12; }
.rpo-history { margin: 0.35rem 0 0; padding-left: 1rem; font-size: 0.84rem; color: var(--muted); }
@media (max-width: 640px) {
  .rpo-row { grid-template-columns: 1fr auto; }
  .rpo-row input[type="email"] { grid-column: 1 / -1; }
  .rpo-row .rpo-row__msg { grid-column: 1 / -1; }
}

/* ============================================================
   Outreach tool / manage / progress
   ============================================================ */

/* Sub-navigation between the three outreach pages */
.outreach-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
.outreach-nav a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; color: var(--fnd-navy); text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 43, 95, 0.05);
}
.outreach-nav a:hover { border-color: var(--fnd-magenta); }
.outreach-nav a.is-active { background: var(--fnd-navy); border-color: var(--fnd-navy); color: #fff; }
.outreach-nav__ico { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.outreach-nav a span:not(.outreach-nav__ico) { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.outreach-nav b { font-size: 0.95rem; }
.outreach-nav small { color: var(--muted); font-size: 0.76rem; }
.outreach-nav a.is-active small { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 720px) {
  .outreach-nav { grid-template-columns: 1fr; }
  .outreach-nav small { display: none; }
}

/* Numbered step chip in panel headers */
.outreach-step {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  margin-right: 0.5rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--fnd-navy), var(--fnd-magenta));
  color: #fff; font-size: 0.9rem; font-weight: 800;
}
.vol-panel__head h2 { display: flex; align-items: center; }

/* Quick "manage all" tile in the stats strip */
.rpo-stat--link { display: flex; align-items: center; justify-content: center; }
.rpo-stat--link a { font-weight: 800; color: var(--fnd-navy); text-decoration: none; }
.rpo-stat--link a:hover { color: var(--fnd-magenta); }

/* Template picker */
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; }
.tmpl-card {
  position: relative; display: flex; gap: 0.75rem; align-items: flex-start; margin: 0;
  padding: 1rem 1.1rem; border: 1.5px solid var(--border); border-radius: 14px;
  background: #fff; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tmpl-card:hover { border-color: var(--accent, var(--fnd-navy)); }
.tmpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tmpl-card:has(input:checked) { border-color: var(--accent, var(--fnd-magenta)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3b6ea5) 18%, transparent); }
.tmpl-card:has(input:focus-visible) { outline: 3px solid var(--fnd-navy); outline-offset: 2px; }
.tmpl-card__ico { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.tmpl-card__body { display: flex; flex-direction: column; gap: 0.2rem; }
.tmpl-card__body b { color: var(--fnd-navy); font-size: 1rem; }
.tmpl-card__body small { color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.tmpl-card__tick {
  position: absolute; top: 0.6rem; right: 0.7rem; width: 1.35rem; height: 1.35rem;
  border-radius: 999px; background: var(--fnd-navy); color: #fff;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 900; opacity: 0; transform: scale(0.6); transition: all 0.15s ease;
}
.tmpl-card:has(input:checked) .tmpl-card__tick { opacity: 1; transform: scale(1); }

/* Compose rows: column headers + per-row validation feedback */
.rpo-row--head { margin-bottom: 0.35rem; }
.rpo-row--head span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
@media (max-width: 640px) { .rpo-row--head { display: none; } }
.rpo-row__msg { grid-column: 1 / -1; margin: 0.15rem 0 0; font-size: 0.82rem; min-height: 0; }
.rpo-row__msg:empty { display: none; }
.rpo-row__msg.is-checking { color: var(--muted); }
.rpo-row__msg.is-ok { color: #1c7a44; }
.rpo-row__msg.is-taken { color: #b1003f; font-weight: 600; }
.rpo-row.is-taken input[type="email"] { border-color: #e0879f; background: #fff5f8; }
.rpo-row.is-ok input[type="email"] { border-color: #86c9a2; }

/* Collapsed conversation on manage cards — keep the list scannable */
.rpo-reply-peek { margin: 0.6rem 0 0; padding: 0.5rem 0.75rem; background: #f4f0fb; border: 1px solid #ddd2f2; border-radius: 10px; font-size: 0.9rem; color: #3d2c66; }
.rpo-reply-peek strong { color: #5b3f96; }
.rpo-convo { margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
/* global summary gives padding + a "+/-" marker at the right; just set our own
   compact padding so the marker never overlaps the label */
.rpo-convo > summary { font-weight: 700; color: var(--fnd-navy); font-size: 0.88rem; padding: 0.55rem 2.4rem 0.55rem 0.85rem; }
.rpo-convo__body { padding: 0 0.85rem 0.85rem; }
.rpo-convo__body .rpo-response { margin-top: 0; }

/* Template badge on manage cards */
.rpo-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rpo-tmpl-badge {
  display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px;
  padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 800;
  color: var(--fnd-navy); background: color-mix(in srgb, var(--accent, #3b6ea5) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #3b6ea5) 35%, transparent);
}

/* Status filter chips (manage) */
.rpo-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.rpo-filter {
  min-height: 44px;
  border: 1px solid var(--border); background: #fff; color: var(--fnd-navy);
  border-radius: 999px; padding: 0.4rem 0.85rem; font: 700 0.88rem inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.rpo-filter:hover { border-color: var(--fnd-navy); }
.rpo-filter.is-active { background: var(--fnd-navy); border-color: var(--fnd-navy); color: #fff; }
.rpo-filter span { background: rgba(0, 43, 95, 0.1); border-radius: 999px; padding: 0 0.45rem; font-size: 0.78rem; }
.rpo-filter.is-active span { background: rgba(255, 255, 255, 0.25); }
.rpo-filter-empty { text-align: center; color: var(--muted); padding: 1.5rem; border: 1px dashed var(--border); border-radius: 14px; background: var(--panel); }

/* ---- Progress / leaderboard ---- */
.prog-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.prog-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0, 43, 95, 0.05); }
.prog-tile__ico { font-size: 1.5rem; line-height: 1; }
.prog-tile b { font-size: 2rem; line-height: 1.05; color: var(--fnd-navy); }
.prog-tile span { color: var(--muted); font-size: 0.85rem; }
.prog-tile span em { display: block; font-style: normal; color: var(--fnd-magenta); font-weight: 800; font-size: 0.8rem; }

.prog-you {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; border-radius: 16px; margin-bottom: 1.5rem;
  background: linear-gradient(120deg, var(--fnd-navy), #0c3f78); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 43, 95, 0.18);
}
.prog-you--empty { background: var(--panel); color: var(--fnd-navy); border: 1px solid var(--border); box-shadow: none; }
.prog-you__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 800; opacity: 0.85; }
.prog-you__line { margin: 0.25rem 0 0.15rem; font-size: 1.05rem; }
.prog-you__sub { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.prog-you .button { flex: 0 0 auto; }
.prog-you--empty .button { background: var(--fnd-navy); color: #fff; }

.prog-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-items: end; margin-bottom: 1.25rem; }
.prog-podium__slot {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center;
  padding: 1rem 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 14px 14px 0 0;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 43, 95, 0.06);
}
.prog-podium__slot--1 { border-top: 4px solid #d4af37; padding-top: 1.5rem; }
.prog-podium__slot--2 { border-top: 4px solid #9aa7b4; }
.prog-podium__slot--3 { border-top: 4px solid #c08457; }
.prog-podium__slot.is-me { outline: 2px solid var(--fnd-magenta); outline-offset: -2px; }
.prog-podium__medal { font-size: 1.9rem; line-height: 1; }
.prog-podium__name { font-weight: 800; color: var(--fnd-navy); font-size: 0.92rem; word-break: break-word; }
.prog-podium__count { font-size: 1.6rem; font-weight: 900; color: var(--fnd-navy); line-height: 1.1; }
.prog-podium__label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.prog-podium__step { margin-top: 0.4rem; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
@media (max-width: 560px) { .prog-podium__slot { padding-top: 0.85rem; } .prog-podium__slot--1 { padding-top: 1rem; } }

.prog-table tbody tr.is-me { background: var(--pale); }
.prog-table tbody tr.is-me td { font-weight: 700; }
.prog-rank { font-size: 1.05rem; }
/* styles.css forces .vol-table { min-width: 680px } on phones (horizontal
   scroll for wide data tables). For the leaderboard we want the shared stacked
   layout instead, so cancel that min-width — specificity (0,2,0) beats it. */
@media (max-width: 640px) {
  .vol-table.prog-table { min-width: 0; }
  .prog-table tbody tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0.6rem; padding: 0.35rem 0.85rem; }
  .prog-table tbody tr.is-me { outline: 2px solid var(--fnd-magenta); outline-offset: -2px; }
}

.prog-campaigns { display: flex; flex-direction: column; gap: 0.85rem; }
.prog-campaign { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 0.85rem 1rem; }
.prog-campaign__top { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; color: var(--fnd-navy); font-weight: 700; }
.prog-campaign__num { color: var(--muted); font-weight: 500; font-size: 0.88rem; }
.prog-campaign__num strong { color: var(--fnd-navy); }
.prog-campaign__bar { background: #eef2f7; border-radius: 999px; height: 10px; overflow: hidden; }
.prog-campaign__bar > i { display: block; height: 100%; border-radius: 999px; }

/* ============================================================
   Public fundraiser pages
   ============================================================ */
.fr-hero { background: linear-gradient(105deg, #f8fbff 0%, #ffffff 58%, #fff1f7 100%); border-bottom: 1px solid var(--border); }
.fr-hero .wrap { padding-top: clamp(1.3rem, 3vw, 2rem); padding-bottom: clamp(1.3rem, 3vw, 2rem); }
.fr-hero h1 { margin: 0.3rem 0; font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--fnd-navy); }
.fr-hero .fr-organiser { color: var(--muted); margin: 0; }

/* Desktop: story left, donate sticky right. Mobile: donate first (primary). */
.fr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.fr-cover { width: 100%; max-height: 440px; object-fit: cover; border-radius: 16px; margin-bottom: 1.25rem; }
.fr-story { font-size: 1.03rem; line-height: 1.75; color: var(--text); }
.fr-story p { margin: 0 0 1rem; }

.fr-aside { position: sticky; top: 1rem; }
.fr-donate { border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 16px 44px rgba(0, 43, 95, 0.12); padding: 1.4rem; }
.fr-donate h2 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--fnd-navy); }
.fr-raised { font-size: 2.3rem; font-weight: 900; color: var(--fnd-navy); line-height: 1; }
.fr-raised-meta { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 0.7rem; }
.fr-bar { background: #eef2f7; border-radius: 999px; height: 12px; overflow: hidden; margin-bottom: 0.7rem; }
.fr-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--fnd-navy), var(--fnd-magenta)); border-radius: 999px; }
.fr-statline { display: flex; gap: 1.5rem; margin-bottom: 1.1rem; }
.fr-statline b { display: block; font-size: 1.15rem; color: var(--fnd-navy); line-height: 1.1; }
.fr-statline span { color: var(--muted); font-size: 0.78rem; }
.fr-amounts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.fr-amount { display: inline-flex; min-height: 44px; flex: 1 1 60px; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 0.6rem 0.3rem; font-weight: 800; color: var(--fnd-navy); cursor: pointer; font-family: inherit; font-size: 0.95rem; }
.fr-amount:hover, .fr-amount.is-active { border-color: var(--fnd-magenta); background: var(--pale); color: var(--fnd-magenta); }
.fr-money { position: relative; margin-bottom: 0.2rem; }
.fr-money::before { content: "£"; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 800; }
/* Specificity (0,3,1) so the £-prefix left padding wins over the generic
   .vol-form input[type="number"] rule (0,2,1); otherwise the £ overlaps the value. */
.vol-form .fr-money input[type="number"] { width: 100%; min-height: 44px; padding: 0.75rem 0.75rem 0.75rem 1.9rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 1.1rem; font-weight: 700; }
.vol-form .fr-money input[type="number"]:focus { outline: 3px solid var(--fnd-navy); outline-offset: 2px; border-color: var(--fnd-navy); box-shadow: none; }
.fr-donate .vol-form label { margin-bottom: 0.6rem; }
.fr-donate-btn { width: 100%; margin-top: 0.9rem; padding: 0.9rem; font-size: 1.05rem; }
.fr-secure { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; text-align: center; }
.fr-supporters { margin-top: 1.6rem; }
.fr-supporters h2 { font-size: 1.1rem; color: var(--fnd-navy); }
.fr-supporter { padding: 0.7rem 0; border-top: 1px solid var(--border); font-size: 0.95rem; }
.fr-supporter strong { color: var(--fnd-navy); }
.fr-supporter span { color: var(--muted); }

/* Share tools — for visitors who can't donate but want to help */
.fr-hero-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
}
.fr-hero-share__label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
}
.fr-share-chip {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--fnd-navy);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.fr-share-chip:hover {
  border-color: var(--fnd-magenta);
  color: var(--fnd-magenta);
  background: var(--pale, #fff1f7);
}
a.fr-share-chip { color: var(--fnd-navy); }

.fr-share-panel {
  margin: 2rem 0 0;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7fb 0%, #eef5ff 100%);
  border: 1px solid #f0c9d8;
  box-shadow: 0 10px 28px rgba(0, 43, 95, 0.07);
  scroll-margin-top: 90px;
}
.fr-share-panel__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fnd-magenta, #c9005a);
}
.fr-share-panel__head h2 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--fnd-navy);
  line-height: 1.25;
}
.fr-share-panel__lead {
  margin: 0 0 1.1rem;
  color: #5a6b80;
  line-height: 1.55;
  max-width: 58ch;
}

.fr-share-preview { margin-bottom: 1rem; }
.fr-share-preview__label {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.fr-share-og {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  overflow: hidden;
  max-width: 520px;
}
.fr-share-og__image {
  min-height: 100px;
  background: linear-gradient(135deg, var(--fnd-navy), var(--fnd-magenta));
}
.fr-share-og__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 100px;
}
.fr-share-og__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.5rem;
  text-align: center;
}
.fr-share-og__copy { padding: 0.75rem 0.9rem; }
.fr-share-og__site {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.fr-share-og__copy h3 {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  color: var(--fnd-navy);
  line-height: 1.3;
}
.fr-share-og__copy p {
  margin: 0;
  font-size: 0.86rem;
  color: #5a6b80;
  line-height: 1.4;
}

.fr-share-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.fr-share-btn {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  padding: 0.65rem 0.95rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: var(--fnd-navy);
}
.fr-share-btn:hover { filter: brightness(1.06); color: #fff; }
.fr-share-btn--whatsapp,
.fr-share-btn--wa { background: #087568; }
.fr-share-btn--facebook,
.fr-share-btn--fb { background: #0b5fbd; }
.fr-share-btn--twitter,
.fr-share-btn--x { background: #111; }
.fr-share-btn--linkedin,
.fr-share-btn--li { background: #0a66c2; }
.fr-share-btn--email { background: #5a6b80; }
.fr-share-btn--copy { background: #fff; color: var(--fnd-navy); border: 1.5px solid var(--border); }
.fr-share-btn--copy:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); background: #fff; }

.fr-share-more {
  margin-top: 0.35rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #e4d0da;
  border-radius: 12px;
  padding: 0.35rem 0.9rem 0.9rem;
}
.fr-share-more > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
  color: var(--fnd-navy);
  padding: 0.55rem 0;
  list-style: none;
}
.fr-share-more > summary::-webkit-details-marker { display: none; }
.fr-share-more > summary::before {
  content: "▸ ";
  color: var(--fnd-magenta);
}
.fr-share-more[open] > summary::before { content: "▾ "; }
.fr-share-posts {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.35rem;
}
.fr-share-post {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.fr-share-post__head h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--fnd-navy);
}
.fr-share-post__head p {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.fr-share-post__text {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
  background: #fafbfd;
  color: var(--text);
}
.fr-share-post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.fr-aside-share {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
}
.fr-aside-share__title {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: var(--fnd-navy);
  font-size: 0.98rem;
}
.fr-aside-share__text {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}
.fr-aside-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.fr-aside-share__actions .button {
  min-height: 44px;
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
}

@media (max-width: 900px) {
  .fr-layout { grid-template-columns: 1fr; }
  /* Donate box above story + share kit — primary action first on phones */
  .fr-main { order: 2; }
  .fr-aside { position: static; order: 1; }
  .fr-share-og { grid-template-columns: 96px 1fr; }
}
@media (max-width: 520px) {
  .fr-share-og { grid-template-columns: 1fr; }
  .fr-share-og__image { min-height: 140px; }
}

/* ============================================================
   Public fundraiser campaign — mobile-first conversion design
   ============================================================ */
.fundraiser-campaign-page {
  --fr-navy: #002b5f;
  --fr-deep: #001c42;
  --fr-pink: #d40062;
  --fr-pink-dark: #b50050;
  --fr-cloud: #f3f7fc;
  --fr-line: #d7e1ed;
  --fr-shadow: 0 22px 64px rgba(0, 32, 73, 0.16);
  background: var(--fr-cloud);
  color: #17243a;
}
.fundraiser-campaign-page main { overflow: hidden; }

.fr-campaign-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 13% 24%, rgba(255,255,255,0.09) 0 2px, transparent 2.5px),
    linear-gradient(135deg, var(--fr-deep, #001c42) 0%, var(--fr-navy, #002b5f) 62%, #073c78 100%);
}
.fr-campaign-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(116deg, transparent 0 68%, rgba(255,255,255,0.055) 68.2% 68.8%, transparent 69% 100%),
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.3px);
  background-size: auto, 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.fr-campaign-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -13rem;
  bottom: -18rem;
  width: 36rem;
  height: 36rem;
  border: 8rem solid rgba(212, 0, 98, 0.11);
  border-radius: 50%;
}
.fr-campaign-hero__grid {
  display: grid;
  gap: 1.75rem;
  padding-top: clamp(2.25rem, 8vw, 4.75rem);
  padding-bottom: clamp(2.25rem, 8vw, 4.75rem);
}
.fr-campaign-hero__copy {
  align-self: center;
  animation: fr-hero-rise 0.7s cubic-bezier(.2,.7,.2,1) both;
}
.fr-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.68);
  font-size: 0.78rem;
  font-weight: 700;
}
.fr-breadcrumbs a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #fff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fr-eyebrow,
.fr-section-kicker,
.fr-donate__kicker {
  margin: 0 0 0.65rem;
  color: var(--fr-pink);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fr-eyebrow { color: #ff78ad; }
.fr-eyebrow span { margin-right: 0.35rem; font-size: 0.7em; }
.fr-campaign-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 12vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
}
.fr-campaign-hero__lead {
  max-width: 57ch;
  margin: 1.25rem 0 0;
  color: rgba(255,255,255,0.9);
  font-size: clamp(1.05rem, 3.8vw, 1.28rem);
  line-height: 1.55;
}
.fr-campaign-hero .fr-organiser {
  margin: 1rem 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
  line-height: 1.5;
}
.fr-campaign-hero .fr-organiser strong { color: #fff; }
.fr-hero-progress {
  max-width: 40rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.fr-hero-progress__numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}
.fr-hero-progress__numbers strong { color: #fff; font-size: 1.08rem; }
.fr-hero-progress__numbers span { color: rgba(255,255,255,0.72); font-size: 0.8rem; font-weight: 700; }
.fr-hero-progress__track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}
.fr-hero-progress__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5d9d, #fff);
  transform-origin: left center;
  animation: fr-progress-fill 1s 0.25s cubic-bezier(.2,.7,.2,1) both;
}
.fr-hero-progress p { margin: 0.65rem 0 0; color: rgba(255,255,255,0.75); font-size: 0.82rem; }
.fr-hero-progress p strong { color: #fff; }
.fr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.25rem;
}
.fr-hero-donate,
.fundraiser-campaign-page .fr-donate-btn {
  border: 0;
  background: var(--fr-pink);
  color: #fff;
  box-shadow: 0 12px 26px rgba(212,0,98,0.27);
}
.fr-hero-donate { padding: 0.85rem 1.2rem; }
.fr-hero-donate:hover,
.fundraiser-campaign-page .fr-donate-btn:hover { background: var(--fr-pink-dark); color: #fff; transform: translateY(-1px); }
.fr-hero-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 10px;
  padding: 0.72rem 1rem;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: 800 0.92rem inherit;
  cursor: pointer;
}
.fr-hero-share-button:hover { background: rgba(255,255,255,0.16); }
.fr-hero-share-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  text-underline-offset: 4px;
}
.fr-campaign-hero__visual {
  position: relative;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.3);
  animation: fr-visual-in 0.85s 0.08s cubic-bezier(.2,.7,.2,1) both;
}
.fr-campaign-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,22,53,0.88) 100%);
}
.fr-campaign-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.fr-campaign-hero__visual:hover img { transform: scale(1.025); }
.fr-campaign-hero__visual figcaption {
  position: absolute;
  z-index: 1;
  right: 1.1rem;
  bottom: 1.1rem;
  left: 1.1rem;
  color: #fff;
}
.fr-campaign-hero__visual figcaption span { display: block; color: #ff8ab8; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.fr-campaign-hero__visual figcaption strong { display: block; max-width: 30ch; margin-top: 0.3rem; font-size: clamp(1rem, 4vw, 1.35rem); line-height: 1.25; }
.fr-campaign-hero__fallback {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(150deg, #164f8a, var(--fr-pink));
}
.fr-campaign-hero__fallback span { font-size: 1.2rem; }
.fr-campaign-hero__fallback strong { max-width: 8ch; font-size: 2.8rem; line-height: 0.95; }

.fr-trust-band { position: relative; z-index: 2; border-bottom: 1px solid var(--fr-line); background: #fff; box-shadow: 0 8px 28px rgba(0,43,95,0.06); }
.fr-trust-band .wrap { display: grid; gap: 0; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.fr-trust-band span { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0; color: #40516b; font-size: 0.78rem; font-weight: 700; }
.fr-trust-band b { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: #e7f5ed; color: #187342; font-size: 0.72rem; }

.fr-campaign-body { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.fundraiser-campaign-page .fr-layout { display: grid; gap: 2rem; align-items: start; }
.fundraiser-campaign-page .fr-main { min-width: 0; order: 2; }
.fundraiser-campaign-page .fr-aside { position: static; order: 1; scroll-margin-top: 1rem; }
.fr-story-section h2,
.fr-impact-promise h2,
.fundraiser-campaign-page .fr-supporters h2,
.fundraiser-campaign-page .fr-share-panel h2 {
  margin: 0 0 0.9rem;
  color: var(--fr-navy);
  font-size: clamp(1.75rem, 6vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
.fr-story-section { max-width: 48rem; }
.fundraiser-campaign-page .fr-story { color: #33435a; font-size: 1.04rem; line-height: 1.78; }
.fundraiser-campaign-page .fr-story p { margin: 0 0 1.05rem; }
.fundraiser-campaign-page .fr-story p:first-child { color: var(--fr-navy); font-size: clamp(1.16rem, 3.8vw, 1.35rem); font-weight: 750; line-height: 1.55; }
.fundraiser-campaign-page .fr-story strong { color: var(--fr-navy); }

.fr-impact-promise {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: clamp(2.5rem, 7vw, 4.25rem) 0;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(1.35rem, 5vw, 2.3rem);
  background: var(--fr-navy);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,43,95,0.18);
}
.fr-impact-promise::after { content: ""; position: absolute; right: -5rem; bottom: -8rem; width: 18rem; height: 18rem; border: 4rem solid rgba(212,0,98,0.14); border-radius: 50%; }
.fr-impact-promise__mark { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #ff80b2; font-size: 0.88rem; font-weight: 900; letter-spacing: 0.08em; }
.fr-impact-promise > div:last-child { position: relative; z-index: 1; }
.fr-impact-promise .fr-section-kicker { color: #ff80b2; }
.fr-impact-promise h2 { color: #fff; font-size: clamp(1.55rem, 5vw, 2.25rem); }
.fr-impact-promise p:not(.fr-section-kicker) { max-width: 58ch; margin: 0 0 1rem; color: rgba(255,255,255,0.76); line-height: 1.65; }
.fr-impact-promise a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #fff;
  font-weight: 850;
  text-underline-offset: 4px;
}

.fundraiser-campaign-page .fr-donate {
  overflow: hidden;
  border: 1px solid #cfdce9;
  border-top: 5px solid var(--fr-pink);
  border-radius: 20px;
  padding: clamp(1.2rem, 5vw, 1.55rem);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fundraiser-campaign-page .fr-donate__kicker { margin-bottom: 0.35rem; }
.fundraiser-campaign-page .fr-donate > h2 { margin: 0 0 1.2rem; font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: -0.02em; }
.fundraiser-campaign-page .fr-raised { color: var(--fr-navy); font-size: clamp(2.2rem, 10vw, 3rem); letter-spacing: -0.045em; }
.fundraiser-campaign-page .fr-raised span { font-size: 0.36em; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.fundraiser-campaign-page .fr-raised-meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0.45rem 0 0.7rem; }
.fundraiser-campaign-page .fr-raised-meta strong { color: var(--fr-navy); }
.fundraiser-campaign-page .fr-bar { height: 11px; margin-bottom: 0.8rem; background: #e5ecf4; }
.fundraiser-campaign-page .fr-bar > i { background: linear-gradient(90deg, var(--fr-pink), #ff79ad); transform-origin: left center; animation: fr-progress-fill 1s 0.35s cubic-bezier(.2,.7,.2,1) both; }
.fundraiser-campaign-page .fr-statline { display: flex; gap: 1.15rem; margin-bottom: 1.35rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--fr-line); }
.fundraiser-campaign-page .fr-statline > span { color: #687890; font-size: 0.78rem; }
.fundraiser-campaign-page .fr-statline b { display: inline; margin-right: 0.2rem; color: var(--fr-navy); font-size: 0.9rem; }
.fr-amount-fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.fr-amount-fieldset legend,
.fundraiser-campaign-page .fr-money > label { margin: 0 0 0.55rem; color: var(--fr-navy); font-size: 0.84rem; font-weight: 850; }
.fundraiser-campaign-page .fr-amounts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.55rem; margin-bottom: 1rem; }
.fundraiser-campaign-page .fr-amount {
  position: relative;
  display: flex;
  min-height: 56px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #cbd8e6;
  border-radius: 12px;
  padding: 0.55rem 0.35rem;
  background: #fff;
  color: var(--fr-navy);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.fundraiser-campaign-page .fr-amount span { font-size: 1.05rem; font-weight: 900; line-height: 1; }
.fundraiser-campaign-page .fr-amount small { margin-top: 0.22rem; color: #718199; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.fundraiser-campaign-page .fr-amount:hover { border-color: var(--fr-pink); transform: translateY(-1px); }
.fundraiser-campaign-page .fr-amount.is-active,
.fundraiser-campaign-page .fr-amount[aria-pressed="true"] { border-color: var(--fr-pink); background: #fff0f6; color: var(--fr-pink-dark); box-shadow: inset 0 0 0 1px var(--fr-pink); }
.fundraiser-campaign-page .fr-amount.is-active::after,
.fundraiser-campaign-page .fr-amount[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 5px; right: 7px; color: var(--fr-pink); font-size: 0.7rem; font-weight: 900; }
.fundraiser-campaign-page .fr-money { margin: 0 0 1rem; }
.fr-money__control { position: relative; }
.fr-money__control > span { position: absolute; z-index: 1; top: 50%; left: 0.85rem; transform: translateY(-50%); color: #66768c; font-weight: 900; }
.fundraiser-campaign-page .fr-money::before { content: none; }
.fundraiser-campaign-page .vol-form .fr-money input[type="number"] { min-height: 50px; border-color: #cbd8e6; border-radius: 12px; padding: 0.75rem 0.75rem 0.75rem 2rem; font-size: 1.05rem; }
.fr-donor-details { margin: 0.35rem 0 1rem; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
.fr-donor-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; color: var(--fr-navy); font-size: 0.84rem; font-weight: 850; cursor: pointer; list-style: none; }
.fr-donor-details summary::-webkit-details-marker { display: none; }
.fr-donor-details summary::before { content: "+"; display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #edf3f9; color: var(--fr-navy); font-size: 1rem; }
.fr-donor-details summary::after { content: none; }
.fr-donor-details[open] summary::before { content: "–"; }
.fr-donor-details summary span { margin-left: auto; color: #74839a; font-size: 0.67rem; font-weight: 750; text-transform: uppercase; }
.fr-donor-details > div { padding: 0.3rem 0 0.35rem; }
.fundraiser-campaign-page .fr-donate .vol-form label { margin-bottom: 0.75rem; }
.fundraiser-campaign-page .fr-donate .vol-form label > span { color: #52637a; font-size: 0.78rem; }
.fundraiser-campaign-page .fr-donate .vol-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.fundraiser-campaign-page .fr-donate .vol-form textarea {
  min-height: 44px;
  border-color: #cbd8e6;
}
.fundraiser-campaign-page .fr-donate-btn { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0; font-size: 1rem; }
.fundraiser-campaign-page .fr-donate-btn span { font-size: 1.2em; transition: transform .16s ease; }
.fundraiser-campaign-page .fr-donate-btn:hover span { transform: translateX(3px); }
.fundraiser-campaign-page .fr-secure { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.75rem auto 0; color: #687890; text-align: left; }
.fundraiser-campaign-page .fr-secure > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #cbd8e6; border-radius: 50%; color: #177345; font-weight: 900; }
.fundraiser-campaign-page .fr-secure p { margin: 0; font-size: 0.68rem; line-height: 1.35; }
.fundraiser-campaign-page .fr-secure strong { display: block; color: #3e4e65; }
.fundraiser-campaign-page .fr-monthly {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #e4ecf5;
  color: #5a6b80;
  font-size: 0.92rem;
  line-height: 1.45;
}
.fundraiser-campaign-page .fr-monthly a {
  display: inline;
  color: #002b5f;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.fundraiser-campaign-page .fr-monthly span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #6b7c90;
}
.fundraiser-campaign-page .fr-aside-share { margin-top: 1.25rem; padding-top: 1.1rem; }

.fundraiser-campaign-page .fr-share-panel {
  margin: clamp(2.5rem, 7vw, 4.25rem) 0 0;
  border-color: #e6bed0;
  border-radius: 22px;
  padding: clamp(1.3rem, 5vw, 2rem);
  background: linear-gradient(140deg, #fff 0%, #fff3f8 100%);
  box-shadow: 0 16px 40px rgba(0,43,95,0.08);
}
.fundraiser-campaign-page .fr-share-panel h2 { max-width: 19ch; font-size: clamp(1.55rem, 5vw, 2.25rem); }
.fundraiser-campaign-page .fr-share-panel__lead { color: #52637a; }
.fundraiser-campaign-page .fr-share-og { max-width: none; border-color: #d5dfeb; }
.fundraiser-campaign-page .fr-share-btn { min-height: 44px; }
.fundraiser-campaign-page .fr-share-more { border-color: #dfc8d3; }

.fundraiser-campaign-page .fr-supporters { margin-top: clamp(2.5rem, 7vw, 4.25rem); }
.fundraiser-campaign-page .fr-supporters h2 { font-size: clamp(1.65rem, 5vw, 2.3rem); }
.fundraiser-campaign-page .fr-supporter { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0.8rem; padding: 1rem 0; border-color: var(--fr-line); }
.fr-supporter__avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--fr-navy); color: #fff; font-weight: 900; }
.fundraiser-campaign-page .fr-supporter > div:last-child { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.15rem 0.6rem; align-items: baseline; }
.fundraiser-campaign-page .fr-supporter strong { min-width: 0; overflow-wrap: anywhere; }
.fundraiser-campaign-page .fr-supporter b { color: var(--fr-pink-dark); font-size: 0.86rem; }
.fundraiser-campaign-page .fr-supporter span { grid-column: 1 / -1; display: block; margin-top: 0.25rem; color: #52637a; line-height: 1.5; }

.fundraiser-campaign-page.fr-motion-ready [data-fr-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.fundraiser-campaign-page.fr-motion-ready [data-fr-reveal].is-visible { opacity: 1; transform: none; }

@keyframes fr-hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fr-visual-in { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fr-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 600px) {
  .fr-trust-band .wrap { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fr-trust-band span { justify-content: center; padding: 0.8rem 1rem; text-align: center; }
  .fr-trust-band span + span { border-left: 1px solid var(--fr-line); }
  .fr-impact-promise { grid-template-columns: 72px minmax(0,1fr); }
  .fundraiser-campaign-page .fr-share-og { grid-template-columns: 150px 1fr; }
}

@media (min-width: 901px) {
  .fr-campaign-hero__grid { grid-template-columns: minmax(0,1.07fr) minmax(340px,.93fr); gap: clamp(2.5rem,5vw,5rem); min-height: 630px; }
  .fr-campaign-hero h1 { font-size: clamp(4rem,6.2vw,6.2rem); }
  .fr-campaign-hero__visual,
  .fr-campaign-hero__visual img,
  .fr-campaign-hero__fallback { min-height: 520px; }
  .fundraiser-campaign-page .fr-layout { grid-template-columns: minmax(0,1fr) minmax(330px,390px); gap: clamp(2.5rem,5vw,5rem); }
  .fundraiser-campaign-page .fr-main { order: 1; }
  .fundraiser-campaign-page .fr-aside { position: sticky; top: 1rem; order: 2; }
}

@media (min-width: 1120px) {
  .fr-campaign-hero__visual { transform: rotate(1.1deg); }
}

@media (max-width: 599px) {
  .fr-trust-band span + span { border-top: 1px solid var(--fr-line); }
  .fr-hero-actions .button,
  .fr-hero-share-button { flex: 1 1 auto; }
  .fr-hero-share-link { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-campaign-hero__copy,
  .fr-campaign-hero__visual,
  .fr-hero-progress__track i,
  .fundraiser-campaign-page .fr-bar > i { animation: none; }
  .fundraiser-campaign-page.fr-motion-ready [data-fr-reveal] { opacity: 1; transform: none; transition: none; }
  .fr-campaign-hero__visual img,
  .fundraiser-campaign-page .fr-donate-btn span { transition: none; }
}

.fundraiser-campaign-page :is(.fr-amount, .fr-hero-share-button, .fr-donate-btn, .fr-share-btn, .fr-share-chip, .fr-donor-details summary):focus-visible {
  outline: 3px solid #ff9bc2;
  outline-offset: 3px;
}

/* Fundraiser index grid */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.fr-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 43, 95, 0.05); transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none; color: inherit; }
.fr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 43, 95, 0.12); }
.fr-card__media { width: 100%; height: 170px; object-fit: cover; }
.fr-card__media--empty { background: linear-gradient(135deg, var(--fnd-navy), var(--fnd-magenta)); }
.fr-card__body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.fr-card h3 { margin: 0 0 0.4rem; color: var(--fnd-navy); font-size: 1.1rem; }
.fr-card p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.92rem; }
.fr-card__foot { margin-top: auto; }
.fr-card__raised { font-weight: 800; color: var(--fnd-navy); font-size: 0.92rem; margin-bottom: 0.35rem; }

/* Guided steps + supply tick-list */
.vol-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.vol-steps li { flex: 1 1 150px; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--muted); font-weight: 700; font-size: 0.88rem; }
.vol-steps li.is-current { border-color: var(--fnd-magenta); background: var(--pale); color: var(--fnd-magenta); }
.vol-steps li.is-done { border-color: var(--fnd-navy); color: var(--fnd-navy); background: #fff; }
.vol-supply-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.vol-supply { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin: 0; }
.vol-supply span { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.vol-supply input { width: 66px; flex: 0 0 auto; padding: 0.4rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; text-align: center; }
.vol-supply input:focus { outline: 3px solid var(--fnd-navy); outline-offset: 2px; border-color: var(--fnd-navy); box-shadow: none; }

/* ============================================================
   Donation page (/donate)
   ============================================================ */
.dn-hero { position: relative; overflow: hidden; background: linear-gradient(130deg, var(--fnd-deep-navy), var(--fnd-navy) 58%, #0c3f78); color: #fff; }
.dn-hero .wrap { position: relative; z-index: 1; padding-top: clamp(2rem, 5vw, 3.4rem); padding-bottom: clamp(2rem, 5vw, 3.4rem); }
.dn-hero .dn-kicker { color: #ff8fc0; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; }
.dn-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05; margin: 0.4rem 0; }
.dn-hero .lead { color: #dbe7f5; max-width: 640px; }
.dn-hero .dn-tagline { font-style: italic; color: #ff8fc0; font-weight: 800; margin-top: 0.4rem; }
.dn-hero__hearts { position: absolute; inset: 0; z-index: 0; opacity: 0.16; pointer-events: none; }
.dn-hero__hearts svg { position: absolute; color: #ff8fc0; }

.dn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.dn-aside { position: sticky; top: 1rem; }
.dn-story { font-size: 1.03rem; line-height: 1.75; color: var(--text); }
.dn-story h2 { color: var(--fnd-navy); }

.dn-impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
.dn-impact-card { border: 1px solid var(--border); border-radius: 14px; padding: 0.9rem 1rem; background: var(--panel); }
.dn-impact-card svg { width: 26px; height: 26px; color: var(--fnd-magenta); }
.dn-impact-card strong { display: block; color: var(--fnd-navy); margin-top: 0.3rem; }
.dn-impact-card span { color: var(--muted); font-size: 0.85rem; }

.dn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}
.dn-hero-actions .button {
  background: var(--fnd-magenta, #c9005a);
  border-color: var(--fnd-magenta, #c9005a);
  color: #fff;
}
.dn-hero-actions .button:hover {
  background: #9d0047;
  border-color: #9d0047;
  color: #fff;
}
.dn-hero-actions .button.secondary {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.dn-hero-actions .button.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Friend of FND Connect — monthly tier */
.dn-friend {
  margin-bottom: 1rem;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(201, 0, 90, 0.22);
  background:
    linear-gradient(160deg, #fff7fb 0%, #ffffff 55%, #f4f8ff 100%);
  box-shadow: 0 16px 44px rgba(0, 43, 95, 0.1);
}
.dn-friend__badge {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(201, 0, 90, 0.1);
  border: 1px solid rgba(201, 0, 90, 0.22);
  color: var(--fnd-magenta);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dn-friend h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  color: var(--fnd-navy);
  line-height: 1.2;
}
.dn-friend__price {
  margin: 0 0 0.55rem;
  font-size: 1.55rem;
  color: var(--fnd-magenta);
  line-height: 1;
}
.dn-friend__price strong { font-weight: 900; }
.dn-friend > p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.dn-friend__list {
  margin: 0 0 1rem;
  padding: 0 0 0 1.1rem;
  color: var(--fnd-navy);
  font-size: 0.88rem;
  line-height: 1.45;
}
.dn-friend__list li { margin: 0.2rem 0; }
.dn-friend__cta {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.45rem;
  padding: 0.9rem 1rem;
  font-size: 1.02rem;
}
.dn-friend .fr-secure { margin: 0.35rem 0 0; }

.dn-tracker { border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 16px 44px rgba(0, 43, 95, 0.12); padding: 1.4rem; }
.dn-tracker h2 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--fnd-navy); }
.dn-raised { font-size: 2.4rem; font-weight: 900; color: var(--fnd-navy); line-height: 1; }
.dn-raised-meta { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 0.7rem; }
.dn-bar { background: #eef2f7; border-radius: 999px; height: 12px; overflow: hidden; margin-bottom: 0.6rem; }
.dn-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--fnd-navy), var(--fnd-magenta)); border-radius: 999px; transition: width 0.6s ease; }
.dn-count { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; }

.dn-ded-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.dn-ded-opts label { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--fnd-navy); cursor: pointer; margin: 0; }
.dn-ded-opts input { width: auto; margin: 0; }
.dn-ded-opts label:has(input:checked) { border-color: var(--fnd-magenta); background: var(--pale); color: var(--fnd-magenta); }
.dn-ded-opts label:has(input:focus-visible) { outline: 3px solid var(--fnd-navy); outline-offset: 2px; }

.dn-wall { margin-top: 1.75rem; }
.dn-wall h2 { color: var(--fnd-navy); font-size: 1.2rem; }
.dn-donor { padding: 0.85rem 0; border-top: 1px solid var(--border); }
.dn-donor strong { color: var(--fnd-navy); }
.dn-donor .dn-ded { color: var(--fnd-magenta); font-weight: 700; font-size: 0.85rem; }
.dn-donor .dn-msg { color: var(--muted); display: block; margin-top: 0.2rem; }

@media (max-width: 900px) { .dn-layout { grid-template-columns: 1fr; } .dn-aside { position: static; order: -1; } }

/* Ambassador Studio: a vertical stack of post panels and a tidy comment list. */
.vol-stack { display: flex; flex-direction: column; gap: 1rem; }
.vol-comment-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.vol-comment-list li { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; font-size: 0.92rem; padding: 0.35rem 0.5rem; border-radius: 8px; background: var(--pale, #fff1f7); }
.vol-comment-list li.is-hidden { opacity: 0.55; }
.vol-comment-list li button { min-height: 44px; background: none; border: 0; color: var(--fnd-magenta, #c9005a); font-weight: 700; cursor: pointer; font-size: 0.85rem; }

/* Ambassador Studio — live preview when a TikTok/YouTube link is pasted. */
.amb-embed-preview {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border, #e6e0ea);
  border-radius: 12px;
  background: var(--pale, #fff1f7);
}
.amb-embed-preview img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
  background: #000;
}
.amb-embed-preview strong { display: block; color: var(--fnd-navy, #002b5f); }
.amb-embed-preview span { color: var(--muted, #637086); font-size: 0.9rem; }

/* ============================================================
   E-sign volunteer agreement (DocuSign-style)
   ============================================================ */
.vol-esign-doc {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 43, 95, 0.06);
  padding: 1.5rem 1.4rem 1.25rem;
  margin-bottom: 1.5rem;
}
.vol-esign-doc__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--fnd-navy);
}
.vol-esign-doc__brand img { width: 96px; height: auto; }
.vol-esign-doc__brand strong { display: block; color: var(--fnd-navy); font-size: 1.05rem; }
.vol-esign-doc__brand small { color: var(--muted); font-size: 0.85rem; }
.vol-esign-doc h2 { margin: 0 0 0.35rem; color: var(--fnd-navy); font-size: 1.45rem; }
.vol-esign-doc h3 { margin: 1.15rem 0 0.45rem; color: var(--fnd-navy); font-size: 1.05rem; }
.vol-esign-doc ul { margin: 0.35rem 0 0.75rem 1.1rem; padding: 0; }
.vol-esign-doc li { margin-bottom: 0.35rem; }
.vol-esign-doc__meta { margin: 0 0 0.85rem; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.vol-esign-doc__footer { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; }

.vol-esign-pad { margin: 0.5rem 0 0.25rem; }
.vol-esign-pad__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.vol-esign-pad__label > span { font-weight: 700; font-size: 0.85rem; color: var(--fnd-navy); }
.vol-esign-pad__clear {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fnd-navy);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font: 700 0.82rem inherit;
  cursor: pointer;
}
.vol-esign-pad__clear:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); }
.vol-esign-pad__frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 1px 3px rgba(0, 43, 95, 0.06);
}
.vol-esign-pad__frame canvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
}
.vol-esign-pad__line {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 2.4rem;
  height: 1px;
  background: var(--fnd-navy);
  opacity: 0.55;
  pointer-events: none;
}
.vol-esign-pad__hint {
  position: absolute;
  left: 1.25rem;
  bottom: 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.vol-esign-form .vol-actions { margin-top: 0.25rem; margin-bottom: 2rem; }

/* Connect Links gate + login modal (shareable public landing) */
.cl-gate-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.6;
  color: var(--text, #26364d);
}
.cl-gate-list code {
  font-size: 0.92em;
  background: var(--panel, #f7f9fc);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
body.vol-login-modal-open {
  overflow: hidden;
}
.vol-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.vol-login-modal.is-open {
  display: flex;
}
.vol-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 26, 59, 0.55);
  backdrop-filter: blur(2px);
}
.vol-login-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(92vh, 640px);
  overflow: auto;
  padding: 1.4rem 1.35rem 1.25rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 43, 95, 0.1);
  box-shadow: 0 24px 60px rgba(0, 26, 59, 0.28);
}
.vol-login-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--panel, #f7f9fc);
  color: var(--fnd-navy, #002b5f);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.vol-login-modal__close:hover {
  background: #e8eef6;
}
.vol-login-modal__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fnd-magenta, #c9005a);
}
.vol-login-modal__panel h2 {
  margin: 0 0 0.4rem;
  color: var(--fnd-navy, #002b5f);
  font-size: 1.35rem;
}
.vol-login-modal__lead {
  margin: 0 0 1rem;
  color: var(--muted, #637086);
  line-height: 1.5;
  font-size: 0.95rem;
}
.vol-login-modal .vol-form label {
  display: block;
  margin-bottom: 0.75rem;
}
.vol-login-modal .vol-form label span {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
  color: var(--fnd-navy, #002b5f);
}
.vol-login-modal .vol-form input[type="email"],
.vol-login-modal .vol-form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}
.vol-login-modal__footer {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted, #637086);
}
.vol-login-modal__footer a {
  color: var(--fnd-navy, #002b5f);
  font-weight: 700;
}

/* ============================================================
   Public volunteer landing — high-energy recruitment campaign
   ============================================================ */

.volunteer-landing {
  --vl-ink: #031b3d;
  --vl-navy: #002b5f;
  --vl-deep: #001a3b;
  --vl-pink: #c9005a;
  --vl-hot: #ff9bc4;
  --vl-cream: #fff9f0;
  --vl-paper: #fffdf9;
  background: var(--vl-paper);
}

.volunteer-landing main {
  overflow: hidden;
}

.volunteer-landing .vl-kicker {
  margin: 0 0 0.9rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.volunteer-landing .vl-kicker--pink {
  color: var(--vl-pink);
}

.vl-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 8% 18%, rgba(237, 43, 123, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 42%, rgba(255, 255, 255, 0.15) 0 1.5px, transparent 2px),
    radial-gradient(circle at 45% 82%, rgba(237, 43, 123, 0.16) 0 2px, transparent 3px),
    var(--vl-deep);
  background-size: 44px 44px, 58px 58px, 70px 70px, auto;
}

.vl-hero::after {
  position: absolute;
  z-index: -1;
  right: -8vw;
  bottom: -22vw;
  width: 48vw;
  height: 48vw;
  border: clamp(28px, 5vw, 82px) solid rgba(237, 43, 123, 0.15);
  border-radius: 50%;
  content: "";
}

.vl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  min-height: clamp(560px, calc(100svh - 150px), 740px);
  padding-top: clamp(3.2rem, 7vw, 6rem);
  padding-bottom: clamp(3.2rem, 7vw, 6rem);
}

.vl-hero__copy {
  position: relative;
  z-index: 2;
}

.vl-breadcrumbs {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vl-breadcrumbs a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  color: #fff;
}

.vl-hero h1 {
  max-width: 700px;
  margin: 0 0 1.4rem;
  color: #fff;
  font-size: clamp(3.5rem, 8vw, 7.7rem);
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.vl-hero h1 em,
.vl-flex__headline h2 em {
  display: inline-block;
  color: var(--vl-hot);
  font-family: "Paint Brush Script", "Inter", sans-serif;
  font-size: 1.08em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
  transform: rotate(-2deg);
}

.vl-hero__lead {
  max-width: 610px;
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.55;
}

.vl-hero__actions,
.vl-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
}

.volunteer-landing .vl-button {
  min-height: 56px;
  padding: 0.88rem 1.35rem;
  border-radius: 2px;
  font-size: 0.96rem;
  box-shadow: 7px 7px 0 rgba(255, 255, 255, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.volunteer-landing .vl-button svg {
  transition: transform 180ms ease;
}

.volunteer-landing .vl-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 rgba(255, 255, 255, 0.16);
}

.volunteer-landing .vl-button:hover svg {
  transform: translateX(4px);
}

.volunteer-landing .vl-button--hot {
  border-color: var(--vl-pink);
  color: #fff;
  background: var(--vl-pink);
}

.volunteer-landing .vl-button--hot:hover,
.volunteer-landing .vl-button--hot:focus-visible {
  border-color: #fff;
  color: #fff;
  background: #9f0048;
}

.vl-text-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 48px;
  color: #fff;
  font-weight: 800;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.vl-text-link:hover {
  color: var(--vl-hot);
}

.vl-text-link span {
  font-size: 1.25rem;
}

.vl-signin {
  margin: 1.35rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.85rem;
}

.vl-signin a {
  color: #fff;
  font-weight: 800;
}

.vl-hero__visual {
  position: relative;
  z-index: 1;
  width: min(100%, 490px);
  margin: 0 auto;
  padding: 0 0 clamp(3.2rem, 6vw, 4.8rem) clamp(1rem, 3vw, 2.4rem);
}

.vl-hero__visual::before {
  position: absolute;
  z-index: -1;
  inset: clamp(1.5rem, 4vw, 3rem) clamp(1.3rem, 3vw, 2.4rem) clamp(2.1rem, 5vw, 4rem) 0;
  border: 4px solid var(--vl-hot);
  content: "";
  transform: rotate(-4deg);
}

.vl-hero__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0.82;
  background: var(--vl-pink);
  clip-path: polygon(5% 0, 100% 3%, 95% 100%, 0 96%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.vl-hero__photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 26, 59, 0.32));
  content: "";
}

.vl-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vl-hero__visual:hover .vl-hero__photo img {
  transform: scale(1.035);
}

.vl-hero__visual figcaption {
  position: absolute;
  right: -0.8rem;
  bottom: 0.2rem;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.vl-hero__visual figcaption strong {
  color: var(--vl-hot);
  font-size: 1.35em;
}

.vl-hero__spark {
  position: absolute;
  z-index: 0;
  width: 20px;
  height: 20px;
  background: var(--vl-hot);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}

.vl-hero__spark--one {
  top: 15%;
  right: 5%;
  transform: rotate(20deg) scale(1.8);
}

.vl-hero__spark--two {
  bottom: 11%;
  left: 48%;
  transform: rotate(45deg) scale(0.8);
}

.vl-proof {
  color: #fff;
  background: var(--vl-navy);
}

.vl-proof__inner {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
}

.vl-proof__intro {
  margin: 0;
  color: var(--vl-hot);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vl-proof__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem clamp(1.25rem, 3vw, 2.5rem);
}

.vl-proof__facts a {
  display: inline-flex;
  min-height: 44px;
  gap: 0.65rem;
  align-items: center;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.vl-proof__facts a:hover {
  color: var(--vl-hot);
}

.vl-proof__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vl-hot);
  box-shadow: 0 0 0 4px rgba(237, 43, 123, 0.16);
}

.vl-marquee {
  overflow: hidden;
  padding: 0.7rem 0;
  color: var(--vl-deep);
  background: var(--vl-hot);
  border-top: 3px solid var(--vl-deep);
  border-bottom: 3px solid var(--vl-deep);
  transform: rotate(-1deg) scale(1.02);
}

.vl-marquee__track {
  display: flex;
  width: max-content;
  gap: 1.1rem;
  align-items: center;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  animation: vl-marquee 24s linear infinite;
}

.vl-marquee__track i {
  font-style: normal;
}

@keyframes vl-marquee {
  to { transform: translateX(-50%); }
}

.vl-paths {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vl-paper);
}

.vl-section-head {
  max-width: 920px;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.vl-section-head h2 {
  margin-bottom: 1rem;
  color: var(--vl-ink);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.vl-section-head > p:last-child {
  max-width: 730px;
  margin: 0;
  color: #4b5b70;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
}

.vl-paths__list {
  border-bottom: 2px solid var(--vl-navy);
}

.vl-path {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 2px solid var(--vl-navy);
}

.vl-path__number {
  color: rgba(0, 43, 95, 0.18);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.85;
}

.vl-path__kicker {
  margin: 0 0 0.5rem;
  color: var(--vl-pink);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vl-path__copy h3 {
  max-width: 640px;
  margin: 0 0 0.85rem;
  color: var(--vl-ink);
  font-size: clamp(1.7rem, 3.3vw, 3rem);
  letter-spacing: -0.045em;
}

.vl-path__copy > p:last-child {
  max-width: 640px;
  margin: 0;
  color: #536174;
}

.vl-role-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 43, 95, 0.16);
}

.vl-role-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  margin: 0;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(0, 43, 95, 0.16);
  color: var(--vl-navy);
  font-size: 0.9rem;
  font-weight: 800;
}

.vl-role-list svg {
  width: 20px;
  color: var(--vl-pink);
}

.vl-path--fundraise .vl-path__number,
.vl-path--fundraise .vl-path__kicker,
.vl-path--fundraise .vl-role-list svg {
  color: var(--vl-pink);
}

.vl-path--community .vl-path__number {
  color: rgba(237, 43, 123, 0.24);
}

.vl-path--skills .vl-path__number {
  color: rgba(0, 94, 184, 0.2);
}

.vl-fundraise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 680px;
  color: #fff;
  background: #a8004b;
}

.vl-fundraise__image {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--vl-navy);
}

.vl-fundraise__image::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 60%, rgba(168, 0, 75, 0.5)),
    linear-gradient(180deg, transparent 65%, rgba(0, 26, 59, 0.38));
  content: "";
}

.vl-fundraise__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vl-fundraise:hover .vl-fundraise__image img {
  transform: scale(1.07);
}

.vl-fundraise__copy {
  align-self: center;
  max-width: 720px;
  padding: clamp(3.5rem, 8vw, 7.5rem) clamp(1.5rem, 7vw, 7rem);
}

.vl-fundraise__copy h2 {
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.9rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.vl-fundraise__lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.03rem, 1.8vw, 1.2rem);
}

.vl-tick-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.7rem 0 2rem;
  padding: 0;
  list-style: none;
}

.vl-tick-list li {
  position: relative;
  margin: 0;
  padding-left: 1.8rem;
  color: #fff;
  font-weight: 750;
}

.vl-tick-list li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.7rem;
  height: 0.35rem;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  content: "";
  transform: rotate(-45deg);
}

.volunteer-landing .vl-button--light {
  border-color: #fff;
  color: var(--vl-navy);
  background: #fff;
  box-shadow: 7px 7px 0 rgba(0, 26, 59, 0.2);
}

.volunteer-landing .vl-button--light:hover {
  border-color: var(--vl-navy);
  color: #fff;
  background: var(--vl-navy);
  box-shadow: 10px 10px 0 rgba(0, 26, 59, 0.2);
}

.vl-flex {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vl-cream);
}

.vl-flex__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.vl-flex__headline {
  position: sticky;
  top: calc(var(--anchor-offset, 148px) + 1.5rem);
}

.vl-flex__headline h2 {
  margin: 0;
  color: var(--vl-ink);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.065em;
}

/* The lighter campaign pink is reserved for navy surfaces. On the cream
   section the darker brand pink keeps the script headline above 3:1. */
.vl-flex__headline h2 em {
  color: var(--vl-pink);
}

.vl-flex__options {
  border-bottom: 2px solid var(--vl-navy);
}

.vl-flex__options article {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: clamp(1.8rem, 4vw, 3rem) 0;
  border-top: 2px solid var(--vl-navy);
}

.vl-flex__options article > span {
  color: var(--vl-pink);
  font-size: 0.8rem;
  font-weight: 950;
}

.vl-flex__options h3 {
  margin: 0 0 0.45rem;
  color: var(--vl-ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.vl-flex__options p {
  max-width: 520px;
  margin: 0;
  color: #586578;
}

.vl-steps {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  color: #fff;
  background: var(--vl-deep);
}

.vl-steps::before {
  position: absolute;
  top: 12%;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  border: 3rem solid rgba(237, 43, 123, 0.14);
  border-radius: 50%;
  content: "";
}

.vl-section-head--light h2 {
  color: #fff;
}

.vl-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.vl-steps__list li {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.2rem;
  margin: 0;
  padding: clamp(1.7rem, 4vw, 3.3rem);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.vl-steps__list li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.vl-steps__list strong {
  color: var(--vl-hot);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.8;
}

.vl-steps__list h3 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
}

.vl-steps__list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.96rem;
}

.vl-final {
  position: relative;
  padding: clamp(5.5rem, 11vw, 10rem) 0;
  background:
    linear-gradient(rgba(255, 253, 249, 0.93), rgba(255, 253, 249, 0.93)),
    url("/assets/img/test.jpeg") center / cover;
}

.vl-final::before,
.vl-final::after {
  position: absolute;
  z-index: 0;
  color: rgba(237, 43, 123, 0.12);
  font-size: clamp(8rem, 23vw, 22rem);
  font-weight: 950;
  line-height: 0.7;
  content: "✦";
}

.vl-final::before {
  top: -2rem;
  left: -4rem;
}

.vl-final::after {
  right: -4rem;
  bottom: -2rem;
  transform: scale(0.55) rotate(20deg);
}

.vl-final__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  text-align: center;
}

.vl-final h2 {
  margin: 0 auto 1.2rem;
  color: var(--vl-ink);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.vl-final__inner > p:not(.vl-kicker) {
  margin: 0 auto 2rem;
  color: #536174;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.vl-final__actions {
  justify-content: center;
}

.vl-final__actions > a:not(.button) {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--vl-navy);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Motion only activates after the observer is available. */
.vol-motion-ready [data-vol-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vol-motion-ready [data-vol-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vl-hero__copy > *,
.vl-hero__visual {
  animation: vl-rise-in 720ms both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vl-hero__copy > :nth-child(1) { animation-delay: 40ms; }
.vl-hero__copy > :nth-child(2) { animation-delay: 100ms; }
.vl-hero__copy > :nth-child(3) { animation-delay: 170ms; }
.vl-hero__copy > :nth-child(4) { animation-delay: 240ms; }
.vl-hero__copy > :nth-child(5) { animation-delay: 310ms; }
.vl-hero__copy > :nth-child(6) { animation-delay: 370ms; }
.vl-hero__visual { animation-delay: 230ms; }

@keyframes vl-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keep the conversion action inside the first screen when the sticky public
   header consumes a large share of a short laptop viewport. */
@media (min-width: 901px) and (max-height: 800px) {
  .vl-hero__grid {
    min-height: calc(100svh - 150px);
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }

  .vl-breadcrumbs {
    margin-bottom: 1.1rem;
  }

  .vl-hero h1 {
    font-size: clamp(3.6rem, 6.6vw, 5.9rem);
  }

  .vl-hero__lead {
    margin-bottom: 1rem;
  }

  .vl-signin {
    margin-top: 0.8rem;
  }

  .vl-hero__visual {
    width: min(100%, 410px);
    padding-bottom: 3.2rem;
  }
}

@media (max-width: 900px) {
  .vl-hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .vl-breadcrumbs {
    margin-bottom: 2rem;
  }

  .vl-hero__visual {
    width: min(92%, 520px);
    margin-top: 0.75rem;
  }

  .vl-proof__inner,
  .vl-flex__grid {
    grid-template-columns: 1fr;
  }

  .vl-path {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .vl-role-list {
    grid-column: 2;
  }

  .vl-fundraise {
    grid-template-columns: 1fr;
  }

  .vl-fundraise__image {
    min-height: min(70vw, 560px);
  }

  .vl-fundraise__image::after {
    background: linear-gradient(180deg, transparent 60%, rgba(168, 0, 75, 0.65));
  }

  .vl-flex__headline {
    position: static;
  }

  .vl-steps__list {
    grid-template-columns: 1fr;
  }

  .vl-steps__list li {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .vl-steps__list li:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .vl-hero__grid {
    gap: 2rem;
  }

  .vl-hero h1 {
    font-size: clamp(3.25rem, 17vw, 5.4rem);
  }

  .vl-hero__actions,
  .vl-final__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .volunteer-landing .vl-button,
  .vl-text-link,
  .vl-final__actions > a:not(.button) {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .vl-hero__visual {
    width: 100%;
    padding-left: 0.7rem;
  }

  .vl-hero__visual figcaption {
    right: 0;
    gap: 0.25rem 0.55rem;
    font-size: 0.9rem;
  }

  .vl-proof__facts {
    display: grid;
  }

  .vl-path {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .vl-path__number {
    font-size: 2.5rem;
  }

  .vl-role-list {
    grid-column: auto;
    margin-top: 0.5rem;
  }

  .vl-fundraise__copy {
    padding: 3.5rem 1.25rem 4rem;
  }

  .vl-flex__options article {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .vl-steps__list li {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.5rem 1rem;
  }

  .vl-steps__list strong {
    font-size: 3.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vl-marquee__track,
  .vl-hero__copy > *,
  .vl-hero__visual {
    animation: none;
  }

  .vol-motion-ready [data-vol-reveal],
  .vol-motion-ready [data-vol-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vl-hero__photo img,
  .vl-fundraise__image img,
  .volunteer-landing .vl-button,
  .volunteer-landing .vl-button svg {
    transition: none;
  }
}

/* Friend of FND multi-level picker (panel) */
.friend-levels__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.friend-levels__option { position: relative; display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0.65rem 0.55rem; border-radius: 12px; border: 1px solid rgba(0, 43, 95, 0.12); background: #f8fafc; cursor: pointer; }
.friend-levels__option input { position: absolute; opacity: 0; pointer-events: none; }
.friend-levels__option.is-selected { border-color: var(--fnd-magenta); background: #fff0f6; box-shadow: 0 0 0 1px rgba(201, 0, 90, 0.2); }
.friend-levels__option:has(input:focus-visible) { outline: 3px solid var(--fnd-navy); outline-offset: 2px; }
.friend-levels__amount { font-size: 1.15rem; font-weight: 900; color: var(--fnd-navy); letter-spacing: -0.03em; }
.friend-levels__per { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.friend-levels__name { margin-top: 0.2rem; font-size: 0.82rem; font-weight: 800; color: var(--fnd-magenta); }
.friend-levels__blurb { font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
.friend-levels__cta { width: 100%; justify-content: center; margin-top: 0.15rem; }
.friend-levels__note { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .friend-levels__options { grid-template-columns: 1fr; } }

/* ============================================================
   Volunteer Portal App Shell — mobile-first, desktop-enhanced
   ============================================================ */

:root {
  --vol-sidebar-w: 17.5rem;
  --vol-topbar-h: 3.5rem;
  --vol-bottom-h: 4.15rem;
  --vol-app-bg: #f3f6fb;
  --vol-app-surface: #ffffff;
  --vol-app-ink: #0f2744;
  --vol-app-muted: #5b6b7c;
  --vol-app-border: rgba(15, 39, 68, 0.1);
  --vol-app-shadow: 0 10px 30px rgba(15, 39, 68, 0.08);
  --vol-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vol-safe-top: env(safe-area-inset-top, 0px);
}

/* Base: phone-first full-viewport app */
body.vol-app {
  margin: 0;
  background: var(--vol-app-bg);
  color: var(--vol-app-ink);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Portal uses the standard site header + footer — do not hide them. */

.vol-app__frame {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.vol-app__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: calc(var(--vol-bottom-h) + var(--vol-safe-bottom) + 0.5rem);
}

/* Top bar — compact on mobile */
.vol-app__topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--vol-topbar-h);
  padding: calc(0.45rem + var(--vol-safe-top)) 0.75rem 0.45rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vol-app-border);
}

.vol-app__topbar-start,
.vol-app__topbar-end {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.vol-app__menu-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--vol-app-border);
  border-radius: 12px;
  background: #fff;
  color: var(--fnd-navy);
  cursor: pointer;
  flex: 0 0 auto;
}
.vol-app__menu-btn:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); }
.vol-app__menu-btn:focus-visible { outline: 3px solid var(--fnd-navy); outline-offset: 2px; }

.vol-app__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.vol-app__brand img {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  object-fit: contain;
  flex: 0 0 auto;
}
.vol-app__brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.vol-app__brand strong {
  font-size: 0.92rem;
  color: var(--fnd-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vol-app__brand small {
  font-size: 0.75rem;
  color: var(--vol-app-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vol-app__top-link {
  display: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fnd-navy);
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
}
.vol-app__top-link:hover { color: var(--fnd-magenta); background: var(--pale); }

.vol-app__role-pill {
  display: none;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fnd-magenta);
  background: var(--pale);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.vol-app__logout button {
  min-height: 44px;
  border: 1px solid var(--vol-app-border);
  background: #fff;
  color: var(--fnd-navy);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: 700 0.82rem inherit;
  cursor: pointer;
  white-space: nowrap;
}
.vol-app__logout button:hover { border-color: var(--fnd-magenta); color: var(--fnd-magenta); }

/* Page content */
.vol-app__content {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 0.9rem 1.5rem;
  flex: 1 1 auto;
}
.vol-app__content--wide { max-width: 72rem; }

.vol-app__pagehead {
  margin: 0 0 1rem;
}
.vol-app__pagehead h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 5.2vw, 1.85rem);
  line-height: 1.18;
  color: var(--fnd-navy);
  letter-spacing: -0.02em;
}
.vol-app__lead {
  margin: 0;
  color: var(--vol-app-muted);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 42rem;
}

.vol-app__footer {
  padding: 0.75rem 1rem 1rem;
  text-align: center;
  color: var(--vol-app-muted);
  font-size: 0.8rem;
}
.vol-app__footer p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; justify-content: center; }
.vol-app__footer a { color: var(--fnd-navy); text-decoration: none; font-weight: 600; }
.vol-app__footer a:hover { color: var(--fnd-magenta); }

/* Sidebar — off-canvas drawer on mobile */
.vol-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(18.5rem, 88vw);
  z-index: 60;
  background: linear-gradient(180deg, #001f45 0%, #002b5f 55%, #1a3a6b 100%);
  color: #fff;
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  box-shadow: 12px 0 40px rgba(0, 20, 50, 0.28);
  display: flex;
  flex-direction: column;
}
body.vol-nav-open .vol-sidebar { transform: translateX(0); }

.vol-sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(0.75rem + var(--vol-safe-top)) 0.75rem calc(1rem + var(--vol-safe-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.vol-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.vol-sidebar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.vol-sidebar__logo img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  flex: 0 0 auto;
}
.vol-sidebar__logo span { display: flex; flex-direction: column; line-height: 1.15; }
.vol-sidebar__logo strong { font-size: 0.95rem; }
.vol-sidebar__logo small { font-size: 0.72rem; opacity: 0.75; }
.vol-sidebar__close {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.vol-sidebar__hello {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1rem;
}
.vol-sidebar__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, var(--fnd-magenta), #ff6b9d);
  flex: 0 0 auto;
}
.vol-sidebar__hello strong { display: block; font-size: 0.95rem; }
.vol-sidebar__hello small { opacity: 0.75; font-size: 0.75rem; }

.vol-sidebar__nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; }
.vol-sidebar__label {
  margin: 0.85rem 0 0.35rem;
  padding: 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.vol-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95rem;
}
.vol-sidebar__link:hover { background: rgba(255,255,255,0.1); }
.vol-sidebar__link.is-active {
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.vol-sidebar__ico {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  opacity: 0.95;
}
.vol-sidebar__ico svg { width: 1.2rem; height: 1.2rem; }

.vol-sidebar__foot {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  gap: 0.55rem;
}
.vol-sidebar__signout {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: 700 0.92rem inherit;
  cursor: pointer;
}
.vol-sidebar__signout:hover { background: rgba(255,255,255,0.1); }
.vol-sidebar__site {
  text-align: center;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem;
}
.vol-sidebar__site:hover { color: #fff; }

.vol-app__backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 18, 35, 0.48);
  backdrop-filter: blur(2px);
}

/* Bottom nav — primary mobile navigation */
.vol-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  min-height: var(--vol-bottom-h);
  padding: 0.25rem 0.2rem calc(0.25rem + var(--vol-safe-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--vol-app-border);
  box-shadow: 0 -8px 24px rgba(15, 39, 68, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vol-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.35rem;
  padding: 0.25rem 0.15rem;
  text-decoration: none;
  color: var(--vol-app-muted);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.vol-bottom-nav__item:hover { color: var(--fnd-navy); background: rgba(0, 43, 95, 0.04); }
.vol-bottom-nav__item.is-active {
  color: var(--fnd-magenta);
}
.vol-bottom-nav__ico {
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
}
.vol-bottom-nav__ico svg { width: 1.25rem; height: 1.25rem; }
.vol-bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

/* Hide legacy horizontal portal nav when shell is present */
.vol-app .vol-nav { display: none; }

/* Dashboard module grid — 1 col phone, multi desktop */
.vol-app .vol-modules {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.vol-app .vol-module {
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  box-shadow: var(--vol-app-shadow);
  background: var(--vol-app-surface);
}
.vol-app .vol-module__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
}

/* Soften panels inside app */
.vol-app .vol-panel {
  border-radius: 18px;
  box-shadow: var(--vol-app-shadow);
  border-color: var(--vol-app-border);
}
.vol-app .vol-panel__head {
  padding: 0.9rem 1.05rem;
  background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
}
.vol-app .vol-panel__body { padding: 1.05rem; }

/* Welcome strip on dashboard */
.vol-dash-welcome {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(237, 43, 123, 0.18), transparent 55%),
    linear-gradient(135deg, #002b5f 0%, #123d78 55%, #2a1f55 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 30, 70, 0.22);
}
.vol-dash-welcome h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.2rem, 4.5vw, 1.45rem);
  letter-spacing: -0.02em;
  color: #ffffff !important; /* beat global h2 navy */
}
.vol-dash-welcome p {
  margin: 0;
  opacity: 0.95;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.95) !important;
}
.vol-dash-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vol-dash-welcome__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
.vol-dash-welcome__actions a.primary {
  background: #fff;
  color: var(--fnd-navy);
}
.vol-dash-welcome__actions a.ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}

.vol-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 1.5rem 0 0.75rem;
}
.vol-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--fnd-navy);
}
.vol-section-head a {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--fnd-magenta);
  text-decoration: none;
}
.vol-section-head a:hover { text-decoration: underline; }

/* Story Library */
.vol-story-hero {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7fb 0%, #f3f7ff 100%);
  border: 1px solid rgba(237, 43, 123, 0.14);
}
.vol-story-hero h2 { margin: 0; color: var(--fnd-navy); font-size: 1.1rem; }
.vol-story-hero p { margin: 0; color: var(--vol-app-muted); font-size: 0.94rem; line-height: 1.5; }

.vol-consent {
  display: grid;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.vol-consent__item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--vol-app-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.vol-consent__item:has(input:checked) {
  border-color: rgba(28, 122, 68, 0.45);
  background: #f4fbf7;
}
.vol-consent__item input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--fnd-magenta);
}
.vol-consent__item span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--vol-app-ink);
}
.vol-consent__legal {
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid var(--vol-app-border);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--vol-app-muted);
}
.vol-consent__legal strong { color: var(--fnd-navy); }

.vol-file-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  min-height: 8.5rem;
  padding: 1.25rem 1rem;
  border: 2px dashed rgba(0, 43, 95, 0.22);
  border-radius: 16px;
  background: #fbfcfe;
  text-align: center;
  color: var(--vol-app-muted);
  margin-bottom: 0.85rem;
}
.vol-file-drop strong { color: var(--fnd-navy); font-size: 0.98rem; }
.vol-file-drop small { font-size: 0.8rem; }
.vol-file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.vol-file-meta {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fnd-navy);
}

.vol-story-list { display: grid; gap: 0.75rem; }
.vol-story-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--vol-app-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 39, 68, 0.04);
}
.vol-story-card h3 { margin: 0; font-size: 1rem; color: var(--fnd-navy); }
.vol-story-card p { margin: 0; font-size: 0.9rem; color: var(--vol-app-muted); }
.vol-story-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--vol-app-muted);
  font-weight: 650;
}

.vol-secure-note {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: #eef6ff;
  border: 1px solid rgba(31, 87, 195, 0.18);
  color: #1d3d72;
  font-size: 0.9rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}
.vol-secure-note svg { flex: 0 0 auto; margin-top: 0.1rem; }

/* Nested tool sub-navs stay visible and scroll on mobile */
.vol-app .group-nav,
.vol-app .outreach-nav {
  margin-bottom: 1rem;
}

/* Tablet+ */
@media (min-width: 720px) {
  .vol-app__content { padding: 1.35rem 1.35rem 2rem; }
  .vol-app__topbar { padding-left: 1.1rem; padding-right: 1.1rem; }
  .vol-app__brand strong { font-size: 1rem; }
  .vol-app__top-link,
  .vol-app__role-pill { display: inline-flex; }
  .vol-app .vol-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vol-dash-welcome {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1.35rem 1.5rem;
  }
  .vol-story-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop shell: persistent sidebar, no bottom nav */
@media (min-width: 960px) {
  .vol-app__frame {
    flex-direction: row;
    align-items: stretch;
  }
  .vol-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    transform: none;
    flex: 0 0 var(--vol-sidebar-w);
    width: var(--vol-sidebar-w);
    box-shadow: none;
  }
  .vol-sidebar__close { display: none; }
  .vol-app__menu-btn { display: none; }
  .vol-app__backdrop { display: none !important; }
  .vol-bottom-nav { display: none; }
  .vol-app__main {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
  }
  .vol-app__content {
    max-width: 58rem;
    padding: 1.5rem 1.75rem 2.25rem;
  }
  .vol-app__content--wide { max-width: 78rem; }
  .vol-app .vol-modules {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  .vol-app__pagehead h1 {
    font-size: clamp(1.65rem, 2vw, 2rem);
  }
}

@media (min-width: 1200px) {
  :root { --vol-sidebar-w: 18.5rem; }
  .vol-app__content { max-width: 64rem; }
  .vol-app__content--wide { max-width: 86rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vol-sidebar { transition: none; }
}

/* Auth pages (login/register) — premium mobile-first gate */
.vol-auth-card {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
.vol-auth-page .vol-app__content {
  max-width: 32rem;
}

.vol-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(237, 43, 123, 0.12), transparent 50%),
    radial-gradient(90% 60% at 0% 100%, rgba(0, 43, 95, 0.1), transparent 55%),
    var(--vol-app-bg);
}
.vol-auth__brand {
  padding: calc(0.9rem + var(--vol-safe-top)) 1rem 0.5rem;
}
.vol-auth__brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.vol-auth__brand img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 39, 68, 0.08);
}
.vol-auth__brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.vol-auth__brand strong {
  font-size: 1rem;
  color: var(--fnd-navy);
}
.vol-auth__brand small {
  font-size: 0.78rem;
  color: var(--vol-app-muted);
}
.vol-auth__main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 0.9rem 1.5rem;
}
.vol-auth__main--wide { align-items: stretch; }
.vol-auth__card {
  width: 100%;
  max-width: 26rem;
  margin: 0.5rem auto 0;
  padding: 1.25rem 1.15rem 1.35rem;
  border: 1px solid var(--vol-app-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(15, 39, 68, 0.1);
}
.vol-auth__card--wide {
  max-width: 46rem;
  padding: 1.35rem 1.2rem 1.5rem;
}
.vol-auth__card h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.4rem, 5vw, 1.7rem);
  color: var(--fnd-navy);
  letter-spacing: -0.02em;
}
.vol-auth__lead {
  margin: 0 0 1.1rem;
  color: var(--vol-app-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.vol-auth__submit {
  width: 100%;
  min-height: 2.85rem;
  margin-top: 0.35rem;
  justify-content: center;
}
.vol-auth__links {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--vol-app-muted);
}
.vol-auth__links a {
  color: var(--fnd-navy);
  font-weight: 750;
  text-decoration: none;
}
.vol-auth__links a:hover { color: var(--fnd-magenta); text-decoration: underline; }
.vol-auth__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.65rem;
  padding: 0.75rem 1rem calc(1rem + var(--vol-safe-bottom));
  font-size: 0.85rem;
  color: var(--vol-app-muted);
}
.vol-auth__foot a {
  color: var(--fnd-navy);
  font-weight: 700;
  text-decoration: none;
}
.vol-auth__foot a:hover { color: var(--fnd-magenta); }

@media (min-width: 720px) {
  .vol-auth__main { align-items: center; padding: 1.5rem; }
  .vol-auth__card { padding: 1.6rem 1.5rem 1.7rem; }
  .vol-auth__card--wide { padding: 1.75rem 1.75rem 1.9rem; }
}



/* ============================================================
   Volunteer Portal v5 — Teen Space-style subheader + site width
   ============================================================ */

body.vol-portal {
  margin: 0;
  background: #f5f7fb;
  color: #0f2744;
  min-height: 100vh;
}

/* Sticky local subheader (same interaction model as Teen Space bar) */
.vol-subheader {
  position: sticky;
  top: 0;
  /* Below .site-header (z-index: 10) so main nav/mega menu never sit under this bar */
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(0, 43, 95, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(15, 39, 68, 0.06);
}

.vol-subheader__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  min-height: 3.35rem;
}

.vol-subheader__brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-decoration: none !important;
  line-height: 1.15;
  min-width: 0;
  max-width: 8.5rem;
}
.vol-subheader__brand-kicker {
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fnd-magenta, #ed2b7b);
}
.vol-subheader__brand-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--fnd-navy, #002b5f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vol-subheader__brand:hover .vol-subheader__brand-name {
  color: var(--fnd-magenta, #ed2b7b);
}

.vol-subheader__scroller {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.vol-subheader__scroller::before,
.vol-subheader__scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.4rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.vol-subheader__scroller::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.98), transparent);
}
.vol-subheader__scroller::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.98), transparent);
}
.vol-subheader__scroller.is-overflow-left::before,
.vol-subheader__scroller.is-overflow-right::after {
  opacity: 1;
}

.vol-subheader__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.1rem 0.15rem;
}
.vol-subheader__nav::-webkit-scrollbar { display: none; }

.vol-subheader__link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  color: #3d5168 !important;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none !important;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.vol-subheader__link:hover {
  color: var(--fnd-navy, #002b5f) !important;
  background: rgba(0, 43, 95, 0.05);
  border-color: rgba(0, 43, 95, 0.12);
}
.vol-subheader__link.is-active {
  color: #fff !important;
  background: var(--fnd-navy, #002b5f);
  border-color: var(--fnd-navy, #002b5f);
  box-shadow: 0 6px 16px rgba(0, 43, 95, 0.18);
}

.vol-subheader__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vol-subheader__logout {
  margin: 0;
}
.vol-subheader__logout button {
  min-height: 44px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 43, 95, 0.14);
  background: #fff;
  color: var(--fnd-navy, #002b5f);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}
.vol-subheader__logout button:hover {
  border-color: var(--fnd-magenta, #ed2b7b);
  color: var(--fnd-magenta, #ed2b7b);
}

/* Main content — always use site .wrap width (same as rest of FND Connect) */
.vol-portal__main {
  padding: 1.15rem 0 3rem;
}
.vol-portal__main > .wrap {
  max-width: var(--max, 1120px);
}

.vol-portal__pagehead {
  margin: 0 0 1.25rem;
}
.vol-portal__crumb {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #5b6b7c;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.vol-portal__crumb a {
  color: var(--fnd-navy, #002b5f);
  text-decoration: none;
  font-weight: 650;
}
.vol-portal__crumb a:hover { color: var(--fnd-magenta, #ed2b7b); }
.vol-portal__pagehead h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.18;
  color: var(--fnd-navy, #002b5f);
  letter-spacing: -0.02em;
}
.vol-portal__lead {
  margin: 0;
  color: #5b6b7c;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 62ch;
}

/* Dashboard polish */
.vol-dash-welcome {
  margin-bottom: 1.35rem;
}
.vol-dash-welcome__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.vol-dash-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--fnd-navy, #002b5f);
}
.vol-dash-quick {
  margin: 0 0 1.75rem;
}
.vol-dash-quick__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
.vol-dash-quick__card {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 39, 68, 0.1);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px rgba(15, 39, 68, 0.04);
  min-height: 4.5rem;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.vol-dash-quick__card:hover {
  border-color: rgba(237, 43, 123, 0.35);
  box-shadow: 0 12px 28px rgba(15, 39, 68, 0.08);
  transform: translateY(-1px);
}
.vol-dash-quick__card strong {
  color: var(--fnd-navy, #002b5f);
  font-size: 1rem;
}
.vol-dash-quick__card span {
  color: #5b6b7c;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Tools grid on portal pages */
body.vol-portal .vol-modules {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
body.vol-portal .vol-module {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 39, 68, 0.1);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px rgba(15, 39, 68, 0.04);
}
body.vol-portal .vol-module:hover {
  border-color: rgba(0, 43, 95, 0.22);
  box-shadow: 0 12px 28px rgba(15, 39, 68, 0.08);
}
body.vol-portal .vol-module h3 {
  margin: 0;
  color: var(--fnd-navy, #002b5f);
  font-size: 1.08rem;
}
body.vol-portal .vol-module p {
  margin: 0;
  color: #5b6b7c;
  font-size: 0.92rem;
  line-height: 1.45;
}
body.vol-portal .vol-module__meta {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--fnd-magenta, #ed2b7b);
}
body.vol-portal .vol-module__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef3fb;
  color: var(--fnd-navy, #002b5f);
}
body.vol-portal .vol-module__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
body.vol-portal .group-nav,
body.vol-portal .outreach-nav {
  margin-bottom: 1.15rem;
}
body.vol-portal section + section {
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .vol-dash-quick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vol-subheader__brand { max-width: 11rem; }
  body.vol-portal .vol-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .vol-portal__main { padding: 1.5rem 0 3.5rem; }
  .vol-subheader__inner { gap: 1rem; }
  body.vol-portal .vol-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vol-dash-quick__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .vol-subheader__actions .vol-subheader__logout button {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

/* ── Social Share Library ─────────────────────────────────────────── */
.vol-share-intro {
  display: grid;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding: clamp(1.15rem, 3vw, 1.7rem);
  overflow: hidden;
  border: 1px solid rgba(237, 43, 123, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(237, 43, 123, 0.18), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f7f9fc 55%, #fff4f8 100%);
}
.vol-share-intro__eyebrow,
.vol-share-card__section {
  margin: 0 0 0.3rem !important;
  color: #ed2b7b !important;
  font-size: 0.72rem !important;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vol-share-intro h2 {
  max-width: 28ch;
  margin: 0 0 0.55rem;
  color: #002b5f;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.18;
}
.vol-share-intro p {
  max-width: 68ch;
  margin: 0;
  color: #3d5168;
  line-height: 1.55;
}
.vol-share-intro__priority { margin-top: 0.75rem !important; color: #002b5f !important; }
.vol-share-steps {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vol-share-steps li {
  min-height: 2.8rem;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(0, 43, 95, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f2744;
  font-size: 0.92rem;
}
.vol-share-capability {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid #ed2b7b;
  border-radius: 0 12px 12px 0;
  background: #fff;
  color: #3d5168;
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (min-width: 760px) {
  .vol-share-intro {
    grid-template-columns: minmax(0, 1.55fr) minmax(14rem, 0.65fr);
    align-items: start;
  }
}

.vol-share-filters {
  position: sticky;
  top: 4.6rem;
  z-index: 3;
  display: flex;
  gap: 0.45rem;
  margin: 0 -0.25rem 0.7rem;
  padding: 0.45rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  background: rgba(245, 247, 251, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vol-share-filter {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(0, 43, 95, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #3d5168 !important;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none !important;
}
.vol-share-filter:hover,
.vol-share-filter:focus-visible { border-color: #ed2b7b; color: #002b5f !important; }
.vol-share-filter.is-active {
  border-color: #002b5f;
  background: #002b5f;
  color: #fff !important;
}
.vol-share-count { margin: 0 0 1rem; }
.vol-share-status {
  min-height: 0;
  margin: 0 0 0.75rem;
  color: #0a6b45;
  font-size: 0.9rem;
  font-weight: 750;
}
.vol-share-status:empty { display: none; }
.vol-share-status.is-error { color: #9f1f37; }

.vol-share-grid { display: grid; gap: clamp(1rem, 3vw, 1.5rem); }
.vol-share-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(15, 39, 68, 0.11);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 39, 68, 0.07);
}
.vol-share-card.is-priority { border-color: rgba(237, 43, 123, 0.38); }
.vol-share-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #e8eef6;
}
.vol-share-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vol-share-card__cat {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.34rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 32, 72, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.vol-share-card.is-priority .vol-share-card__cat { background: rgba(218, 18, 94, 0.94); }
.vol-share-card__body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}
.vol-share-card__heading h3 {
  margin: 0;
  color: #002b5f;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  line-height: 1.2;
}
.vol-share-card__heading > p:not(.vol-share-card__section) {
  margin: 0.45rem 0 0;
  color: #5b6b7c;
  font-size: 0.94rem;
  line-height: 1.5;
}
.vol-share-primary-actions,
.vol-share-platform__actions,
.vol-share-card__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.vol-share-primary-actions .button { min-height: 2.75rem; padding: 0.55rem 0.95rem; }
.vol-share-native { background: #ed2b7b !important; border-color: #ed2b7b !important; }
.vol-share-native:disabled { cursor: wait; opacity: 0.72; }
.vol-share-dl { min-height: 2.75rem !important; font-size: 0.88rem !important; }
.vol-share-card__link { margin: 0; color: #5b6b7c; font-size: 0.88rem; }
.vol-share-card__link a { color: #002b5f; font-weight: 750; }
.vol-share-mini {
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(0, 43, 95, 0.14);
  border-radius: 999px;
  background: #f7f9fc;
  color: #002b5f;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 750;
}
.vol-share-mini.is-copied,
.vol-share-platform__actions .button.is-copied,
.vol-share-native.is-copied {
  border-color: #0a7a4b !important;
  background: #0a7a4b !important;
  color: #fff !important;
}

.vol-share-platforms { display: grid; gap: 0.45rem; margin-top: 0.1rem; }
.vol-share-platforms > h4 {
  margin: 0.2rem 0 0;
  color: #002b5f;
  font-size: 0.86rem;
  letter-spacing: 0.025em;
}
.vol-share-platform {
  overflow: hidden;
  border: 1px solid rgba(0, 43, 95, 0.1);
  border-radius: 12px;
  background: #f7f9fc;
}
.vol-share-platform > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  color: #002b5f;
  cursor: pointer;
  font-weight: 750;
  list-style: none;
  user-select: none;
}
.vol-share-platform > summary::-webkit-details-marker { display: none; }
.vol-share-platform__hint { color: #5b6b7c; font-size: 0.75rem; font-weight: 650; }
.vol-share-platform[open] > summary { border-bottom: 1px solid rgba(0, 43, 95, 0.08); background: #fff; }
.vol-share-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 9rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid rgba(0, 43, 95, 0.08);
  background: #fff;
  color: #0f2744;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}
.vol-share-platform__actions { padding: 0.7rem 0.8rem 0.8rem; background: #fff; }
.vol-share-platform__actions .button { min-height: 2.5rem; padding: 0.45rem 0.8rem; font-size: 0.84rem; }
.vol-share-guidance { margin-top: 1.5rem; }
.vol-share-tips { margin: 0; padding-left: 1.15rem; color: #3d5168; line-height: 1.58; }
.vol-share-tips li { margin: 0.45rem 0; }

@media (min-width: 900px) {
  .vol-share-card { grid-template-columns: minmax(310px, 0.9fr) minmax(0, 1.1fr); }
  .vol-share-card__media { position: sticky; top: 8.2rem; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .vol-share-filter,
  .vol-share-native { scroll-behavior: auto; transition: none !important; }
}

.vol-guide-hero {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  border: 1px solid var(--border);
}
.vol-guide-hero h2 { margin: 0.2rem 0 0.5rem; color: var(--fnd-navy); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.vol-guide-hero p { margin: 0 0 0.75rem; color: var(--muted); line-height: 1.55; max-width: 40rem; }
.vol-kicker {
  margin: 0 0 0.35rem;
  color: var(--fnd-magenta);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.vol-progress {
  height: 10px;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.75rem;
}
.vol-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #002b5f, #ed2b7b);
}
.vol-next {
  margin: 0 0 1.25rem;
  padding: 1.3rem 1.35rem;
  border-radius: 18px;
  border: 2px solid var(--fnd-magenta);
  background: #fff8fb;
}
.vol-next h2 { margin: 0.15rem 0 0.45rem; color: var(--fnd-navy); }
.vol-next p { margin: 0 0 0.9rem; color: #3d5168; line-height: 1.5; }
.vol-launch { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.65rem; }
.vol-launch__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.vol-launch__item h3 { margin: 0 0 0.2rem; font-size: 1.02rem; color: var(--fnd-navy); }
.vol-launch__item p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.vol-launch__num {
  width: 2rem; height: 2rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 800;
  background: #eef2f7;
  color: var(--fnd-navy);
}
.vol-launch__item.is-done { opacity: 0.72; }
.vol-launch__item.is-done .vol-launch__num { background: #e5f6ea; color: #1a7f37; }
.vol-launch__item.is-current { border-color: var(--fnd-magenta); box-shadow: 0 8px 20px rgba(201, 0, 90, 0.08); }
.vol-launch__item.is-current .vol-launch__num { background: var(--fnd-magenta); color: #fff; }
.vol-launch__item.is-later { background: #f7f9fc; }
.vol-launch__wait { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.vol-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 700px) {
  .vol-launch__item { grid-template-columns: auto 1fr; }
  .vol-launch__item .button,
  .vol-launch__wait { grid-column: 2; }
}

.vol-guide-hero {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  border: 1px solid var(--border);
}
.vol-guide-hero h2 { margin: 0.2rem 0 0.5rem; color: var(--fnd-navy); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.vol-guide-hero p { margin: 0 0 0.75rem; color: var(--muted); line-height: 1.55; max-width: 40rem; }
.vol-kicker {
  margin: 0 0 0.35rem;
  color: var(--fnd-magenta);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.vol-progress {
  height: 10px;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.75rem;
}
.vol-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #002b5f, #ed2b7b);
}
.vol-next {
  margin: 0 0 1.25rem;
  padding: 1.3rem 1.35rem;
  border-radius: 18px;
  border: 2px solid var(--fnd-magenta);
  background: #fff8fb;
}
.vol-next h2 { margin: 0.15rem 0 0.45rem; color: var(--fnd-navy); }
.vol-next p { margin: 0 0 0.9rem; color: #3d5168; line-height: 1.5; }
.vol-launch { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.65rem; }
.vol-launch__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.vol-launch__item h3 { margin: 0 0 0.2rem; font-size: 1.02rem; color: var(--fnd-navy); }
.vol-launch__item p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.vol-launch__num {
  width: 2rem; height: 2rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 800;
  background: #eef2f7;
  color: var(--fnd-navy);
}
.vol-launch__item.is-done { opacity: 0.72; }
.vol-launch__item.is-done .vol-launch__num { background: #e5f6ea; color: #1a7f37; }
.vol-launch__item.is-current { border-color: var(--fnd-magenta); box-shadow: 0 8px 20px rgba(201, 0, 90, 0.08); }
.vol-launch__item.is-current .vol-launch__num { background: var(--fnd-magenta); color: #fff; }
.vol-launch__item.is-later { background: #f7f9fc; }
.vol-launch__wait { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.vol-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 700px) {
  .vol-launch__item { grid-template-columns: auto 1fr; }
  .vol-launch__item .button,
  .vol-launch__wait { grid-column: 2; }
}

.vol-guide-hero {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  border: 1px solid var(--border);
}
.vol-guide-hero h2 { margin: 0.2rem 0 0.5rem; color: var(--fnd-navy); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.vol-guide-hero p { margin: 0 0 0.75rem; color: var(--muted); line-height: 1.55; max-width: 40rem; }
.vol-kicker {
  margin: 0 0 0.35rem;
  color: var(--fnd-magenta);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.vol-progress {
  height: 10px;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.75rem;
}
.vol-progress span { display: block; height: 100%; background: linear-gradient(90deg, #002b5f, #ed2b7b); }
.vol-next {
  margin: 0 0 1.25rem;
  padding: 1.3rem 1.35rem;
  border-radius: 18px;
  border: 2px solid var(--fnd-magenta);
  background: #fff8fb;
}
.vol-next h2 { margin: 0.15rem 0 0.45rem; color: var(--fnd-navy); }
.vol-next p { margin: 0 0 0.9rem; color: #3d5168; line-height: 1.5; }
.vol-launch { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.65rem; }
.vol-launch__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.vol-launch__item h3 { margin: 0 0 0.2rem; font-size: 1.02rem; color: var(--fnd-navy); }
.vol-launch__item p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.vol-launch__num {
  width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 800;
  background: #eef2f7; color: var(--fnd-navy);
}
.vol-launch__item.is-done { opacity: 0.72; }
.vol-launch__item.is-done .vol-launch__num { background: #e5f6ea; color: #1a7f37; }
.vol-launch__item.is-current { border-color: var(--fnd-magenta); box-shadow: 0 8px 20px rgba(201, 0, 90, 0.08); }
.vol-launch__item.is-current .vol-launch__num { background: var(--fnd-magenta); color: #fff; }
.vol-launch__item.is-later { background: #f7f9fc; }
.vol-launch__wait { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.vol-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 700px) {
  .vol-launch__item { grid-template-columns: auto 1fr; }
  .vol-launch__item .button,
  .vol-launch__wait { grid-column: 2; }
}

.vol-format {
  margin: 0 0 1.25rem;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}
.vol-format h2 { margin: 0.15rem 0 0.55rem; color: var(--fnd-navy); font-size: 1.25rem; }
.vol-format > p { margin: 0 0 1rem; color: #3d5168; line-height: 1.55; max-width: 44rem; }
.vol-format__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.9rem;
}
.vol-format__grid article {
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: #f7f9fc;
}
.vol-format__grid h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--fnd-navy); }
.vol-format__grid ul,
.vol-format__grid ol { margin: 0; padding-left: 1.15rem; color: #3d5168; }
.vol-format__grid li { margin: 0.35rem 0; line-height: 1.45; }
.vol-format--compact { padding: 0.9rem 1rem; }

/* ============================================================
   Support group proposal — focused one-question flow
   ============================================================ */
body.vol-propose-page .topbar,
body.vol-propose-page .site-header,
body.vol-propose-page .site-footer,
body.vol-propose-page .one-pound-campaign { display: none; }
body.vol-propose-page .vol-subheader__scroller { display: none; }
body.vol-propose-page .vol-subheader .wrap,
body.vol-propose-page .vol-subheader__inner { max-width: 40rem; }
body.vol-propose-page .vol-subheader__brand { max-width: none; }
body.vol-propose-page .vol-portal__crumb { display: none; }
body.vol-propose-page .vol-portal__main { padding: 0.9rem 0 2.5rem; }
body.vol-propose-page .vol-portal__main > .wrap { max-width: 40rem; }
body.vol-propose-page .vol-portal__pagehead {
  margin: 0 0 0.85rem;
  scroll-margin-top: 4.6rem;
}
body.vol-propose-page .vol-proposal__track { scroll-margin-top: 4.6rem; }
body.vol-propose-page .vol-portal__pagehead h1 {
  max-width: none;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
body.vol-propose-page .vol-portal__lead {
  max-width: 36rem;
  color: #3d5168;
  font-size: 0.98rem;
  line-height: 1.5;
}

.vol-guide { max-width: none; }

.vol-guide--propose :where(a, button, input, select, textarea, summary, [tabindex]):focus,
.vol-guide--propose :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fnd-navy) !important;
  outline-offset: 2px !important;
}
.vol-choice input:focus,
.vol-choice input:focus-visible { outline: none !important; }

.vol-proposal .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.vol-proposal__track {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
}
.vol-proposal__promise {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: #eef4fb;
  color: var(--fnd-navy);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}
.vol-proposal__status {
  margin: 0;
  color: #3d5168;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.vol-proposal__progress {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vol-proposal__progress li {
  flex: 1 1 0;
  height: 6px;
  border-radius: 99px;
  background: #d9e3ee;
}
.vol-proposal__progress li.is-current { background: var(--fnd-navy); }
.vol-proposal__progress li.is-done { background: #1a7f37; }

.vol-proposal__step {
  padding: 1.2rem 1.1rem 1.25rem;
  border: 1px solid rgba(15, 39, 68, 0.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04), 0 10px 28px rgba(15, 39, 68, 0.05);
}
.vol-proposal.is-enhanced .vol-proposal__step { display: none; }
.vol-proposal.is-enhanced .vol-proposal__step.is-active { display: block; }
.vol-proposal__step > .vol-kicker { display: none; }
.vol-proposal__step h2 {
  margin: 0 0 0.45rem;
  color: var(--fnd-navy);
  font-size: clamp(1.28rem, 4.6vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.vol-proposal__step h3 {
  margin: 0 0 0.5rem;
  color: var(--fnd-navy);
  font-size: 1rem;
}
.vol-proposal__step > .vol-hint {
  margin: 0 0 1.15rem;
  color: #3d5168;
  font-size: 1rem;
  line-height: 1.55;
}
.vol-proposal__coach {
  margin: 0 0 0.75rem;
  color: var(--fnd-navy);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}
.vol-proposal__coach + .vol-hint { margin-top: -0.15rem; }
.vol-field-hint {
  display: block;
  margin: 0.35rem 0 0;
  color: #5b6b7c;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
}
.vol-proposal__preview,
.vol-proposal__next {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #f4f7fb;
}
.vol-proposal__preview-title {
  margin: 0 0 0.55rem;
  color: var(--fnd-navy);
  font-size: 0.95rem;
  font-weight: 800;
}
.vol-proposal__preview ol,
.vol-proposal__next ol {
  margin: 0;
  padding-left: 1.15rem;
  color: #3d5168;
}
.vol-proposal__preview li,
.vol-proposal__next li {
  margin: 0.3rem 0;
  line-height: 1.4;
}
.vol-proposal__preview li strong { color: var(--fnd-navy); }
.vol-proposal__preview li span {
  display: inline-block;
  margin-left: 0.35rem;
  color: #5b6b7c;
}

.vol-rhythm {
  display: grid;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0.05rem 0 0.1rem;
  list-style: none;
}
.vol-rhythm li {
  position: relative;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.12rem 0 0.72rem;
  background: transparent;
  border-radius: 0;
}
.vol-rhythm li:last-child { padding-bottom: 0.1rem; }
.vol-rhythm li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1.85rem;
  bottom: 0;
  width: 2px;
  background: #d5dee8;
}
.vol-rhythm__n {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 999px;
  background: var(--fnd-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.vol-rhythm strong { color: var(--fnd-navy); font-size: 1rem; }
.vol-rhythm__time {
  color: #5b6b7c;
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

.vol-guide--propose details.vol-guide__more {
  margin: 0.85rem 0 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.vol-guide--propose .vol-guide__more > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  color: var(--fnd-navy);
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.vol-guide--propose .vol-guide__more > summary::-webkit-details-marker { display: none; }
.vol-guide--propose .vol-guide__more > summary::after {
  content: "" !important;
  position: static;
  top: auto;
  right: auto;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15rem;
  color: var(--fnd-navy);
  font-size: 0;
}
.vol-guide--propose .vol-guide__more[open] > summary::after {
  content: "" !important;
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}
.vol-guide__more .vol-format {
  margin: 0.35rem 0 0.15rem;
  padding: 0;
  border: 0;
  background: none;
}
.vol-guide__more .vol-format > .vol-kicker,
.vol-guide__more .vol-format h2 { display: none; }
.vol-guide__more .vol-format > p { margin: 0 0 0.75rem; color: #3d5168; }
.vol-guide__more .vol-format__grid { display: grid; gap: 0.75rem; }
.vol-guide__more .vol-format__grid article {
  padding: 0;
  background: none;
}
.vol-guide__more .vol-format__grid h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.vol-guide__more .vol-format__grid ul,
.vol-guide__more .vol-format__grid ol { margin: 0; padding-left: 1.1rem; color: #3d5168; }
.vol-guide__more .vol-format__grid li { margin: 0.2rem 0; font-size: 0.9rem; }

.vol-proposal .vol-form__row { gap: 0.85rem; margin: 0 0 0.15rem; }
.vol-proposal .vol-form label { margin-bottom: 0.9rem; }
.vol-proposal .vol-form input[type="text"],
.vol-proposal .vol-form input[type="email"],
.vol-proposal .vol-form input[type="file"],
.vol-proposal .vol-form input[type="time"],
.vol-proposal .vol-form select,
.vol-proposal .vol-form textarea {
  min-height: 48px;
  padding: 0.8rem 0.9rem;
  border-color: #cdd7e4;
}
.vol-proposal .vol-form textarea { min-height: 5.25rem; }
.vol-proposal .vol-form input[type="file"] {
  padding: 0.55rem 0.7rem;
  background: #f8fafc;
  font-size: 0.9rem;
  color: #3d5168;
}
.vol-proposal .vol-form input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  border: 1px solid #cdd7e4 !important;
  border-radius: 999px;
  background: #fff;
  color: var(--fnd-navy) !important;
  font-weight: 750;
}
.vol-proposal .vol-form label.is-invalid input,
.vol-proposal .vol-form label.is-invalid select,
.vol-proposal .vol-form label.is-invalid textarea {
  border-color: #a30d2d;
  background: #fff8f9;
}
.vol-proposal .vol-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1.1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d8e1ec;
  border-radius: 14px;
  background: #f7f9fc;
  line-height: 1.45;
  font-weight: 600;
  color: var(--fnd-navy);
}
.vol-proposal .vol-check.is-invalid { border-color: #a30d2d; background: #fff5f7; }
.vol-proposal .vol-check input[type="checkbox"] {
  width: 1.2rem !important;
  height: 1.2rem !important;
  min-height: 1.2rem !important;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  border-color: var(--fnd-navy);
  accent-color: var(--fnd-navy);
}
.vol-proposal .vol-check input[type="checkbox"]::before {
  background: var(--fnd-navy);
}

.vol-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}
.vol-choice-grid[data-cadence-path] {
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.vol-choice-grid[data-cadence-path] .vol-choice {
  padding: 0.8rem 0.75rem;
}
.vol-choice-grid[data-cadence-path] .vol-choice strong { font-size: 0.95rem; }
.vol-choice-grid[data-cadence-path] .vol-choice__copy > span { font-size: 0.8rem; }
.vol-choice-grid.is-invalid .vol-choice { border-color: #a30d2d; }
.vol-form label.vol-choice,
.vol-choice {
  display: flex !important;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1.5px solid #cdd7e4;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}
.vol-choice::before {
  content: "";
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
  max-width: 1.2rem;
  max-height: 1.2rem;
  margin-top: 0.2rem;
  box-sizing: border-box;
  border: 2px solid #8a97a8;
  border-radius: 50%;
  background: #fff;
}
.vol-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.vol-choice__copy { display: grid; gap: 0.2rem; min-width: 0; }
.vol-choice strong { color: var(--fnd-navy); font-size: 1.05rem; }
.vol-choice__copy > span {
  display: block;
  color: #3d5168;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
}
.vol-choice:has(input:checked),
.vol-choice.is-selected {
  border-color: var(--fnd-navy);
  background: #f3f7fb;
}
.vol-choice:has(input:checked)::before,
.vol-choice.is-selected::before {
  border-color: var(--fnd-navy);
  background: var(--fnd-navy);
  box-shadow: inset 0 0 0 3px #fff;
}
.vol-choice:has(input:focus-visible) {
  outline: 2px solid var(--fnd-navy);
  outline-offset: 2px;
}

.vol-proposal__follow { margin: 0 0 0.15rem; }
.vol-proposal__branch { margin: 0; padding: 0; background: none; }
.vol-proposal__branch > .vol-hint { margin: 0 0 0.75rem; }
.vol-proposal [hidden] { display: none !important; }

.vol-proposal__nav {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  margin-top: 0.2rem;
}
.vol-proposal__nav .button,
.vol-proposal__nav .button.secondary {
  width: 100%;
  min-height: 50px;
}

.vol-guide--launch .vol-guide-hero {
  margin: 0 0 1.15rem;
  padding: 0;
  border: 0;
  background: none;
}
.vol-guide--launch .vol-steps {
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 0 1.15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.vol-guide--launch .vol-steps li {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 0.8rem;
}
.vol-guide--launch .vol-steps li.is-current { background: var(--fnd-navy); color: #fff; }
.vol-guide--launch .vol-steps li.is-done { background: #e5f6ea; color: #1a7f37; }
.vol-guide--launch .vol-next {
  margin: 0 0 1rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid #d8e1ec;
  border-radius: 16px;
  background: #fff;
}
.vol-guide--launch .vol-launch__item {
  grid-template-columns: auto 1fr;
}

@media (min-width: 720px) {
  .vol-choice-grid { grid-template-columns: 1fr 1fr; }
  .vol-choice-grid[data-cadence-path] { grid-template-columns: 1fr 1fr; }
  .vol-proposal__step { padding: 1.5rem 1.55rem 1.55rem; }
  .vol-proposal__nav {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.7rem;
  }
  .vol-proposal__nav .button,
  .vol-proposal__nav .button.secondary {
    width: auto;
    min-width: 10.5rem;
  }
  .vol-proposal__nav .button.secondary { margin-right: auto; }
  .vol-guide--launch .vol-launch__item { grid-template-columns: auto 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vol-choice { transition: none; }
}

.team-fundraiser-page .fr-campaign-hero h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 6.5vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.team-fundraiser-page .fr-hero-donate {
  background: #c9005a !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(201, 0, 90, 0.35);
}
.team-fundraiser-page .team-fr-hint {
  max-width: 42rem;
  margin: 0.95rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.5;
}
.team-fundraiser-page .section h2 {
  color: #002b5f;
}
.team-fundraiser-page .fr-story {
  color: #33475c;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Profile ring generator — reuses Champion editor chrome inside the portal */
body.vol-portal img.champions-ring-editor__photo,
.champions-ring-editor__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill;
  pointer-events: none;
}

.vol-ring-picker {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin: 0 0 1.15rem;
  padding: 0;
  border: 0;
}

.vol-ring-picker legend {
  margin: 0 0 0.65rem;
  color: var(--fnd-navy);
  font-weight: 800;
}

.vol-ring-picker__option {
  display: block;
  margin: 0;
  cursor: pointer;
}

.vol-ring-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.vol-ring-picker__card {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  border: 2px solid rgba(0, 43, 95, 0.16);
  border-radius: 16px;
  background: #fff;
  min-height: 44px;
}

.vol-ring-picker__card img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  justify-self: start;
}

.vol-ring-picker__card strong {
  color: var(--fnd-navy);
}

.vol-ring-picker__card small {
  color: var(--muted);
  line-height: 1.45;
}

.vol-ring-picker__option input:checked + .vol-ring-picker__card {
  border-color: var(--fnd-navy);
  box-shadow: 0 0 0 3px rgba(0, 43, 95, 0.15);
}

.vol-ring-picker__option input:focus-visible + .vol-ring-picker__card {
  outline: 3px solid var(--fnd-navy);
  outline-offset: 3px;
}

.vol-ring-next {
  margin-top: 1.25rem;
}

.vol-ring-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 640px) {
  .vol-ring-picker {
    grid-template-columns: 1fr 1fr;
  }
}