.action-page {
  --action-cyan: #52e7ff;
  --action-lime: #b8ff39;
  --action-purple: #9f8cff;
  --action-pink: #ff7daf;
  --action-accent: var(--action-cyan);
  --action-soft: rgba(82, 231, 255, 0.08);
}

.action-page--media {
  --action-accent: var(--action-purple);
  --action-soft: rgba(159, 140, 255, 0.09);
}

.action-page--contribute {
  --action-accent: var(--action-lime);
  --action-soft: rgba(184, 255, 57, 0.08);
}

.action-page--contact {
  --action-accent: var(--action-pink);
  --action-soft: rgba(255, 125, 175, 0.08);
}

.action-page .growth-hero {
  position: relative;
  overflow: hidden;
  border-left: 5px solid var(--action-accent);
  border-radius: 8px 30px 30px 8px;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--action-accent) 17%, transparent), transparent 23rem),
    radial-gradient(circle at 8% 96%, rgba(82, 231, 255, 0.09), transparent 21rem),
    #141b27;
}

.action-page .growth-hero::after {
  position: absolute;
  right: -32px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  border: 18px solid color-mix(in srgb, var(--action-accent) 15%, transparent);
  border-radius: 30px;
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.action-page .growth-hero h1,
.action-page .growth-page h2,
.action-page .media-kit-card h2,
.action-page .growth-form legend,
.action-page .contribution-types strong {
  font-family: var(--font-display, "Fredoka", sans-serif) !important;
}

.action-page .growth-summary {
  position: relative;
  z-index: 1;
  gap: 7px;
  border-color: color-mix(in srgb, var(--action-accent) 34%, transparent);
  border-radius: 17px 5px 17px 5px;
  background: color-mix(in srgb, var(--action-accent) 6%, #111925);
}

.action-page .growth-summary strong:not(:first-child) {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--action-accent) 20%, transparent);
}

.action-page-shortcuts,
.action-page-steps {
  display: flex;
  gap: 9px;
  margin: 20px 0 30px;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.action-page-shortcuts::-webkit-scrollbar,
.action-page-steps::-webkit-scrollbar {
  display: none;
}

.action-page-shortcuts a,
.action-page-steps li {
  flex: 1 0 0;
  min-width: 190px;
  min-height: 62px;
  scroll-snap-align: start;
}

.action-page-shortcuts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--action-accent) 24%, transparent);
  border-radius: 14px 4px 14px 4px;
  background: color-mix(in srgb, var(--action-accent) 5%, #151d29);
  color: #e9eef6;
  font-family: var(--font-ui, "Nunito", sans-serif);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.action-page-shortcuts a::after {
  color: var(--action-accent);
  content: "→";
  font-size: 1.1rem;
}

.action-page-steps {
  counter-reset: action-step;
}

.action-page-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 11px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px 4px 14px 4px;
  background: #151d29;
  counter-increment: action-step;
}

.action-page-steps li::before {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px 4px 12px 4px;
  background: var(--action-accent);
  color: #09111b;
  content: counter(action-step, decimal-leading-zero);
  font-family: var(--font-ui, "Nunito", sans-serif);
  font-weight: 1000;
}

.action-page-steps strong {
  color: #eef3fa;
  font-family: var(--font-ui, "Nunito", sans-serif);
  font-size: 0.82rem;
}

.action-page-steps span {
  color: #98a6b8;
  font-size: 0.7rem;
  line-height: 1.35;
}

.media-kit-page .partnership-principle-grid article,
.media-kit-page .media-kit-card,
.action-page--contact #contact-options .media-kit-card {
  --panel-accent: var(--action-cyan);
  border-left: 4px solid var(--panel-accent) !important;
  border-radius: 7px 18px 18px 7px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-accent) 7%, transparent), transparent 24%),
    #151d29 !important;
}

.media-kit-page .partnership-principle-grid article:nth-child(2n),
.media-kit-page .media-kit-card:nth-child(2n),
.action-page--contact #contact-options .media-kit-card:nth-child(2n) {
  --panel-accent: var(--action-lime);
}

.media-kit-page .partnership-principle-grid article:nth-child(3n),
.media-kit-page .media-kit-card:nth-child(3n),
.action-page--contact #contact-options .media-kit-card:nth-child(3n) {
  --panel-accent: var(--action-purple);
}

.media-kit-page .partnership-principle-grid article:nth-child(4n),
.media-kit-page .media-kit-card:nth-child(4n),
.action-page--contact #contact-options .media-kit-card:nth-child(4n) {
  --panel-accent: var(--action-pink);
}

.media-kit-page .media-kit-card h2,
.action-page--contact #contact-options .media-kit-card h2 {
  letter-spacing: -0.03em;
}

.media-kit-page .brand-asset-actions,
.action-page--contact #contact-options .media-kit-card {
  align-items: stretch;
}

.media-kit-page .copy-button,
.media-kit-page .growth-primary,
.media-kit-page .brand-asset-actions a,
.action-page--contact #contact-options a,
.contribute-page .growth-primary,
.contribute-page .growth-secondary {
  border-radius: 11px 4px 11px 4px !important;
  font-family: var(--font-ui, "Nunito", sans-serif) !important;
}

.action-page--contact #contact-options .media-kit-card {
  min-height: 230px;
}

.action-page--contact #contact-options .media-kit-card > a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  text-align: center;
  text-decoration: none;
}

.contribute-page .contribution-types button {
  --type-accent: var(--action-cyan);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--type-accent);
  border-radius: 7px 16px 16px 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--type-accent) 6%, transparent), transparent 30%),
    #151d29;
}

.contribute-page .contribution-types button:nth-child(2) {
  --type-accent: var(--action-lime);
}

.contribute-page .contribution-types button:nth-child(3) {
  --type-accent: var(--action-purple);
}

.contribute-page .contribution-types button[aria-pressed="true"],
.contribute-page .contribution-types button.is-active {
  border-color: var(--type-accent);
  background: color-mix(in srgb, var(--type-accent) 10%, #151d29);
  box-shadow: 0 8px 24px rgba(3, 7, 12, 0.24);
}

.contribute-page .growth-form {
  border-radius: 22px 7px 22px 7px;
  background:
    radial-gradient(circle at 100% 0%, rgba(82, 231, 255, 0.055), transparent 20rem),
    #141b25;
}

.contribute-page .growth-form fieldset {
  --field-accent: var(--action-cyan);
}

.contribute-page .growth-form fieldset:nth-of-type(2n) {
  --field-accent: var(--action-lime);
}

.contribute-page .growth-form fieldset:nth-of-type(3n) {
  --field-accent: var(--action-purple);
}

.contribute-page .growth-form legend {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contribute-page .growth-form legend::before {
  width: 9px;
  height: 26px;
  border-radius: 999px;
  background: var(--field-accent);
  content: "";
  transform: rotate(3deg);
}

.action-page .form-field input,
.action-page .form-field select,
.action-page .form-field textarea,
.action-page .link-builder input,
.action-page .link-builder select,
.action-page .copy-output {
  border-radius: 11px 4px 11px 4px;
  background: #1b2533;
}

.action-page .form-field input:focus,
.action-page .form-field select:focus,
.action-page .form-field textarea:focus,
.action-page .link-builder input:focus,
.action-page .link-builder select:focus,
.action-page .copy-output:focus {
  border-color: var(--action-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-accent) 14%, transparent);
}

.action-page .process-note {
  border-left-color: var(--action-accent);
  border-radius: 0 13px 13px 0;
  background: color-mix(in srgb, var(--action-accent) 4%, transparent);
}

.action-page .action-panel-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms ease, transform 560ms cubic-bezier(.2, .8, .2, 1);
}

.action-page .action-panel-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.action-page .action-hero-title,
.action-page .action-hero-copy,
.action-page .action-hero-side {
  opacity: 0;
  animation: action-page-enter 620ms cubic-bezier(.2, .8, .2, 1) forwards;
}

.action-page .action-hero-copy {
  animation-delay: 90ms;
}

.action-page .action-hero-side {
  animation-delay: 160ms;
}

@keyframes action-page-enter {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(20px) rotate(-0.35deg);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .action-page .growth-hero {
    gap: 22px;
    padding: 28px 20px;
    border-left-width: 4px;
    border-radius: 7px 22px 22px 7px;
  }

  .action-page .growth-summary {
    display: flex;
    gap: 8px;
    margin-inline: -2px;
    padding: 2px 2px 7px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .action-page .growth-summary::-webkit-scrollbar {
    display: none;
  }

  .action-page .growth-summary strong,
  .action-page .growth-summary span {
    flex: 0 0 min(74vw, 250px);
    min-height: 58px;
    margin: 0 !important;
    padding: 11px !important;
    border: 1px solid color-mix(in srgb, var(--action-accent) 23%, transparent) !important;
    border-radius: 13px 4px 13px 4px;
    background: color-mix(in srgb, var(--action-accent) 5%, #111925);
    scroll-snap-align: start;
  }

  .action-page .growth-summary strong {
    display: flex;
    align-items: center;
    color: var(--action-accent);
  }

  .action-page-shortcuts,
  .action-page-steps {
    margin: 15px 0 22px;
  }

  .action-page-shortcuts a,
  .action-page-steps li {
    flex-basis: min(80vw, 270px);
  }

  .contribute-page .contribution-types {
    display: flex;
    gap: 9px;
    margin-inline: -2px;
    padding: 2px 2px 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .contribute-page .contribution-types::-webkit-scrollbar {
    display: none;
  }

  .contribute-page .contribution-types button {
    flex: 0 0 min(82vw, 300px);
    min-height: 100px;
    scroll-snap-align: start;
  }

  .contribute-page .growth-form {
    padding: 18px 15px;
    border-radius: 17px 5px 17px 5px;
  }

  .contribute-page .growth-form fieldset {
    grid-template-columns: 1fr;
  }

  .contribute-page .form-field.is-wide,
  .contribute-page .growth-form legend,
  .contribute-page .form-consent {
    grid-column: 1;
  }

  .media-kit-page .media-kit-grid,
  .action-page--contact #contact-options {
    grid-template-columns: 1fr !important;
  }

  .action-page--contact #contact-options .media-kit-card {
    min-height: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .action-page-shortcuts a:hover,
  .media-kit-page .media-kit-card:hover,
  .media-kit-page .partnership-principle-grid article:hover,
  .action-page--contact #contact-options .media-kit-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-page .action-panel-reveal,
  .action-page .action-hero-title,
  .action-page .action-hero-copy,
  .action-page .action-hero-side {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}