.aboutPoolsPage {
  --about-ink: #101010;
  --about-blue: #1e4496;
  --about-paper: #fbfaf7;
  --about-lav: #c8bdfc;
  --about-mint: #b8f3dd;
  --about-yellow: #f3d36b;
  --about-rose: #f3c4d8;
  --about-ice: #d9e6f9;
  --about-border: 3px solid var(--about-ink);
  --about-shadow: 6px 6px 0 var(--about-ink);
  color: var(--about-ink);
}

.aboutPoolsShell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 18px 0 36px;
  display: grid;
  gap: 18px;
}

.aboutPoolsHero,
.aboutPoolsSection,
.aboutPoolsAudience,
.aboutPoolsSplit,
.aboutPoolsOrganizerSpotlight,
.aboutPoolsPricing,
.aboutPoolsFinal {
  border: var(--about-border);
  border-radius: 18px;
  box-shadow: var(--about-shadow);
  background: var(--about-paper);
  overflow: hidden;
}

.aboutPoolsHero {
  display: block;
  min-height: 0;
  background: var(--about-mint);
}

.aboutPoolsHero__copy {
  max-width: 820px;
  padding: 56px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.aboutPoolsHero__wordmark {
  margin: 0;
  color: var(--about-blue);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(64px, 10vw, 118px);
  font-weight: 1000;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: none;
}

.aboutPoolsHero h1,
.aboutPoolsSection h2,
.aboutPoolsAudiencePanel h2,
.aboutPoolsFeature h2,
.aboutPoolsOrganizerSpotlight h2,
.aboutPoolsPricing h2,
.aboutPoolsFinal h2 {
  margin: 0;
  color: var(--about-ink);
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
}

.aboutPoolsHero p,
.aboutPoolsSection__intro p,
.aboutPoolsAudiencePanel p,
.aboutPoolsFeature p,
.aboutPoolsOrganizerSpotlight p,
.aboutPoolsPreviewCard p,
.aboutPoolsProductCard p,
.aboutPoolsMiniFeature p,
.aboutPoolsPricing p,
.aboutPoolsFinal p {
  margin: 0;
  color: var(--about-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.48;
}

.aboutPoolsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.aboutPoolsButton {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--about-border);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--about-ink);
  padding: 10px 16px;
  background: var(--about-paper);
  color: var(--about-ink);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.1;
  text-decoration: none;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.aboutPoolsButton:hover,
.aboutPoolsButton:focus-visible {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 var(--about-ink);
  color: var(--about-ink);
  text-decoration: none;
}

.aboutPoolsButton--primary {
  background: var(--about-yellow);
}

.aboutPoolsMarquee {
  border: var(--about-border);
  border-radius: 18px;
  box-shadow: var(--about-shadow);
  background: var(--about-ink);
  overflow: hidden;
}

.aboutPoolsMarquee__track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  animation: aboutPoolsMarquee 36s linear infinite;
}

.aboutPoolsMarquee img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border: 2px solid var(--about-ink);
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--about-paper);
  background: var(--about-paper);
}

.aboutPoolsSection {
  padding: 32px;
  display: grid;
  gap: 24px;
}

.aboutPoolsSection--sun {
  background: var(--about-yellow);
}

.aboutPoolsSection--community {
  background: var(--about-mint);
}

.aboutPoolsSection--preview {
  background: var(--about-ice);
}

.aboutPoolsSection--tools {
  background: var(--about-paper);
}

.aboutPoolsSection__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 12px;
}

.aboutPoolsCardGrid {
  display: grid;
  gap: 18px;
}

.aboutPoolsCardGrid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aboutPoolsCard,
.aboutPoolsMiniFeature,
.aboutPoolsPriceCard {
  border: var(--about-border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--about-ink);
  background: var(--about-paper);
  padding: 20px;
}

.aboutPoolsIcon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}

.aboutPoolsCard h3,
.aboutPoolsPreviewCard h3,
.aboutPoolsProductCard h3,
.aboutPoolsMiniFeature h3,
.aboutPoolsPriceCard h3 {
  margin: 0 0 10px;
  color: var(--about-ink);
  font-size: 24px;
  font-weight: 1000;
  line-height: 1.08;
  letter-spacing: 0;
}

.aboutPoolsCard p,
.aboutPoolsPreviewCard p,
.aboutPoolsProductCard p,
.aboutPoolsMiniFeature p,
.aboutPoolsPriceCard p {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.aboutPoolsEyebrow {
  margin: 0;
  color: var(--about-blue);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.2;
  text-transform: uppercase;
}

.aboutPoolsAudience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--about-ink);
}

.aboutPoolsAudiencePanel {
  min-width: 0;
  display: block;
  background: var(--about-paper);
}

.aboutPoolsAudiencePanel + .aboutPoolsAudiencePanel {
  border-left: var(--about-border);
}

.aboutPoolsAudiencePanel__copy {
  min-width: 0;
  height: 100%;
  padding: 32px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.aboutPoolsAudiencePanel--mint .aboutPoolsAudiencePanel__copy {
  background: var(--about-mint);
}

.aboutPoolsAudiencePanel--rose .aboutPoolsAudiencePanel__copy {
  background: var(--about-rose);
}

.aboutPoolsAudiencePanel__copy h2 {
  font-size: 38px;
}

.aboutPoolsSplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--about-paper);
}

.aboutPoolsSplit--reverse .aboutPoolsFeature {
  border-right: var(--about-border);
}

.aboutPoolsSplit:not(.aboutPoolsSplit--reverse) .aboutPoolsFeature {
  border-left: var(--about-border);
}

.aboutPoolsMediaBlock {
  min-height: 520px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.aboutPoolsMediaBlock--mint {
  background: var(--about-mint);
}

.aboutPoolsMediaBlock--rose {
  background: var(--about-rose);
}

.aboutPoolsMediaBlock img,
.aboutPoolsWideImage img,
.aboutPoolsQuote img {
  width: 100%;
  height: 100%;
  display: block;
}

.aboutPoolsMediaBlock img,
.aboutPoolsWideImage img {
  object-fit: contain;
}

.aboutPoolsQuote img {
  object-fit: cover;
}

.aboutPoolsFeature {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.aboutPoolsCheckList {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.aboutPoolsCheckList li {
  position: relative;
  display: block;
  list-style: none;
  min-height: 28px;
  padding-left: 36px;
  color: var(--about-ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}

.aboutPoolsCheckList li::marker {
  content: "";
}

.aboutPoolsCheckList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--about-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--about-ink);
  background: var(--about-mint);
}

.aboutPoolsCheckList li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--about-ink);
  border-bottom: 2px solid var(--about-ink);
  transform: rotate(-45deg);
}

.aboutPoolsWideImage {
  min-height: 360px;
  padding: 18px;
  border: var(--about-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--about-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutPoolsWideImage img {
  max-height: 360px;
}

.aboutPoolsPreviewGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.aboutPoolsPreviewCard {
  min-width: 0;
  border: var(--about-border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--about-ink);
  overflow: hidden;
  background: var(--about-paper);
  display: grid;
  grid-template-rows: 220px auto;
}

.aboutPoolsPreviewCard img {
  width: 100%;
  height: 220px;
  padding: 16px;
  display: block;
  object-fit: contain;
  background: #ffffff;
}

.aboutPoolsPreviewCard > div {
  padding: 18px;
  border-top: var(--about-border);
  background: var(--about-yellow);
}

.aboutPoolsPreviewCard span {
  display: inline-block;
  margin-bottom: 10px;
  border: 2px solid var(--about-ink);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--about-mint);
  color: var(--about-ink);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.aboutPoolsProductGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.aboutPoolsProductCard {
  min-width: 0;
  border: var(--about-border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--about-ink);
  overflow: hidden;
  background: var(--about-paper);
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.05fr);
}

.aboutPoolsProductCard__media {
  position: relative;
  min-height: 300px;
  padding: 18px;
  border-right: var(--about-border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutPoolsProductCard__media > img:not(.aboutPoolsProductCard__overlay) {
  width: 100%;
  height: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}

.aboutPoolsProductCard__overlay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: min(42%, 150px);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(4px 4px 0 rgba(16, 16, 16, 0.32));
}

.aboutPoolsProductCard__copy {
  min-width: 0;
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.aboutPoolsProductCard h3 {
  font-size: 22px;
}

.aboutPoolsOrganizerSpotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: var(--about-mint);
}

.aboutPoolsOrganizerSpotlight__copy {
  min-width: 0;
  padding: 34px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.aboutPoolsOrganizerSpotlight__copy h2 {
  font-size: 38px;
}

.aboutPoolsOrganizerSpotlight__media {
  min-width: 0;
  min-height: 380px;
  margin: 0;
  padding: 24px;
  border-left: var(--about-border);
  background: var(--about-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutPoolsOrganizerSpotlight__media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  display: block;
  object-fit: contain;
}

.aboutPoolsTestimonials {
  display: grid;
  gap: 14px;
}

.aboutPoolsQuote {
  border: var(--about-border);
  border-radius: 18px;
  box-shadow: var(--about-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: stretch;
  background: var(--about-paper);
}

.aboutPoolsQuote--lav {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
}

.aboutPoolsQuote__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  background: var(--about-paper);
}

.aboutPoolsQuote--sun .aboutPoolsQuote__media {
  border-right: var(--about-border);
}

.aboutPoolsQuote--lav .aboutPoolsQuote__media {
  border-left: var(--about-border);
}

.aboutPoolsQuote__media img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center;
}

.aboutPoolsQuote > div {
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.aboutPoolsQuote--sun > div {
  background: var(--about-yellow);
}

.aboutPoolsQuote--lav > div {
  background: var(--about-lav);
}

.aboutPoolsQuote blockquote {
  margin: 0;
  color: var(--about-ink);
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.22;
}

.aboutPoolsQuote p {
  margin: 0;
  color: var(--about-ink);
  font-size: 14px;
  font-weight: 900;
}

.aboutPoolsPricing {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--about-ink);
}

.aboutPoolsPricing__intro,
.aboutPoolsPriceCard {
  background: var(--about-paper);
}

.aboutPoolsPricing__intro {
  padding: 28px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.aboutPoolsPricing__intro h2 {
  font-size: 34px;
}

.aboutPoolsPriceCard {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 28px;
}

.aboutPoolsPriceCard--member {
  margin-bottom: 0;
  background: var(--about-yellow);
}

.aboutPoolsPriceCard--organizer {
  margin-bottom: 0;
  background: var(--about-mint);
}

.aboutPoolsPriceCard--member .aboutPoolsCheckList,
.aboutPoolsPriceCard--organizer .aboutPoolsCheckList {
  margin-bottom: 0;
}

.aboutPoolsPriceCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.aboutPoolsPriceCard__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.aboutPoolsPrice {
  margin: 20px 0 10px;
  font-size: 38px;
  font-weight: 1000;
  line-height: 1;
}

.aboutPoolsPrice span {
  font-size: 16px;
  font-weight: 900;
}

.aboutPoolsFinal {
  padding: 34px;
  background: var(--about-ink);
  color: var(--about-paper);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.aboutPoolsFinal h2 {
  color: var(--about-paper);
  max-width: 760px;
}

.aboutPoolsFinal h2 span {
  color: var(--about-lav);
}

.aboutPoolsFinal__icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--about-paper);
  background: var(--about-paper);
}

@keyframes aboutPoolsMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aboutPoolsMarquee__track {
    animation: none;
  }
}

@media (max-width: 980px) {
  .aboutPoolsHero,
  .aboutPoolsAudience,
  .aboutPoolsSplit,
  .aboutPoolsOrganizerSpotlight,
  .aboutPoolsPricing {
    grid-template-columns: 1fr;
  }

  .aboutPoolsHero {
    min-height: 0;
  }

  .aboutPoolsAudiencePanel + .aboutPoolsAudiencePanel,
  .aboutPoolsOrganizerSpotlight__media,
  .aboutPoolsSplit:not(.aboutPoolsSplit--reverse) .aboutPoolsFeature,
  .aboutPoolsSplit--reverse .aboutPoolsFeature {
    border-left: 0;
    border-right: 0;
    border-top: var(--about-border);
  }

  .aboutPoolsCardGrid--three {
    grid-template-columns: 1fr;
  }

  .aboutPoolsProductGrid {
    grid-template-columns: 1fr;
  }

  .aboutPoolsProductCard {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  }

  .aboutPoolsMediaBlock {
    min-height: 360px;
  }

  .aboutPoolsQuote--lav .aboutPoolsQuote__media {
    order: -1;
  }
}

@media (max-width: 820px) {
  .aboutPoolsPreviewGrid,
  .aboutPoolsProductCard {
    grid-template-columns: 1fr;
  }

  .aboutPoolsProductCard__media {
    min-height: 240px;
    border-right: 0;
    border-bottom: var(--about-border);
  }
}

@media (max-width: 700px) {
  .aboutPoolsShell {
    width: min(100vw - 22px, 1120px);
    padding-top: 12px;
    gap: 14px;
  }

  .aboutPoolsHero__copy,
  .aboutPoolsSection,
  .aboutPoolsAudiencePanel__copy,
  .aboutPoolsOrganizerSpotlight__copy,
  .aboutPoolsFeature,
  .aboutPoolsProductCard__copy,
  .aboutPoolsPreviewCard > div,
  .aboutPoolsQuote > div,
  .aboutPoolsPricing__intro,
  .aboutPoolsPriceCard,
  .aboutPoolsFinal {
    padding: 22px;
  }

  .aboutPoolsHero h1,
  .aboutPoolsSection h2,
  .aboutPoolsAudiencePanel h2,
  .aboutPoolsFeature h2,
  .aboutPoolsOrganizerSpotlight h2,
  .aboutPoolsFinal h2 {
    font-size: 34px;
  }

  .aboutPoolsOrganizerSpotlight__media {
    min-height: 260px;
    padding: 16px;
  }

  .aboutPoolsWideImage {
    min-height: 260px;
  }

  .aboutPoolsQuote,
  .aboutPoolsQuote--lav {
    grid-template-columns: 1fr;
  }

  .aboutPoolsQuote__media {
    width: min(100%, 220px);
    justify-self: center;
  }

  .aboutPoolsQuote--sun .aboutPoolsQuote__media,
  .aboutPoolsQuote--lav .aboutPoolsQuote__media {
    border-right: 0;
    border-left: 0;
    border-bottom: var(--about-border);
  }

  .aboutPoolsPricing__intro h2 {
    font-size: 28px;
  }

  .aboutPoolsQuote blockquote {
    font-size: 19px;
  }

  .aboutPoolsActions,
  .aboutPoolsButton {
    width: 100%;
  }

  .aboutPoolsMarquee img {
    width: 72px;
    height: 72px;
  }
}