.mcf-p2p {
  padding: clamp(2rem, 6vw, 5.5rem) 0;
  color: var(--wp--preset--color--ink, #20383c);
}

.mcf-p2p__inner {
  width: min(44rem, calc(100% - 2.5rem));
  margin-inline: auto;
}

.mcf-p2p-eyebrow {
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 750;
  color: var(--wp--preset--color--turquoise, #087b86);
}

.mcf-p2p h1,
.mcf-p2p h2 {
  color: var(--wp--preset--color--deep-teal, #123f46);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

.mcf-p2p-headline {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.mcf-p2p-hero {
  display: grid;
  gap: 1.5rem;
}

.mcf-p2p-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.25rem;
  display: block;
}

/*
 * Campaign-led hero. A visitor arriving from a shared link is being asked to
 * fund a project, not to read a profile, so the project is the H1 and the
 * fundraiser is credited in a byline directly under it — the pattern the
 * large peer-to-peer platforms settled on. The name comes back at full
 * weight where it does the work: the story heading and the Donate button.
 */
.mcf-p2p-hero--campaign-led {
  display: block;
}

.mcf-p2p-hero--campaign-led h1 {
  margin: 0.35rem 0 0;
}

.mcf-p2p-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
  font-size: 1.02rem;
  color: var(--wp--preset--color--ink, #20383c);
}

.mcf-p2p-byline__name {
  font-weight: 700;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-avatar {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.mcf-p2p-hero--campaign-led .mcf-p2p-headline {
  margin: 0.9rem 0 0;
}

.mcf-p2p-bar {
  height: 0.85rem;
  border-radius: 999px;
  background: var(--wp--preset--color--sky, #e7f6f7);
  overflow: hidden;
}

.mcf-p2p-bar span {
  display: block;
  height: 100%;
  background: var(--wp--preset--color--orange, #c95017);
}

.mcf-p2p-as-of,
.mcf-p2p-privacy,
.mcf-p2p-progress-label {
  color: #496267;
  font-size: 0.95rem;
}

.mcf-p2p-trust-note {
  margin-top: 1rem;
  color: #496267;
  font-size: 0.95rem;
}

.mcf-p2p-preview-bar {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.75rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-preview-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/*
 * Publish and Keep editing are one decision, so they get one shape. Inheriting
 * the page font was not enough to match them: a button and a link resolve their
 * own line boxes, so the heights still drifted. Fixing the height and zeroing
 * the vertical padding takes text metrics out of it entirely, and the shared
 * minimum width stops the shorter label from reading as the lesser option.
 */
.mcf-p2p-preview-bar__actions .mcf-p2p-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 3rem;
  min-width: 11rem;
  padding-block: 0;
}

.mcf-p2p-preview-bar__actions form {
  margin: 0;
}

.mcf-p2p-give--preview {
  opacity: 0.75;
}

.mcf-p2p-preview-notice {
  margin: 0 0 0.85rem;
  padding: 0 0 0 0.75rem;
  border-left: 4px solid #b4531f;
  font-weight: 650;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-publish {
  margin-bottom: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.75rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-publish form p {
  margin: 0.75rem 0 0;
}

.mcf-p2p-give fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.mcf-p2p-give__amounts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mcf-p2p-give__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
}

/* The pill is the control. The native radio stays in the DOM for keyboard and
   screen-reader users, but is not painted next to the amount. */
.mcf-p2p-give__amount input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mcf-p2p-give__amount:focus-within {
  outline: 3px solid #087b86;
  outline-offset: 2px;
}

.mcf-p2p-give__amount:has(input:checked) {
  border-color: #087b86;
  background: var(--wp--preset--color--cream, #f7f3ea);
  font-weight: 650;
}

.mcf-p2p-give__other[hidden] {
  display: none;
}

.mcf-p2p-give__other {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  max-width: 16rem;
}

.mcf-p2p-give__other input {
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.6rem;
}

.mcf-p2p-board-optin {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.75rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-board-optin legend {
  padding: 0 0.35rem;
  font-weight: 650;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-board-optin label {
  display: block;
  margin-bottom: 0.35rem;
}

.mcf-p2p-view-page {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.mcf-p2p-view-page .mcf-p2p-button {
  justify-self: start;
}

.mcf-p2p-field-help {
  color: #143a40;
  font-size: 1rem;
}

.mcf-p2p-thanks,
.mcf-p2p-welcome {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--wp--preset--color--turquoise, #087b86);
  background: var(--wp--preset--color--sky, #e7f6f7);
}

.mcf-p2p-cards {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.mcf-p2p-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(20, 58, 64, .1);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-card img {
  width: 100%;
  border-radius: 0.85rem;
}

.mcf-p2p-form p {
  display: grid;
  gap: 0.4rem;
}

.mcf-p2p-form input[type="text"],
.mcf-p2p-form input[type="email"],
.mcf-p2p-form input[type="tel"],
.mcf-p2p-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(18, 63, 70, .28);
  border-radius: 0.6rem;
  font: inherit;
}

.mcf-p2p-form textarea {
  min-height: 8rem;
}

.mcf-p2p-form input:focus-visible,
.mcf-p2p-form textarea:focus-visible,
.mcf-p2p-button:focus-visible {
  outline: 3px solid #087b86;
  outline-offset: 3px;
}

.mcf-p2p-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.35rem;
  font: inherit;
  line-height: 1.2;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--orange, #c95017);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

a.mcf-p2p-button,
a.mcf-p2p-button:visited {
  color: #fff;
}

/*
 * Inert until an amount is chosen. Dimming alone would leave a button that
 * still looks pressable, so the cursor changes too and a line underneath says
 * what is missing.
 */
.mcf-p2p-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mcf-p2p-amount-error {
  color: #96351a;
  font-size: 0.95rem;
}

.mcf-p2p-amount-error[hidden] {
  display: none;
}

.mcf-p2p-donate-primary {
  font-size: 1.125rem;
  min-height: 52px;
  padding: 0.95rem 1.75rem;
  box-shadow: 0 4px 14px rgba(201, 80, 23, .32);
}

.mcf-p2p-story {
  margin-top: 2rem;
  font-size: 1.08rem;
}

.mcf-p2p-campaign-case {
  margin: 2rem 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(18, 63, 70, .14);
  border-radius: 1.25rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-campaign-case h2.mcf-p2p-eyebrow,
.mcf-p2p-story h2.mcf-p2p-eyebrow {
  margin: 0 0 0.75rem;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquoise, #087b86);
}

.mcf-p2p-campaign-case__summary > :first-child,
.mcf-p2p-campaign-case__trust > :first-child {
  margin-top: 0;
}

.mcf-p2p-campaign-case__summary > :last-child,
.mcf-p2p-campaign-case__trust > :last-child {
  margin-bottom: 0;
}

.mcf-p2p-campaign-case__impact {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--wp--preset--color--orange, #c95017);
  background: #fff;
}

.mcf-p2p-campaign-case__urgency {
  margin: 1rem 0 0;
  font-weight: 700;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-campaign-case__rendering {
  margin: 1.5rem 0 0;
}

@media (min-width: 800px) {
  .mcf-p2p-campaign-case:has(.mcf-p2p-campaign-case__rendering) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    gap: 1.5rem;
    align-items: start;
  }

  .mcf-p2p-campaign-case__rendering {
    margin: 0;
  }
}

.mcf-p2p-campaign-case__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
}

.mcf-p2p-campaign-case__rendering figcaption {
  margin-top: 0.5rem;
  color: #496267;
  font-size: 0.85rem;
}

.mcf-p2p-connection {
  margin-bottom: 2.25rem;
}

.mcf-p2p-campaign-case__trust {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(18, 63, 70, .14);
}

.mcf-p2p-give__head {
  margin-bottom: 1rem;
}

/*
 * The prompt and the Stripe handoff share one line: the note answers "what
 * happens when I press this" at the moment the donor starts choosing, rather
 * than sitting between the amounts and the button. It wraps under the prompt
 * when there is no room for both.
 */
.mcf-p2p-give__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
  margin-bottom: 0.6rem;
}

.mcf-p2p-give__prompt {
  font-weight: 650;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-give__checkout {
  /*
   * The minimum width is the point: rather than shrink into a narrow column and
   * break mid-sentence next to the prompt, the note wraps onto its own line,
   * where the full column fits it in one.
   */
  flex: 0 1 auto;
  min-width: min(100%, 26rem);
  text-align: right;
  color: #496267;
  font-size: 0.85rem;
}

@media (max-width: 40rem) {
  .mcf-p2p-give__checkout {
    text-align: left;
  }
}

.mcf-p2p-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mcf-p2p-progress {
  margin: 1.5rem 0;
}

header li.mcf-p2p-header-donate--hidden {
  display: none !important;
}

.mcf-p2p-button--secondary {
  background: transparent;
  color: var(--wp--preset--color--deep-teal, #123f46);
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--deep-teal, #123f46);
}

a.mcf-p2p-button--secondary,
a.mcf-p2p-button--secondary:visited,
button.mcf-p2p-button--secondary {
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-p2p-button--secondary:focus-visible {
  outline: 3px solid #087b86;
  outline-offset: 3px;
}

.mcf-p2p-outreach {
  margin: 1.75rem 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(18, 63, 70, .14);
  border-radius: 1rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-outreach h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}

.mcf-p2p-outreach__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Before a gift the ask is Donate, so sharing steps back to a plain block with
   small controls. After a gift it is the main thing left to do, so it keeps the
   card and the filled buttons. */
.mcf-p2p-outreach--quiet {
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border: 0;
  border-top: 1px solid rgba(18, 63, 70, .14);
  border-radius: 0;
  background: none;
}

.mcf-p2p-outreach--quiet h2 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
}

.mcf-p2p-outreach--quiet p {
  font-size: 0.95rem;
  color: #496267;
}

.mcf-p2p-outreach--quiet .mcf-p2p-outreach__actions {
  margin-top: 0.75rem;
}

.mcf-p2p-button--small {
  min-height: 38px;
  padding: 0.45rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.mcf-p2p-outreach__status:empty {
  display: none;
}

.mcf-p2p-outreach__status:not(:empty) {
  margin: 0.85rem 0 0;
  font-weight: 650;
  color: var(--wp--preset--color--turquoise, #087b86);
}

.mcf-p2p-errors {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--wp--preset--color--orange, #c95017);
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Two columns only when the fundraiser has a photo. Without one the whole
 * content block — name, headline, and Donate button — would be
 * trapped in the 16rem photo column with the rest of the row left empty.
 * Every fundraiser is photoless until they edit their page, so this is the
 * common case, not an edge case.
 */
@media (min-width: 800px) {
  .mcf-p2p-hero:has(.mcf-p2p-photo) {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcf-p2p-bar span {
    transition: none;
  }
}

/*
 * Open signup. The archive ends with an invitation to start a page, so the
 * block gets the same cream panel treatment as the outreach box rather than
 * reading as a stray footnote.
 */
.mcf-p2p-start {
  margin: 2rem 0 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(18, 63, 70, .14);
  border-radius: 1rem;
  background: var(--wp--preset--color--cream, #f7f3ea);
}

.mcf-p2p-start p {
  margin: 0 0 0.75rem;
}

.mcf-p2p-start p:last-child {
  margin-bottom: 0;
}

.mcf-p2p-start-note {
  font-weight: 600;
}

.mcf-p2p-start-help {
  font-size: 0.95rem;
}

.mcf-p2p-apply-intro {
  max-width: 42rem;
}

.mcf-p2p-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}