/* Shared typography tokens based on the reference texts:
   - Heading: "Main Feature Highlights"
   - Title: "Smart Test Maker"
   - Description: "Build exam-focused tests..." */
:root {
  --fp-heading-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fp-heading-size-mobile: 36px;
  --fp-heading-size-desktop: 49.6px;
  --fp-heading-line-height-mobile: 1.12;
  --fp-heading-line-height-desktop: 1.08;
  --fp-heading-letter-spacing: -0.02em;
  --fp-heading-weight: 400;
  --fp-heading-style: normal;

  --fp-title-size: 24px;
  --fp-title-line-height: 1.4;
  --fp-title-letter-spacing: -0.015em;
  --fp-title-weight: 400;
  --fp-title-style: normal;

  --fp-description-size: 16px;
  --fp-description-line-height: 28px;
  --fp-description-weight: 400;
  --fp-description-style: normal;

  --fp-heading-color: #1a1a1c;
  --fp-description-color: #6d7078;
  --fp-brand-primary: #ec4899;
  --fp-brand-primary-hover: #db2777;
  --fp-brand-accent: #17c3e6;
  --fp-brand-accent-hover: #06b6d4;
  --fp-brand-deep: #1e3a8a;
  --fp-brand-deep-hover: #172f72;
  --fp-brand-dark: #101737;
  --fp-brand-soft: #fff1f8;
  --fp-brand-soft-border: #f7c5de;
  --fp-brand-primary-shadow: rgba(236, 72, 153, 0.36);
  --fp-brand-primary-shadow-strong: rgba(236, 72, 153, 0.46);
  --fp-brand-deep-shadow: rgba(30, 58, 138, 0.24);
  --fp-brand-ring: rgba(236, 72, 153, 0.24);
}

h1,
h2,
.fp-section-title,
.fp-heading {
  font-family: var(--fp-heading-family);
  font-size: var(--fp-heading-size-mobile) !important;
  line-height: var(--fp-heading-line-height-mobile) !important;
  font-style: var(--fp-heading-style) !important;
  font-weight: var(--fp-heading-weight) !important;
  letter-spacing: var(--fp-heading-letter-spacing) !important;
}

h1:not([class*="text-"]),
h2:not([class*="text-"]),
.fp-section-title:not([class*="text-"]),
.fp-heading:not([class*="text-"]) {
  color: var(--fp-heading-color);
}

@media (min-width: 640px) {
  h1,
  h2,
  .fp-section-title,
  .fp-heading {
    font-size: var(--fp-heading-size-desktop) !important;
    line-height: var(--fp-heading-line-height-desktop) !important;
  }
}

.fp-card-title,
.fp-title {
  font-family: var(--fp-heading-family);
  font-size: var(--fp-title-size) !important;
  line-height: var(--fp-title-line-height) !important;
  font-style: var(--fp-title-style) !important;
  font-weight: var(--fp-title-weight) !important;
  letter-spacing: var(--fp-title-letter-spacing) !important;
}

.fp-card-title:not([class*="text-"]),
.fp-title:not([class*="text-"]) {
  color: var(--fp-heading-color);
}

.fp-card-heading-compact {
  font-family: var(--fp-heading-family);
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-style: var(--fp-heading-style) !important;
  font-weight: var(--fp-heading-weight) !important;
  letter-spacing: var(--fp-heading-letter-spacing) !important;
}

.fp-card-heading-compact:not([class*="text-"]) {
  color: var(--fp-heading-color);
}

.fp-section-title-42 {
  font-family: var(--fp-heading-family);
  font-size: 36px !important;
  line-height: 1.1 !important;
  font-style: var(--fp-heading-style) !important;
  font-weight: var(--fp-heading-weight) !important;
  letter-spacing: var(--fp-heading-letter-spacing) !important;
}

.fp-section-title-42:not([class*="text-"]) {
  color: var(--fp-heading-color);
}

@media (min-width: 640px) {
  .fp-section-title-42 {
    font-size: 42px !important;
    line-height: 1.08 !important;
  }
}

.fp-body-copy,
.fp-description {
  font-family: var(--fp-heading-family);
  font-size: var(--fp-description-size) !important;
  line-height: var(--fp-description-line-height) !important;
  font-style: var(--fp-description-style) !important;
  font-weight: var(--fp-description-weight) !important;
}

.fp-body-copy:not([class*="text-"]),
.fp-description:not([class*="text-"]) {
  color: var(--fp-description-color);
}

.fp-pricing-feature-copy,
.fp-pricing-feature-copy * {
  color: #ffffff !important;
}

.fp-btn-primary,
.fp-btn-secondary,
.fp-btn-dark,
.fp-btn-dark-outline,
.fp-pill-active,
.fp-pill-accent,
.fp-badge-brand,
.fp-badge-accent {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease;
}

.fp-btn-primary {
  border: 1px solid transparent !important;
  background: var(--fp-brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px -18px var(--fp-brand-primary-shadow) !important;
}

.fp-btn-primary:hover,
.fp-btn-primary:focus-visible {
  background: var(--fp-brand-primary-hover) !important;
  box-shadow: 0 18px 34px -18px var(--fp-brand-primary-shadow-strong) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

.fp-btn-secondary {
  border: 1px solid var(--fp-brand-soft-border) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--fp-brand-deep) !important;
  box-shadow: 0 12px 24px -20px var(--fp-brand-deep-shadow) !important;
}

.fp-btn-secondary:hover,
.fp-btn-secondary:focus-visible {
  border-color: var(--fp-brand-primary) !important;
  background: var(--fp-brand-soft) !important;
  color: var(--fp-brand-primary-hover) !important;
  outline: none;
}

.fp-btn-dark {
  border: 1px solid transparent !important;
  background: var(--fp-brand-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -18px rgba(16, 23, 55, 0.45) !important;
}

.fp-btn-dark:hover,
.fp-btn-dark:focus-visible {
  background: var(--fp-brand-deep) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

.fp-btn-dark-outline {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.fp-btn-dark-outline:hover,
.fp-btn-dark-outline:focus-visible {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  outline: none;
}

.fp-pill-active {
  border-color: transparent !important;
  background: var(--fp-brand-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px -18px rgba(16, 23, 55, 0.42) !important;
}

.fp-pill-active:hover,
.fp-pill-active:focus-visible {
  background: var(--fp-brand-deep) !important;
  color: #ffffff !important;
  outline: none;
}

.fp-pill-accent {
  border-color: transparent !important;
  background: var(--fp-brand-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px -18px rgba(23, 195, 230, 0.4) !important;
}

.fp-pill-accent:hover,
.fp-pill-accent:focus-visible {
  background: var(--fp-brand-accent-hover) !important;
  color: #ffffff !important;
  outline: none;
}

.fp-badge-brand {
  background: var(--fp-brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px -16px var(--fp-brand-primary-shadow) !important;
}

.fp-badge-accent {
  background: var(--fp-brand-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px -16px rgba(23, 195, 230, 0.4) !important;
}

.fp-support-cta-action {
  display: inline-flex;
  min-width: 190px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 16px 28px;
  font-family: var(--fp-heading-family);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.22);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.fp-support-cta-action:hover,
.fp-support-cta-action:focus-visible {
  border-color: transparent;
  background: var(--fp-brand-primary);
  color: #ffffff;
  box-shadow: 0 18px 32px -20px var(--fp-brand-primary-shadow-strong);
  transform: scale(1.02);
  outline: none;
}