/* =================================================================
   Pickleheart — Capital Campaign page
   -----------------------------------------------------------------
   Page-specific layout only. Buttons, cards, tags, inputs, progress
   bars, type roles and the token palette all come from
   pickleheart-components.css / pickleheart-tokens.css — if you need
   one of those here, reuse the `pkl-` class instead of restyling it.

   Everything is scoped under `.cc` so the Bricks header and footer
   are untouched.
   ================================================================= */

/* -----------------------------------------------------------------
   SHELL — content column + sticky pledge rail
   -----------------------------------------------------------------
   One markup tree serves both designs. Above 1180px the rail is a
   second grid column that sticks alongside the copy; below it the
   shell collapses to one column and `display: contents` on the main
   column promotes each section to a grid item, so `order` can lift
   the pledge box up to sit directly under the hero — matching the
   mobile design without duplicating the box in the DOM.
   ----------------------------------------------------------------- */
.cc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-16);
  align-items: start;
  padding-bottom: 88px;
}
.cc-main { min-width: 0; }

.cc-rail { align-self: stretch; padding-top: var(--space-16); }
.cc-rail__sticky {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  /* The pledge box is taller than a short laptop viewport. Pinned to the
     top it would hang past the fold, and because it is pinned there is
     no way to scroll down to its foot — the Pledge Now button and the
     terms summary become unreachable at those heights. Capping the
     height lets the box scroll on its own when it has to. On a tall
     screen the cap is never reached and nothing changes. */
  max-height: calc(100vh - var(--space-6) * 2);
  overflow-y: auto;

  /* overflow clips at the border box, which would shave the card's
     shadow. The padding gives it room; the negative margin keeps the
     rail sitting where it did. */
  padding: 4px;
  margin: -4px;
}

@media (max-width: 1180px) {
  .cc-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .cc-main { display: contents; }
  .cc-hero { order: 1; }
  .cc-rail { order: 2; }
  .cc-section { order: 3; }

  .cc-rail {
    padding-top: var(--space-8);
    max-width: 520px;
  }
  .cc-rail__sticky { position: static; }
}

/* -----------------------------------------------------------------
   SUB-HEADER
   -----------------------------------------------------------------
   Deliberately the same component as the community landing pages'
   `.community-public-subheader` (communities-public-style.css): a
   full-width cream band directly under the site's own header, the
   same 73px height, logo + name on the left, links on the right. The
   values below are kept in step with that file on purpose — this is
   the site's established sub-header, not a second one invented for
   this page. The only addition is the campaign's Contribute button,
   which sits at the far right of the band.
   ----------------------------------------------------------------- */
.cc-subheader {
  width: 100%;
  background: #FAF3EB;
}
.cc-subheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 1320px;
  /* Matches #brx-header, whose height is content-driven (logo + nav row)
     and currently renders at 73px on desktop — the same hardcoded number
     the community sub-header uses, for the same reason. */
  height: 73px;
  margin: 0 auto;
  padding: 0 40px;
}
.cc-subheader__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.cc-subheader__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-neutral-strong);
  white-space: nowrap;
}
.cc-subheader__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.cc-subheader__nav a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-neutral-strong);
  white-space: nowrap;
}
.cc-subheader__nav a:hover { color: var(--text-brand-strong); }

.cc-subheader__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--foreground-primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-button);
  box-shadow: var(--elevation-2);
  padding: 10px 22px;
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  transition: transform 130ms ease, filter 130ms ease;
}
.cc-subheader__cta:hover { color: var(--text-on-primary); filter: brightness(1.1); }
.cc-subheader__cta:active { transform: translateY(1px); filter: brightness(0.94); }

/* Same step-down the community sub-header takes, plus a wrap for the
   longer link set this page carries. */
@media (max-width: 900px) {
  .cc-subheader__inner { padding: 0 24px; gap: var(--space-4); }
  .cc-subheader__nav { gap: var(--space-5); }
}
/* Two rows on phones rather than three: the name keeps the header's own
   row with the Contribute button opposite it, and the jump links wrap
   underneath at full width. */
@media (max-width: 700px) {
  .cc-subheader__inner {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) 20px;
  }
  .cc-subheader__name { font-size: 13.5px; }
  /* One row on phones: the jump links are dropped rather than wrapped —
     the sections they point at are only a scroll away, and the repeated
     contribute cards down the page carry the CTA. The campaign name and
     the button stay. */
  .cc-subheader__nav { display: none; }
  .cc-subheader__cta { margin-left: auto; padding: 9px 18px; font-size: 14px; }
}

/* -----------------------------------------------------------------
   SECTION RHYTHM
   ----------------------------------------------------------------- */
/* Breathing room when a sub-header link jumps to a section. */
.cc [id] { scroll-margin-top: var(--space-6); }

.cc-section { padding-top: 72px; }
.cc-section--last { padding-bottom: var(--space-6); }
.cc-section__lead { margin-top: 14px; }
.cc-section__heading { margin-bottom: 26px; }
.cc-card__title { margin-bottom: 10px; }
.cc-panel__lead { margin: var(--space-3) 0 30px; }
.cc-undone .pkl-card { padding: 26px; }

/* The terms intro is full-strength ink, not muted secondary copy. */
.cc-terms__intro { color: var(--text-neutral-strong); margin-top: var(--space-5); }

/* A heading the comp sets a step below the section h3 size. */
.cc-patient__title { font-size: 22px; }
@media (max-width: 760px) {
  .cc-patient__title { font-size: 19px; }
}

@media (max-width: 900px) {
  .cc-section { padding-top: var(--space-10); }
  .cc-shell { padding-bottom: var(--space-12); }
}

/* -----------------------------------------------------------------
   REPEATED CONTRIBUTE CARD
   -----------------------------------------------------------------
   The mobile comp restates the ask four times down the page. On desktop
   the pledge rail is sticky and always on screen, so a second, third
   and fourth copy would be pure noise — these only exist below the
   breakpoint where the rail stops following the reader.

   Hidden by default and revealed at the small-screen breakpoint (rather
   than the reverse) so a browser that never matches the query shows the
   desktop layout the rail was designed for.
   ----------------------------------------------------------------- */
.cc-cta-repeat { display: none; }
.cc-cta-repeat__heading { margin-bottom: var(--space-3); }
.cc-cta-card { padding: var(--space-6) 22px; }
.cc-cta-card .pkl-heart-meter__hearts { background: var(--background-neutral); }

@media (max-width: 1180px) {
  .cc-cta-repeat { display: block; }
}

/* -----------------------------------------------------------------
   HERO
   ----------------------------------------------------------------- */
.cc-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-3);
  overflow: hidden;
}
.cc-hero__wash {
  position: absolute;
  top: -40px;
  left: -160px;
  width: 1000px;
  max-width: none;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 32%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 72%);
}
.cc-hero__inner { position: relative; z-index: 1; }
.cc-hero__title { margin: 22px 0 26px; }
.cc-hero__lead { max-width: 62ch; margin-bottom: var(--space-8); }
.cc-hero__photo {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-top: 44px;
}

/* The video shares the photo's box exactly, so swapping one for the
   other never moves the page around. object-fit keeps letterboxing off
   a clip whose aspect ratio is not the box's. */
.cc-hero__video { background: #000; }

/* Facade for an embedded player: the poster with a play button over it.
   The wrapper is the positioning context and carries the photo's own
   top margin, so the image inside can drop it. */
.cc-hero__media {
  position: relative;
  margin-top: 44px;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
}
.cc-hero__media .cc-hero__photo {
  margin-top: 0;
  border-radius: 0;
  display: block;
}

.cc-hero__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease;
}
.cc-hero__media:hover .cc-hero__play,
.cc-hero__play:focus-visible { background: rgba(0, 0, 0, 0.32); }

/* The button itself is the whole poster, for an easy target; this is
   the disc the visitor actually aims at. */
.cc-hero__play-mark {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--elevation-2);
  transition: transform 200ms ease;
  position: relative;
}
.cc-hero__play-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 25px;
  /* The play triangle, drawn rather than shipped as an asset. */
  border-color: transparent transparent transparent var(--foreground-primary);
}
.cc-hero__media:hover .cc-hero__play-mark { transform: scale(1.06); }

/* Once the player is in, it fills the same box at 16:9. */
.cc-hero__frame {
  margin-top: 44px;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
}
.cc-hero__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero__play,
  .cc-hero__play-mark { transition: none; }
  .cc-hero__media:hover .cc-hero__play-mark { transform: none; }
}

@media (max-width: 900px) {
  .cc-hero { padding-top: var(--space-8); }
  .cc-hero__wash { top: -60px; left: -140px; width: 620px; }
  .cc-hero__title { margin: var(--space-4) 0 var(--space-5); }
  .cc-hero__photo { height: 260px; margin-top: var(--space-6); border-radius: 24px; }
  .cc-hero__media,
  .cc-hero__frame { margin-top: var(--space-6); border-radius: 24px; }
  .cc-hero__media .cc-hero__photo { border-radius: 0; }
  .cc-hero__play-mark { width: 62px; height: 62px; }
  .cc-hero__play-mark::after { border-width: 11px 0 11px 18px; }
}

/* -----------------------------------------------------------------
   WHAT WE'VE BUILT — alternating photo/text rows
   ----------------------------------------------------------------- */
.cc-built {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
/* The heading's gap to the copy belongs to .cc-built__head, which wraps
   it — a margin on the heading itself would be added on top of that, and
   (because flex centres the MARGIN box) would also push the "Live" badge
   half that margin below the heading's text. */
.cc-built__body .pkl-h3 { margin-bottom: 0; }
.cc-built__row {
  display: grid;
  gap: 36px;
  align-items: center;
  border-top: 1px solid var(--pkl-black-12);
  padding-top: var(--space-8);
}
.cc-built__row--right { grid-template-columns: minmax(0, 1fr) 300px; }
.cc-built__row--left  { grid-template-columns: 300px minmax(0, 1fr); }
.cc-built__row--left .cc-built__body { order: 2; }
.cc-built__row--none  { grid-template-columns: minmax(0, 1fr); }

.cc-built__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.cc-built__photo {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (max-width: 900px) {
  .cc-built { gap: var(--space-6); margin-top: var(--space-6); }
  .cc-built__row,
  .cc-built__row--right,
  .cc-built__row--left {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-5);
  }
  /* Photo above the copy on every row, whichever side it takes on desktop. */
  .cc-built__body,
  .cc-built__row--left .cc-built__body { order: 2; }
  .cc-built__photo { order: 1; height: 200px; border-radius: var(--radius-pill); }
}

/* -----------------------------------------------------------------
   TERMS & REPAYMENT
   ----------------------------------------------------------------- */
.cc-stats { margin: var(--space-5) 0 0; }
.cc-stats .pkl-card { padding: 22px; }
.cc-stats__note { margin: 28px 0; }
.cc-founders { gap: 28px; }
.cc-founders .pkl-card { padding: 30px 32px; }
.cc-founders__figure {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1;
  margin-bottom: var(--space-3);
  color: var(--text-neutral-strong);
}

/* -----------------------------------------------------------------
   FIND YOUR CREW — copy left, button right
   ----------------------------------------------------------------- */
.cc-band {
  padding: 40px 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.cc-band__body { max-width: 52ch; }
.cc-band__title { margin-bottom: var(--space-3); }
@media (max-width: 900px) {
  .cc-band { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .cc-band .pkl-btn { width: 100%; }
}

/* -----------------------------------------------------------------
   QUOTES
   ----------------------------------------------------------------- */
/* Editors add two or three quotes. A fixed three-column track leaves a
   ghost column and squeezes two quotes into 250px of measure, so let the
   row fit whatever is there. */
.cc-quotes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.cc-quote {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}
.cc-quote__mark { width: 24px; height: 24px; object-fit: contain; }
.cc-quote__text {
  margin: 0;
  flex: 1;
  color: var(--text-neutral-strong);
}
.cc-quote__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cc-quote__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.cc-quote__avatar--initial {
  display: grid;
  place-items: center;
  background: var(--foreground-brand);
  color: var(--text-neutral-strong);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
}
.cc-quote__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-neutral-strong);
}
.cc-quote__role {
  display: block;
  font-size: 13px;
  letter-spacing: var(--tracking-body);
  color: var(--pkl-black-50);
}

/* -----------------------------------------------------------------
   PERKS
   ----------------------------------------------------------------- */
.cc-perks { max-width: 66ch; }
.cc-perks .pkl-body + .pkl-body { margin-top: var(--space-4); }
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* -----------------------------------------------------------------
   PARTNERS
   ----------------------------------------------------------------- */
.cc-partners__logos {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: var(--radius-pill);
  margin-top: var(--space-6);
}
@media (max-width: 620px) { .cc-partners__logos { height: 110px; } }

/* -----------------------------------------------------------------
   REVENUE MODEL — a real table on desktop, stacked cards on phones
   ----------------------------------------------------------------- */
.cc-revenue { margin-top: var(--space-6); padding: var(--space-2) 30px var(--space-6); }
.cc-revenue__table {
  width: 100%;
  border-collapse: collapse;
}
.cc-revenue__table th,
.cc-revenue__table td { text-align: right; }
.cc-revenue__table thead th {
  padding: 18px 0 var(--space-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pkl-black-50);
}
.cc-revenue__table thead th:first-child,
.cc-revenue__table .cc-revenue__year { text-align: left; }
.cc-revenue__table tbody th,
.cc-revenue__table tbody td {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--pkl-black-12);
  font-size: 17px;
  color: var(--text-neutral-weak);
}
/* Scoped through .cc-revenue__table so these beat the generic
   `tbody th` / `tbody td` sizing above, which is one step more specific
   than a lone class would be. */
.cc-revenue__table .cc-revenue__year {
  padding-right: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-neutral-strong);
}
.cc-revenue__table .cc-revenue__total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-neutral-strong);
}
.cc-revenue__total.is-accent { color: var(--text-brand-strong); }

@media (max-width: 760px) {
  .cc-revenue {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .cc-revenue__table thead { display: none; }
  .cc-revenue__table tbody { display: flex; flex-direction: column; gap: var(--space-4); }
  .cc-revenue__table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px var(--space-4);
    background: var(--background-neutral-weak);
    border-radius: var(--radius-pill);
    box-shadow: var(--elevation-2);
    padding: var(--space-5);
  }
  .cc-revenue__table tbody th,
  .cc-revenue__table tbody td {
    border-top: 0;
    padding: 0;
    font-size: 14px;
  }
  .cc-revenue__table tbody td:not(.cc-revenue__total) {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-neutral-strong);
    font-weight: 700;
  }
  .cc-revenue__table tbody td:not(.cc-revenue__total)::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--pkl-black-50);
  }
  /* Year and total share the card's first row — pinned explicitly,
     because auto-placement would otherwise drop the total after the four
     data cells instead of alongside the year. */
  .cc-revenue__year {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    font-size: 24px;
    margin-bottom: var(--space-1);
  }
  .cc-revenue__total {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: baseline;
    font-size: 22px;
    margin-bottom: var(--space-1);
  }
}

/* -----------------------------------------------------------------
   FINANCIAL TERMS
   ----------------------------------------------------------------- */
.cc-terms { margin: 0; }
.cc-terms__row {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  gap: var(--space-5);
  padding: 15px 0;
  border-top: 1px solid var(--pkl-black-12);
}
.cc-terms__key {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-neutral-strong);
}
.cc-terms__val {
  margin: 0;
  font-size: 16px;
  line-height: 1.535;
  letter-spacing: var(--tracking-body);
  color: var(--text-neutral-weak);
}
@media (max-width: 620px) {
  .cc-terms__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-3) 0;
  }
  .cc-terms__key { font-size: 15px; }
  .cc-terms__val { font-size: 15px; }
}

.cc-note {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: 22px 26px;
}
.cc-note img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  object-fit: contain;
}

/* -----------------------------------------------------------------
   RISK
   ----------------------------------------------------------------- */
.cc-risk .pkl-card { padding: 26px 28px; }

/* -----------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------- */
.cc-faq { padding: 22px 26px; }
/* Comp spaces the questions 14px apart, one step off the shared scale. */
#faq .pkl-stack--tight { gap: 14px; }
.cc-faq__q { margin: 0; font: inherit; }

/* -----------------------------------------------------------------
   PLEDGE RAIL
   ----------------------------------------------------------------- */
.cc-pledge { padding: var(--space-6) var(--space-6) var(--space-5); }
.cc-pledge__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-brand-strong);
  margin-bottom: 10px;
}
.cc-pledge__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-neutral-strong);
  margin-bottom: var(--space-2);
}
.cc-pledge__text {
  font-size: 15px;
  line-height: 1.535;
  letter-spacing: var(--tracking-body);
  color: var(--text-neutral-weak);
  margin-bottom: 10px;
}
.cc-pledge__progress-note {
  font-size: 15px;
  line-height: 1.535;
  letter-spacing: var(--tracking-body);
  color: var(--text-neutral-strong);
  margin-bottom: var(--space-4);
}
.cc-pledge__meter { margin-bottom: var(--space-5); }
/* The pledge box is already white, so the meter's own white pill would
   disappear into it — tint its track instead. */
.cc-pledge .pkl-heart-meter__hearts { background: var(--background-neutral-weak); }

.cc-pledge__terms {
  border-top: 1px solid var(--pkl-black-12);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}
.cc-pledge__terms-btn { font-size: 16px; }
/* The comp sets this caret one step below the FAQ's, matching its
   smaller label. */
.cc-pledge__terms-btn .pkl-disclosure__caret { font-size: 13px; }
.cc-pledge__terms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-pledge__term {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: var(--tracking-body);
  color: var(--pkl-black-50);
}
.cc-pledge__term strong {
  color: var(--text-neutral-strong);
  text-align: right;
  max-width: 60%;
}

/* CF7 pledge form.
   -----------------------------------------------------------------
   The form is defined in includes/capital-campaign-cf7.php. CF7 wraps
   every control in its own <p> and drops a <br> after each label, so
   the first few rules undo that spacing; the controls themselves reuse
   the shared `.pkl-input` / `.pkl-btn` values rather than inventing a
   second look. The submit tag already carries `pkl-btn pkl-btn--block`,
   so it only needs the bits an <input> does not inherit. */
.cc-pledge__form .wpcf7 { margin: 0; }
.cc-pledge__form .wpcf7-form p { margin: 0; }
.cc-pledge__form .wpcf7-form label + br,
.cc-pledge__form .wpcf7-form .cc-field br { display: none; }
.cc-pledge__form .wpcf7-form-control-wrap { display: block; }

.cc-pledge__form .cc-field + .cc-field { margin-top: var(--space-3); }
.cc-pledge__form .cc-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-neutral-strong);
  margin-bottom: var(--space-2);
}

.cc-pledge__form input[type="text"],
.cc-pledge__form input[type="email"],
.cc-pledge__form input[type="tel"],
.cc-pledge__form input[type="number"],
.cc-pledge__form select,
.cc-pledge__form textarea {
  width: 100%;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-input);
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: var(--tracking-body);
  color: var(--text-neutral-strong);
  background: var(--background-neutral);
  outline: 0;
  min-height: 48px;
}
.cc-pledge__form input::placeholder,
.cc-pledge__form textarea::placeholder { color: var(--text-neutral-weaker); }
.cc-pledge__form input:focus,
.cc-pledge__form select:focus,
.cc-pledge__form textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(235, 141, 138, 0.22);
}

.cc-pledge__form input[type="submit"] {
  margin-top: var(--space-4);
  -webkit-appearance: none;
  appearance: none;
}

/* CF7's spinner is only hidden with `visibility`, so idle it still
   reserves a 24px band under the button. Take it out of the flow until
   the form is actually submitting. */
.cc-pledge__form .wpcf7-spinner { display: none; }
.cc-pledge__form form.submitting .wpcf7-spinner {
  display: block;
  margin: var(--space-2) auto 0;
}

.cc-pledge__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-brand-strong);
}
/* CF7's own stylesheet is enqueued after this one and paints the
   response box blue/amber at `.wpcf7 form.invalid .wpcf7-response-output`
   — the same specificity as a `.cc-pledge__form form.invalid …` rule
   would be, so it would win the tie on source order. The extra `.cc`
   settles it without !important. (Depending on the `contact-form-7`
   handle instead would drop this whole stylesheet whenever CF7 is
   deactivated, which is a worse failure than a blue border.) */
.cc .cc-pledge__form .wpcf7-response-output {
  margin: var(--space-3) 0 0;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-tag);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.cc .cc-pledge__form form.sent .wpcf7-response-output {
  border-color: var(--foreground-positive);
  color: var(--text-neutral-strong);
}
.cc .cc-pledge__form form.invalid .wpcf7-response-output,
.cc .cc-pledge__form form.failed .wpcf7-response-output {
  border-color: var(--border-brand);
  color: var(--text-neutral-strong);
}

/* -----------------------------------------------------------------
   DOWNLOAD THE APP
   -----------------------------------------------------------------
   The band that closes the page, in place of the sponsorship section
   that used to. --background-brand-weak is --pkl-pink-100, the exact
   pink of the homepage's "Ready to play?" block.

   One centred column at every width: there is only a heading, a line
   of copy and a button, so the mobile layout is the desktop one with
   less padding around it.
   ----------------------------------------------------------------- */
.cc-download {
  background: var(--background-brand-weak);
  padding: 88px 0;
  text-align: center;
}
.cc-download__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-download__text { margin-top: var(--space-4); }
.cc-download__cta { margin-top: var(--space-6); }

@media (max-width: 900px) {
  .cc-download { padding: var(--space-10) 0; }
}
@media (max-width: 620px) {
  .cc-download__cta { width: 100%; }
}

/* -----------------------------------------------------------------
   MOTION
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cc *,
  .cc *::before,
  .cc *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}