body {
  margin: 0;
  background: var(--color-gray-0);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.page {
  position: relative;
  overflow-x: hidden;
  --cch-reddit: #ff4500;
}

.page__hero {
  position: relative;
  background-image: url("../../img/hero-bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.page__content {
  display: block;
  padding-bottom: var(--spacing-60);
}

.cch-topbar {
  background: var(--color-information-500);
}

.cch-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding-block: var(--spacing-8);
}

.cch-topbar__icon {
  display: block;
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.cch-topbar__text {
  margin: 0;
  color: var(--color-gray-0);
  text-align: center;
}

.cch-header {
  position: relative;
  z-index: 20;
}

.cch-hero,
.cch-section {
  scroll-margin-top: calc(var(--cch-header-h, 0px) + var(--spacing-12));
}

.cch-header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-gray-0);
  box-shadow: inset 0 -1px 0 0 var(--color-gray-50), var(--shadow-4);
}

.cch-header__spacer { height: 0; }

.cch-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-16);
  row-gap: var(--spacing-12);
  padding-block: calc(var(--spacing-12) * (1 - var(--bp-desktop)));
  min-height: calc(80px * var(--bp-desktop));
}

.cch-header__side {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.cch-header__side--end {
  display: var(--from-tablet-flex);
  justify-content: flex-end;
}

.cch-header__burger {
  display: var(--below-tablet-flex);
  flex: none;
}

.cch-header__logo {
  display: block;
  flex: 0 1 auto;
  width: 212px;
  max-width: 100%;
  aspect-ratio: 212 / 32;
  color: var(--color-gray-900);
}

.cch-header__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cch-header__nav {
  --bleed: var(--bleed-below-desktop);
  order: calc(1 - var(--bp-desktop));
  display: var(--from-tablet-flex);
  flex: 0 0 auto;
  justify-content: safe center;
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cch-header__nav::-webkit-scrollbar { display: none; }

.cch-header__nav .btn { flex: none; }

.cch-header__nav-cta {
  display: var(--below-tablet-flex);
  margin-top: var(--spacing-8);
}

.cch-header--open {
  background: var(--color-gray-0);
}

.cch-header--open .cch-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--spacing-4);
  min-width: 0;
  max-height: calc(100dvh - var(--cch-header-h, 0px));
  margin-inline: 0;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-12);
  border-radius: 0 0 var(--radius-12) var(--radius-12);
  background: var(--color-gray-0);
  box-shadow: inset 0 1px 0 0 var(--color-gray-50), var(--shadow-12);
  overflow-x: hidden;
  overflow-y: auto;
}

.cch-header--open .cch-header__nav .btn { justify-content: flex-start; }

.cch-header--open .cch-header__nav .cch-header__nav-cta { justify-content: center; }

.cch-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-32);
  padding-bottom: calc(var(--spacing-40) + var(--bp-desktop) * (84px - var(--spacing-40)));
}

.cch-hero__pill {
  margin-bottom: var(--spacing-32);
}

.cch-hero__title {
  margin: 0;
  padding-bottom: var(--spacing-32);
  color: var(--color-gray-900);
  text-align: center;
  font-size: calc(
    var(--text-display-28-size)
    + var(--bp-tablet) * (var(--text-display-36-size) - var(--text-display-28-size))
    + var(--bp-desktop) * (var(--text-display-48-size) - var(--text-display-36-size))
  );
  line-height: calc(
    var(--text-display-28-line-height)
    + var(--bp-tablet) * (var(--text-display-36-line-height) - var(--text-display-28-line-height))
    + var(--bp-desktop) * (var(--text-display-48-line-height) - var(--text-display-36-line-height))
  );
  font-weight: var(--text-display-48-weight);
}

.cch-hero__lead {
  margin: 0;
  max-width: 740px;
  color: var(--color-gray-700);
  text-align: center;
}

.cch-hero__labels {
  --bleed: var(--bleed-below-tablet);
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-40);
  overflow-x: var(--scrollx-below-tablet);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cch-hero__labels .popover {
  display: var(--from-tablet-flex);
  z-index: 10;
}

.cch-hero__labels::-webkit-scrollbar { display: none; }

.cch-hero__labels .badge-int { flex: none; }

.cch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-40);
}

.cch-hero__actions .btn {
  flex: none;
  min-width: 144px;
}

.cch-hero__stats {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing-24) + var(--bp-desktop) * (var(--spacing-44) + var(--spacing-24) - var(--spacing-24)));
  margin-top: var(--spacing-40);
  padding-block: var(--spacing-20);
}

.cch-hero__rating {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-8) + var(--bp-desktop) * (var(--spacing-20) - var(--spacing-8)));
  flex: 1 1 0;
  min-width: 0;
}

.cch-hero__rating--end { justify-content: flex-end; }
.cch-hero__rating--start { justify-content: flex-start; }

.cch-hero__score {
  color: var(--color-gray-900);
}

.cch-hero__stars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.cch-hero__divider {
  flex: none;
  width: 1px;
  height: 64px;
  background: var(--color-gray-100);
}

.cch-hero__benefits {
  --bleed: var(--bleed-below-desktop);
  align-self: stretch;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-24);
  padding-block: var(--spacing-24);
  box-shadow: inset 0 1px 0 0 var(--color-gray-50);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cch-hero__benefits::-webkit-scrollbar { display: none; }

.cch-benefit {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.cch-benefit__check {
  display: block;
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--color-positive-400);
}

.cch-section {
  display: block;
}

.cch-section__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: calc(
    var(--spacing-52) + var(--bp-tablet) * (var(--spacing-80) - var(--spacing-52))
  );
}

.cch-section__inner--flush { padding-bottom: 0; }

.cch-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cch-head__eyebrow {
  margin: 0;
  color: var(--color-information-500);
  text-align: center;
}

.cch-head__title {
  margin: 0;
  padding-top: var(--spacing-12);
  color: var(--color-gray-900);
  text-align: center;
  font-size: calc(
    var(--text-display-24-size)
    + var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-24-size))
    + var(--bp-desktop) * (var(--text-display-36-size) - var(--text-display-28-size))
  );
  line-height: calc(
    var(--text-display-24-line-height)
    + var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-24-line-height))
    + var(--bp-desktop) * (var(--text-display-36-line-height) - var(--text-display-28-line-height))
  );
  font-weight: var(--text-display-36-weight);
}

.cch-head__title--sm {
  font-size: calc(
    var(--text-display-24-size)
    + var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-24-size))
    + var(--bp-desktop) * (var(--text-display-32-size) - var(--text-display-28-size))
  );
  line-height: calc(
    var(--text-display-24-line-height)
    + var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-24-line-height))
    + var(--bp-desktop) * (var(--text-display-32-line-height) - var(--text-display-28-line-height))
  );
}

.cch-head__lead {
  margin: 0;
  max-width: 800px;
  padding-top: var(--spacing-12);
  color: var(--color-gray-700);
  text-align: center;
}

.cch-head__lead--wide {
  max-width: none;
  padding-top: var(--spacing-24);
}

.cch-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--cch-gap);
}

.cch-cols > * {
  flex: 1 1 var(--cch-basis);
  min-width: 0;
}

.cch-cols--3 {
  --cch-gap: var(--spacing-24);
  --cch-basis: calc(
    100% * (1 - var(--bp-tablet))
    + (50% - var(--cch-gap) / 2) * (var(--bp-tablet) - var(--bp-tlandscape))
    + (33.3333% - var(--cch-gap) * 2 / 3) * var(--bp-tlandscape)
  );
}

.cch-cols--3 > :first-child {
  flex-basis: calc(
    100% * (1 - var(--bp-tlandscape))
    + (33.3333% - var(--cch-gap) * 2 / 3) * var(--bp-tlandscape)
  );
}

.cch-cols--4 {
  --cch-gap: var(--spacing-24);
  --cch-basis: calc(
    100% * (1 - var(--bp-tablet))
    + (50% - var(--cch-gap) / 2) * (var(--bp-tablet) - var(--bp-desktop))
    + (25% - var(--cch-gap) * 3 / 4) * var(--bp-desktop)
  );
}

.cch-cols--tight {
  --cch-gap: var(--spacing-8);
}

.cch-cols--top { align-items: flex-start; }

.cch-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-20);
  padding: var(--spacing-32);
  border-radius: var(--radius-12);
  background: var(--color-accent-25);
}

.cch-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-32);
  height: var(--spacing-32);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  color: var(--color-gray-800);
}

.cch-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  background: var(--color-gray-0);
  color: var(--color-information-500);
  box-shadow: var(--shadow-4);
}

.cch-card__icon svg {
  display: block;
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.cch-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cch-card__title {
  margin: 0;
  color: var(--color-gray-900);
}

.cch-card__desc {
  margin: 0;
  color: var(--color-gray-500);
}

.cch-card > .cch-quote,
.cch-card > .cch-checks { margin-top: auto; }

.cch-br { display: var(--only-desktop); }

.cch-quote {
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  border-radius: var(--radius-12);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
}

.cch-quote__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.cch-quote__logo {
  display: block;
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.cch-quote__source {
  margin: 0;
  min-width: 0;
  color: var(--color-gray-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cch-quote__sub {
  color: var(--cch-reddit);
}

.cch-quote__text {
  margin: 0;
  color: var(--color-gray-700);
  font-style: italic;
}

.cch-quote__votes {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  color: var(--color-gray-800);
}

.cch-quote__arrow {
  display: block;
  flex: none;
  width: var(--spacing-12);
  height: var(--spacing-12);
}

.cch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
  padding-top: var(--spacing-24);
}

.cch-actions .btn { flex: none; min-width: 200px; }

.cch-topics {
  --cch-topic-gap: calc(var(--spacing-16) + var(--bp-desktop) * (49px - var(--spacing-16)));
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--cch-topic-gap);
  overflow: hidden;
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}

.cch-problem__grid {
  padding-top: var(--spacing-40);
}

.cch-topic {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1 1 calc(
    (50% - var(--cch-topic-gap) / 2) * (1 - var(--bp-tablet))
    + (33.3333% - var(--cch-topic-gap) * 2 / 3) * (var(--bp-tablet) - var(--bp-desktop))
    + (25% - var(--cch-topic-gap) * 3 / 4) * var(--bp-desktop)
  );
  min-width: 0;
  padding: calc(var(--spacing-16) + var(--bp-desktop) * (var(--spacing-24) - var(--spacing-16)));
  box-shadow: inset 0 calc(-1px * (1 - var(--bp-desktop))) 0 0 var(--color-gray-100);
}

.cch-topic::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1 * (var(--cch-topic-gap) + 1px) / 2);
  width: 1px;
  background: var(--color-gray-100);
  display: none;
}

.cch-topic:not(:nth-child(4n + 1))::before { display: var(--only-desktop); }

.cch-topic:not(:nth-child(3n + 1))::before { display: var(--only-tablet); }

.cch-topic:not(:nth-child(4n + 1)):not(:nth-child(3n + 1))::before { display: var(--from-tablet); }

.cch-topic:not(:nth-last-child(-n + 4))::after {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--cch-topic-gap) + 1px) / 2);
  right: calc(-1 * (var(--cch-topic-gap) + 1px) / 2);
  bottom: 0;
  height: 1px;
  background: var(--color-gray-100);
  display: var(--only-desktop);
}

.cch-topic__title {
  margin: 0;
  color: var(--color-gray-900);
  text-align: center;
}

.cch-topic__desc {
  margin: 0;
  color: var(--color-gray-500);
  text-align: center;
}

.cch-checks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cch-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--color-positive-500);
}

.cch-check__icon {
  display: block;
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-top: var(--spacing-2);
  color: var(--color-positive-400);
}

.cch-trio {
  display: flex;
  flex-wrap: wrap;
  column-gap: 65px;
  row-gap: var(--spacing-32);
}

.cch-trio__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-24);
  flex: 1 1 calc(
    100% * (1 - var(--bp-tablet))
    + (33.3333% - 43.33px) * var(--bp-tablet)
  );
  min-width: 0;
}

.cch-trio__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -33px;
  width: 1px;
  background: var(--color-gray-100);
  display: var(--from-tablet);
}

.cch-trio__item:first-child::before { display: none; }

.cch-trio--stack .cch-trio__text { gap: var(--spacing-8); }

.cch-trio--stack .cch-trio__item {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.cch-trio__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  background: var(--color-positive-25);
  color: var(--color-positive-400);
}

.cch-trio__icon svg {
  display: block;
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.cch-trio__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.cch-trio__title {
  margin: 0;
  color: var(--color-gray-900);
}

.cch-trio__desc {
  margin: 0;
  color: var(--color-gray-500);
}

.cch-banner {
  padding-top: var(--spacing-24);
}

.cch-banner .bsr__btn { flex: none; flex-grow: 0; }

.cch-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

.cch-guarantees {
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}

.cch-safety__trio {
  margin-top: var(--spacing-24);
}

.cch-trio--stack {
  padding-block: var(--spacing-40);
}

.cch-steps {
  padding-top: var(--spacing-40);
}

.cch-step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
  border-radius: var(--radius-12);
  background: var(--color-information-25);
}

.cch-step__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.cch-chips {
  --bleed: var(--bleed-below-tablet);
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: var(--spacing-4);
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-24);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cch-chips::-webkit-scrollbar { display: none; }

.cch-chips .chips { flex: none; }

.cch-offers__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-24);
}

.cch-offers__grid .pcard {
  flex: 1 1 calc(
    100% * (1 - var(--bp-tablet))
    + (50% - var(--spacing-12)) * (var(--bp-tablet) - var(--bp-tlandscape))
    + (33.3333% - var(--spacing-16)) * (var(--bp-tlandscape) - var(--bp-desktop))
    + (25% - var(--spacing-24) * 3 / 4) * var(--bp-desktop)
  );
  min-width: 0;
  width: auto;
}

.cch-offers__cta {
  align-self: stretch;
  margin-top: var(--spacing-24);
}

.cch-rating-tag {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  align-self: center;
  margin-top: var(--spacing-20);
  padding: var(--spacing-8) var(--spacing-24) var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-8);
  background: var(--color-positive-25);
  box-shadow: inset 0 0 0 1px var(--color-positive-100);
  row-gap: var(--spacing-4);
  text-align: center;
}

.cch-rating-tag__text {
  margin: 0;
  color: var(--color-gray-900);
}

.cch-rating-tag__divider {
  display: var(--from-tablet);
  flex: none;
  width: 1px;
  height: var(--spacing-24);
  background: var(--color-gray-100);
}

.cch-reviews__slider {
  --bleed: var(--bleed-below-desktop);
  padding-top: var(--spacing-20);
}

.cch-faq__list {
  align-self: center;
  width: 100%;
  max-width: 760px;
  padding-top: var(--spacing-24);
}

.cch-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy-900);
}

.cch-cta__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.cch-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(
    var(--spacing-52) + var(--bp-desktop) * (var(--spacing-80) - var(--spacing-52))
  );
}

.cch-cta__eyebrow {
  margin: 0;
  color: var(--color-information-300);
  text-align: center;
}

.cch-cta__title {
  margin: 0;
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-32);
  color: var(--color-gray-0);
  text-align: center;
  font-size: calc(
    var(--text-display-28-size)
    + var(--bp-tablet) * (var(--text-display-36-size) - var(--text-display-28-size))
    + var(--bp-desktop) * (var(--text-display-48-size) - var(--text-display-36-size))
  );
  line-height: calc(
    var(--text-display-28-line-height)
    + var(--bp-tablet) * (var(--text-display-36-line-height) - var(--text-display-28-line-height))
    + var(--bp-desktop) * (var(--text-display-48-line-height) - var(--text-display-36-line-height))
  );
  font-weight: var(--text-display-48-weight);
}

.cch-cta__lead {
  margin: 0;
  color: var(--color-gray-0);
  text-align: center;
}

.cch-cta__btn {
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-24);
}

.cch-grab { cursor: grab; }