
.f-ch {
  padding: var(--f-space-xl) clamp(16px, 4vw, 48px);
}
.f-ch-light,
.f-ch-dark {
  --f-ch-bg: var(--brand-surface-dark, #222222);
  --f-ch-ink: var(--brand-ink-on-dark, #FCFCFC);
  --f-ch-body: color-mix(in srgb, var(--brand-ink-on-dark, #FCFCFC) 86%, var(--brand-surface-dark, #222222));
  --f-ch-card: var(--f-plaque-bg, #FFFFFF);
  --f-ch-card-ink: var(--brand-ink-strong, #1A1A1A);
  --f-ch-card-body: var(--brand-ink, #333333);
  --f-ch-rule: color-mix(in srgb, var(--brand-ink, #333333) 24%, transparent);
  --f-ch-mark: var(--brand-accent-bright, var(--brand-accent, #0074C8));
  --f-ch-price-suffix: var(--f-accent-ink, var(--brand-accent, #0074C8));
  background: var(--f-ch-bg);
  color: var(--f-ch-body);
}
.f-ch-inner {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 104px);
  width: min(1240px, 100%);
  margin-inline: auto;
  align-items: center;
}
.f-ch-card {
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--f-ch-rule);
  border-top: 4px solid var(--brand-cta-bg, #E2211C);
  border-radius: 10px;
  background: var(--f-ch-card);
  color: var(--f-ch-card-body);
  box-shadow: 10px 14px 28px rgba(0, 0, 0, .22);
}
.f-ch-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-s);
}
.f-ch-card-title,
.f-ch-features-title {
  margin: 0;
  color: var(--f-ch-card-ink);
  font-family: var(--brand-font-display, inherit);
  font-weight: 700;
  text-transform: uppercase;
}
.f-ch-card-title {
  font-size: var(--f-h3);
  line-height: var(--f-lh-h3);
  letter-spacing: var(--f-track-h3);
}
.f-ch-badge {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--brand-cta-bg, #E2211C);
  color: var(--brand-cta-ink, #FFFFFF);
  font-size: var(--f-text-micro);
  line-height: var(--f-lh-small);
  font-weight: 700;
  letter-spacing: var(--f-track-eyebrow);
  text-transform: uppercase;
}
.f-ch-commit {
  margin: var(--f-space-s) 0 0;
  color: var(--f-ch-card-body);
  font-size: var(--f-text-caption);
  font-weight: 700;
  letter-spacing: var(--f-track-eyebrow);
  text-transform: uppercase;
}
.f-ch-price {
  display: flex;
  align-items: baseline;
  gap: .35em;
  margin: var(--f-space-s) 0 0;
  max-width: none;
  color: var(--f-ch-card-ink);
}
.f-ch-price span {
  font-family: var(--brand-font-display, inherit);
  font-size: var(--f-h1);
  line-height: var(--f-lh-h1);
  letter-spacing: var(--f-track-h1);
  font-weight: 700;
}
.f-ch-price small {
  color: var(--f-ch-price-suffix);
  font-size: var(--f-text-micro);
  line-height: var(--f-lh-small);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.f-ch-cta {
  display: flex;
  width: 100%;
  min-height: 56px;
  margin: var(--f-space-m) 0 0;
  align-items: center;
  justify-content: center;
}
.f-ch-features-title {
  margin-top: var(--f-space-m);
  padding-bottom: var(--f-space-xs);
  border-bottom: 1px solid var(--f-ch-rule);
  font-size: var(--f-h4);
  line-height: var(--f-lh-h4);
  letter-spacing: 0;
}
.f-ch-list {
  display: grid;
  gap: var(--f-space-xs);
  margin: var(--f-space-s) 0 0;
  padding: 0;
  list-style: none;
}
.f-ch-list li,
.f-ch-highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--f-space-xs);
  min-width: 0;
}
.f-ch-list li {
  color: var(--f-ch-card-body);
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
}
.f-ch-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .1em;
  color: var(--f-ch-mark);
}
.f-ch-check svg {
  display: block;
  width: 100%;
  height: 100%;
}
.f-ch-label small {
  color: inherit;
  font-size: var(--f-text-caption);
}
.f-ch-story {
  max-width: 760px;
}
.f-ch-head {
  max-width: var(--f-measure-wide);
}
.f-ch-title {
  margin: 0;
  color: var(--f-ch-ink);
  text-wrap: balance;
}
.f-ch-intro {
  margin: var(--f-space-s) 0 0;
  max-width: var(--f-measure);
  color: var(--f-ch-body);
  font-size: var(--f-text-lead);
  line-height: var(--f-lh-body);
  text-wrap: balance;
}
.f-ch-highlights {
  display: grid;
  gap: var(--f-space-m);
  margin: var(--f-space-l) 0 0;
  padding: 0;
  list-style: none;
}
.f-ch-highlights strong {
  display: block;
  color: var(--f-ch-ink);
  font-size: var(--f-text);
  line-height: var(--f-lh-body);
  text-transform: uppercase;
}
.f-ch-highlights p {
  margin: 4px 0 0;
  max-width: var(--f-measure);
  color: var(--f-ch-body);
  font-size: var(--f-text);
  line-height: var(--f-lh-body);
}
.f-ch-promise {
  margin: var(--f-space-l) 0 0;
  max-width: var(--f-measure-wide);
  padding-top: var(--f-space-s);
  border-top: 1px solid color-mix(in srgb, var(--f-ch-ink) 22%, transparent);
  color: var(--f-ch-body);
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
}
.f-ch-promise strong {
  color: var(--f-ch-ink);
}
@media (max-width: 900px) {
  .f-ch-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--f-space-l);
  }
  .f-ch-card,
  .f-ch-story {
    width: min(640px, 100%);
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .f-ch {
    padding-block: var(--f-space-l);
  }
  .f-ch-card {
    padding: 24px 20px;
  }
  .f-ch-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .f-ch-badge {
    order: -1;
  }
  .f-ch-price {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }
  .f-ch-intro,
  .f-ch-highlights p {
    font-size: var(--f-text);
  }
  .f-ch-highlights,
  .f-ch-promise {
    margin-top: var(--f-space-m);
  }
}
@media print {
  .f-ch {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .f-ch-card {
    box-shadow: none;
  }
}
