/**
 * PA-44B: Evergreen component foundation.
 *
 * Purpose:
 * - Start extracting homepage-inspired evergreen styling into reusable
 *   ika-evergreen-* components.
 * - Keep page-specific CSS in charge of layout, backgrounds, and one-off surfaces.
 * - Provide the first small implementation for Pricing / Membership feature/path cards.
 */

body.ika-evergreen-route {
  --ika-evergreen-heading-font: var(--ika-font-heading, "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --ika-evergreen-body-font: var(--ika-font-body, "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --ika-evergreen-blue: #2563b8;
  --ika-evergreen-blue-soft: rgba(37, 99, 184, 0.11);
  --ika-evergreen-blue-border: rgba(37, 99, 184, 0.18);
  --ika-evergreen-gold: #f0c64d;
  --ika-evergreen-gold-ink: #31445e;
  --ika-evergreen-card-title: clamp(1.02rem, 0.42vw + 0.96rem, 1.16rem);
  --ika-evergreen-card-title-line: 1.2;
  --ika-evergreen-card-text: clamp(0.94rem, 0.20vw + 0.91rem, 1rem);
  --ika-evergreen-card-text-line: 1.58;
  --ika-evergreen-eyebrow-size: clamp(0.72rem, 0.22vw + 0.68rem, 0.82rem);
  --ika-evergreen-eyebrow-track: 0.16em;
  --ika-evergreen-eyebrow-gap: 10px;
}


/* PA-44C: Shared evergreen heading primitives.
   These borrow the approved homepage typography scale without loading homepage CSS
   on evergreen routes. Page-specific CSS remains responsible for layout/imagery. */
body.ika-evergreen-route {
  /* PA-44D3: copied from the effective homepage typography rules.
     Source of truth after PA-41 parity:
     body.ika-homepage .ika-home-hero__title = clamp(2.02rem, 4.35vw, 3.45rem), line-height 1, weight 500, tracking -0.038em.
     body.ika-homepage .ika-home-section-heading__title = clamp(1.72rem, 3.18vw, 2.66rem), line-height 1.06, weight 500. */
  --ika-evergreen-hero-title-size: clamp(2.02rem, 4.35vw, 3.45rem);
  --ika-evergreen-hero-title-line: 1;
  --ika-evergreen-hero-title-weight: 600;
  --ika-evergreen-hero-title-track: -0.038em;
  --ika-evergreen-section-title-size: clamp(1.72rem, 3.18vw, 2.66rem);
  --ika-evergreen-section-title-line: 1.06;
  --ika-evergreen-section-title-weight: 600;
  --ika-evergreen-section-title-track: -0.035em;
  --ika-evergreen-section-title-panel-size: clamp(1.66rem, 3vw, 2.42rem);
}

.ika-evergreen-hero-title {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-hero-title-size) !important;
  line-height: var(--ika-evergreen-hero-title-line) !important;
  font-weight: var(--ika-evergreen-hero-title-weight) !important;
  letter-spacing: var(--ika-evergreen-hero-title-track) !important;
  text-wrap: balance;
}

.ika-evergreen-section-title {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-section-title-size) !important;
  line-height: var(--ika-evergreen-section-title-line) !important;
  font-weight: var(--ika-evergreen-section-title-weight) !important;
  letter-spacing: var(--ika-evergreen-section-title-track) !important;
  text-wrap: balance;
}

.ika-evergreen-section-title--light {
  color: #f4f8ff !important;
}

/* Pricing page currently carries both page-specific classes and shared
   ika-evergreen-* heading classes. Keep these contexts aligned with the
   homepage panel/closing heading scale while the rest of the evergreen
   templates are migrated one page at a time. */
body.ika-evergreen-route .ika-pricing-panel .ika-evergreen-section-title,
body.ika-evergreen-route .ika-pricing-now-panel .ika-evergreen-section-title,
body.ika-evergreen-route .ika-pricing-closing-card .ika-evergreen-section-title {
  font-size: var(--ika-evergreen-section-title-panel-size) !important;
}

@media (max-width: 900px) {
  body.ika-evergreen-route {
    --ika-evergreen-hero-title-size: clamp(2.02rem, 7vw, 3.05rem);
    --ika-evergreen-section-title-size: clamp(1.68rem, 5.2vw, 2.38rem);
    --ika-evergreen-section-title-panel-size: clamp(1.62rem, 5vw, 2.26rem);
  }
}

@media (max-width: 640px) {
  body.ika-evergreen-route {
    --ika-evergreen-hero-title-size: clamp(1.92rem, 9vw, 2.72rem);
    --ika-evergreen-hero-title-line: 1.02;
    --ika-evergreen-section-title-size: clamp(1.58rem, 7.2vw, 2.12rem);
    --ika-evergreen-section-title-panel-size: clamp(1.54rem, 7vw, 2.02rem);
    --ika-evergreen-section-title-line: 1.06;
  }
}

.ika-evergreen-eyebrow,
.ika-evergreen-card__eyebrow,
.ika-evergreen-pill,
.ika-evergreen-chip {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-eyebrow-size) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: var(--ika-evergreen-eyebrow-track) !important;
  text-transform: uppercase !important;
}

.ika-evergreen-eyebrow,
.ika-evergreen-card__eyebrow {
  display: block;
  margin: 0 0 var(--ika-evergreen-eyebrow-gap) !important;
  color: var(--ika-evergreen-blue) !important;
}

.ika-evergreen-eyebrow--gold,
.ika-evergreen-card__eyebrow--gold {
  color: var(--ika-evergreen-gold) !important;
}

.ika-evergreen-pill,
.ika-evergreen-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ika-evergreen-blue) !important;
  background: var(--ika-evergreen-blue-soft);
  border: 1px solid var(--ika-evergreen-blue-border);
}

.ika-evergreen-pill--gold,
.ika-evergreen-chip--gold {
  color: var(--ika-evergreen-gold) !important;
  background: linear-gradient(135deg, #f7d76b 0%, #e4b53c 100%);
  border-color: rgba(193, 142, 31, 0.34);
}

.ika-evergreen-card__title {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-card-title) !important;
  line-height: var(--ika-evergreen-card-title-line) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  margin: 0 !important;
  text-wrap: balance;
}

.ika-evergreen-card__text {
  font-family: var(--ika-evergreen-body-font) !important;
  font-size: var(--ika-evergreen-card-text) !important;
  line-height: var(--ika-evergreen-card-text-line) !important;
  margin: 0 !important;
}

.ika-evergreen-card:where(:hover, :focus-within) .ika-evergreen-card__eyebrow,
a.ika-evergreen-card:where(:hover, :focus) .ika-evergreen-card__eyebrow {
  color: #1c4f99 !important;
}

/* PA-44A bridge: preserve accepted evergreen eyebrow/pill standards while
   moving them out of the broad parity file and into this component layer. */
body.ika-evergreen-route :is(
  .ika-start-eyebrow,
  .ika-start-card__eyebrow,
  .ika-start-link-card__eyebrow,
  .ika-start-step-card__eyebrow,
  .ika-hiw-eyebrow,
  .ika-hiw-chip,
  .ika-hiw-step-card__eyebrow,
  .ika-hiw-link-card__eyebrow,
  .ika-about-eyebrow,
  .ika-about-chip,
  .ika-about-card__eyebrow,
  .ika-foundations-eyebrow,
  .ika-foundations-chip,
  .ika-foundations-card__eyebrow,
  .ika-foundations-step-card__eyebrow,
  .ika-pricing-eyebrow,
  .ika-pricing-chip,
  .ika-pricing-hero-card__eyebrow,
  .ika-pricing-note-card__eyebrow,
  .ika-pricing-tier-card__label,
  .ika-pricing-tier-card__status,
  .ika-pricing-feature-card__eyebrow,
  .ika-pricing-path-card__eyebrow,
  .ika-faq-eyebrow,
  .ika-faq-chip,
  .ika-faq-card__eyebrow,
  .ika-contact-eyebrow,
  .ika-contact-chip,
  .ika-contact-card__eyebrow,
  .ika-privacy-eyebrow,
  .ika-terms-eyebrow,
  .ika-cookie-eyebrow,
  .ika-disclaimer-eyebrow,
  .ika-content-page-shell__eyebrow
) {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-eyebrow-size) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: var(--ika-evergreen-eyebrow-track) !important;
  text-transform: uppercase !important;
}

body.ika-evergreen-route :is(
  .ika-pricing-chip,
  .ika-start-chip,
  .ika-hiw-chip,
  .ika-about-chip,
  .ika-foundations-chip,
  .ika-faq-chip,
  .ika-contact-chip
) {
  min-height: 30px;
  padding: 7px 12px;
}

/* First implementation: Pricing / Membership feature and path cards now use
   the shared card title/body scale while keeping their existing layout/colors. */
body.ika-pricing-page-template .ika-pricing-feature-card.ika-evergreen-card,
body.ika-pricing-page-template .ika-pricing-path-card.ika-evergreen-card {
  gap: 12px;
}

body.ika-pricing-page-template .ika-pricing-feature-card.ika-evergreen-card .ika-evergreen-card__eyebrow,
body.ika-pricing-page-template .ika-pricing-path-card.ika-evergreen-card .ika-evergreen-card__eyebrow {
  margin: 0 0 8px !important;
}

body.ika-pricing-page-template .ika-pricing-feature-card.ika-evergreen-card .ika-evergreen-card__title,
body.ika-pricing-page-template .ika-pricing-path-card.ika-evergreen-card .ika-evergreen-card__title {
  font-size: var(--ika-evergreen-card-title) !important;
  line-height: var(--ika-evergreen-card-title-line) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  margin: 0 !important;
}

body.ika-pricing-page-template .ika-pricing-feature-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-pricing-page-template .ika-pricing-path-card.ika-evergreen-card .ika-evergreen-card__text {
  font-size: var(--ika-evergreen-card-text) !important;
  line-height: var(--ika-evergreen-card-text-line) !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  body.ika-evergreen-route {
    --ika-evergreen-eyebrow-size: 0.72rem;
    --ika-evergreen-card-title: 1.04rem;
    --ika-evergreen-card-text: 0.96rem;
  }

  .ika-evergreen-pill,
  .ika-evergreen-chip,
  body.ika-evergreen-route :is(
    .ika-pricing-chip,
    .ika-start-chip,
    .ika-hiw-chip,
    .ika-about-chip,
    .ika-foundations-chip,
    .ika-faq-chip,
    .ika-contact-chip
  ) {
    min-height: 28px;
    padding: 6px 10px;
    letter-spacing: 0.13em !important;
  }
}

/* PA-44C: Canonical evergreen hero + section-heading reset.
   This is the first real component-normalization pass: Pricing/Membership
   now uses the same hero/title anatomy as the homepage instead of trying to
   approximate it through page-specific heading overrides. */
body.ika-evergreen-route {
  --ika-evergreen-home-white: #ffffff;
  --ika-evergreen-home-gold: #ffd373;
  --ika-evergreen-home-blue: #1e5bbf;
  --ika-evergreen-home-ink: #17325a;
  --ika-evergreen-home-copy: #4f6b90;
  --ika-evergreen-home-copy-light: #d7e6f8;
}

.ika-evergreen-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ika-evergreen-hero__title {
  margin: 0;
  max-width: 760px;
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: clamp(2.02rem, 4.35vw, 3.45rem) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.038em !important;
  color: var(--ika-evergreen-home-white) !important;
  text-wrap: balance;
}

.ika-evergreen-hero__title span {
  display: block;
  color: var(--ika-evergreen-home-gold) !important;
}

.ika-evergreen-section-heading {
  max-width: 1040px;
}

.ika-evergreen-section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ika-evergreen-section-heading__eyebrow {
  display: block;
  margin: 0 !important;
  color: var(--ika-evergreen-home-blue) !important;
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: clamp(0.72rem, 0.76vw, 0.8rem) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.ika-evergreen-section-heading__eyebrow--gold,
.ika-evergreen-section-heading--light .ika-evergreen-section-heading__eyebrow {
  color: var(--ika-evergreen-home-gold) !important;
}

.ika-evergreen-section-heading__title {
  margin: 14px 0 0 !important;
  max-width: 920px;
  color: var(--ika-evergreen-home-ink) !important;
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: clamp(1.72rem, 3.18vw, 2.66rem) !important;
  line-height: 1.06 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

.ika-evergreen-section-heading--center .ika-evergreen-section-heading__title,
.ika-evergreen-section-heading--center .ika-evergreen-section-heading__copy {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ika-evergreen-section-heading__title--light,
.ika-evergreen-section-heading--light .ika-evergreen-section-heading__title {
  color: var(--ika-evergreen-home-white) !important;
}

.ika-evergreen-section-heading__copy {
  margin: 18px 0 0 !important;
  max-width: 920px;
  color: var(--ika-evergreen-home-copy) !important;
  font-family: var(--ika-evergreen-body-font) !important;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem) !important;
  line-height: 1.66 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.ika-evergreen-section-heading__copy--light,
.ika-evergreen-section-heading--light .ika-evergreen-section-heading__copy {
  color: var(--ika-evergreen-home-copy-light) !important;
}

/* Pricing/Membership bridge: make the first migrated evergreen hero use the
   homepage's cinematic title treatment while preserving the existing pricing
   cards and lower page layout. */
body.ika-pricing-page-template .ika-evergreen-hero--pricing {
  padding: clamp(74px, 7.4vw, 112px) 0 clamp(50px, 5.6vw, 76px) !important;
  background: #071a31;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__bg {
  opacity: 1 !important;
  filter: brightness(0.76) contrast(1.06) saturate(1.03) !important;
  transform: scale(1.03) !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__overlay {
  background:
    linear-gradient(90deg, rgba(5, 15, 29, 0.92) 0%, rgba(6, 18, 34, 0.82) 34%, rgba(8, 23, 43, 0.56) 58%, rgba(8, 23, 43, 0.34) 100%),
    linear-gradient(180deg, rgba(5, 12, 23, 0.38) 0%, rgba(5, 12, 23, 0.14) 52%, rgba(5, 12, 23, 0.48) 100%) !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__inner {
  align-items: center !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.72fr) !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__copy {
  max-width: 920px !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__chips {
  margin-bottom: 18px !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-evergreen-chip {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(98, 169, 242, 0.18) !important;
  color: #cfe4ff !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-evergreen-chip--gold {
  background: rgba(255, 211, 115, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--ika-evergreen-home-gold) !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__lede {
  margin-top: 16px !important;
  max-width: 720px !important;
  width: min(100%, 720px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ika-evergreen-home-copy-light) !important;
  font-family: var(--ika-evergreen-body-font) !important;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem) !important;
  line-height: 1.66 !important;
  text-shadow: none !important;
}

body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__lede::before {
  content: none !important;
}

/* The pricing page's larger white hero cards remain as-is, but get a little
   more separation from the darker cinematic background. */
body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__cards .ika-pricing-hero-card {
  box-shadow: 0 22px 44px rgba(2, 10, 22, 0.22) !important;
}

/* Panel sections on Pricing are intentionally a touch smaller, matching the
   homepage's panel-specific section heading rule. */
body.ika-pricing-page-template .ika-pricing-panel .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-now-panel .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-closing-card .ika-evergreen-section-heading__title {
  font-size: clamp(1.66rem, 3vw, 2.42rem) !important;
}

body.ika-pricing-page-template .ika-pricing-panel .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-now-panel .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-closing-card .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-split .ika-evergreen-section-heading__title,
body.ika-pricing-page-template .ika-pricing-heading--center .ika-evergreen-section-heading__title {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}

@media (max-width: 1024px) {
  body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .ika-evergreen-hero__title {
    max-width: 620px;
    font-size: clamp(1.88rem, 7.4vw, 2.85rem) !important;
  }

  body.ika-pricing-page-template .ika-evergreen-hero--pricing {
    padding: clamp(58px, 8vw, 78px) 0 clamp(36px, 6vw, 52px) !important;
  }
}

@media (max-width: 640px) {
  .ika-evergreen-hero__title {
    font-size: clamp(1.72rem, 9.1vw, 2.42rem) !important;
    line-height: 1.02 !important;
  }

  .ika-evergreen-section-heading__title,
  body.ika-pricing-page-template .ika-pricing-panel .ika-evergreen-section-heading__title,
  body.ika-pricing-page-template .ika-pricing-now-panel .ika-evergreen-section-heading__title,
  body.ika-pricing-page-template .ika-pricing-closing-card .ika-evergreen-section-heading__title {
    font-size: clamp(1.54rem, 7.2vw, 2.08rem) !important;
  }

  .ika-evergreen-section-heading__copy,
  body.ika-pricing-page-template .ika-evergreen-hero--pricing .ika-pricing-hero__lede {
    font-size: 0.98rem !important;
  }
}

/* PA-44C follow-up: restore Pricing/Membership hero visual treatment.
   The Pricing hero keeps the shared heading scale, but the original page-specific
   background overlay, navy text color, chips, intro card, and hero cards remain
   owned by pricing-membership-page.css. */
body.ika-pricing-page-template .ika-pricing-hero .ika-evergreen-hero-title {
  color: var(--ika-pricing-heading) !important;
  font-weight: 600 !important;
}

body.ika-pricing-page-template .ika-pricing-hero .ika-pricing-hero__lede {
  color: #0b1d33 !important;
}

body.ika-pricing-page-template .ika-pricing-heading .ika-evergreen-section-heading__title {
  font-weight: 600 !important;
}

/* PA-44D Batch 1A: extend the Pricing/Membership evergreen heading scale
   to the first migrated evergreen templates while preserving page layouts,
   backgrounds, cards, and body copy structure. */
body.ika-evergreen-route :is(
  .ika-about-panel,
  .ika-about-closing-card,
  .ika-start-panel,
  .ika-start-closing-card,
  .ika-foundations-panel,
  .ika-foundations-closing-card
) .ika-evergreen-section-heading__title {
  font-size: clamp(1.66rem, 3vw, 2.42rem) !important;
}

body.ika-evergreen-route :is(
  .ika-about-hero,
  .ika-start-hero,
  .ika-foundations-hero
) .ika-evergreen-hero-title {
  color: var(--ika-pricing-heading, #17325a) !important;
  font-weight: var(--ika-evergreen-hero-title-weight) !important;
}

@media (max-width: 640px) {
  body.ika-evergreen-route :is(
    .ika-about-panel,
    .ika-about-closing-card,
    .ika-start-panel,
    .ika-start-closing-card,
    .ika-foundations-panel,
    .ika-foundations-closing-card
  ) .ika-evergreen-section-heading__title {
    font-size: clamp(1.54rem, 7.2vw, 2.08rem) !important;
  }
}

/* PA-44E Batch 1B: extend the approved evergreen heading scale to
   How It Works, FAQ, and Contact while preserving page-specific layouts,
   backgrounds, cards, forms, and body copy structure. */
body.ika-evergreen-route :is(
  .ika-hiw-panel,
  .ika-hiw-sidebar-card,
  .ika-hiw-closing-card,
  .ika-faq-panel,
  .ika-faq-closing-card,
  .ika-contact-panel,
  .ika-contact-closing-card
) .ika-evergreen-section-heading__title {
  font-size: clamp(1.66rem, 3vw, 2.42rem) !important;
}

body.ika-evergreen-route :is(
  .ika-hiw-hero,
  .ika-faq-hero,
  .ika-contact-hero
) .ika-evergreen-hero-title {
  color: var(--ika-pricing-heading, #17325a) !important;
  font-weight: var(--ika-evergreen-hero-title-weight) !important;
}

@media (max-width: 640px) {
  body.ika-evergreen-route :is(
    .ika-hiw-panel,
    .ika-hiw-sidebar-card,
    .ika-hiw-closing-card,
    .ika-faq-panel,
    .ika-faq-closing-card,
    .ika-contact-panel,
    .ika-contact-closing-card
  ) .ika-evergreen-section-heading__title {
    font-size: clamp(1.54rem, 7.2vw, 2.08rem) !important;
  }
}

/* ========================================================================== 
   PA-44F: Legal evergreen heading standardization
   Purpose:
   - Keep legal/document pages visually document-like while making their hero
     and primary section headings consistent with one another.
   - Load after page-specific legal styles so this becomes the shared legal
     heading source of truth without touching legal content or layout.
   ========================================================================== */
body.ika-evergreen-route {
  --ika-evergreen-legal-hero-title-size: var(--ika-evergreen-hero-title-size);
  --ika-evergreen-legal-hero-title-line: var(--ika-evergreen-hero-title-line);
  --ika-evergreen-legal-hero-title-weight: var(--ika-evergreen-hero-title-weight);
  --ika-evergreen-legal-hero-title-track: var(--ika-evergreen-hero-title-track);
  --ika-evergreen-legal-section-title-size: var(--ika-evergreen-section-title-size);
  --ika-evergreen-legal-section-title-line: var(--ika-evergreen-section-title-line);
  --ika-evergreen-legal-section-title-weight: var(--ika-evergreen-section-title-weight);
  --ika-evergreen-legal-section-title-track: var(--ika-evergreen-section-title-track);
  --ika-evergreen-legal-panel-title-size: var(--ika-evergreen-section-title-panel-size);
}

body:is(
  .ika-privacy-policy-page-template,
  .ika-terms-of-service-page-template,
  .ika-cookie-page-template,
  .ika-disclaimer-page-template,
  .ika-accessibility-policy-page-template
) :is(
  .ika-privacy-hero__title,
  .ika-terms-hero__title,
  .ika-cookie-hero__title,
  .ika-disclaimer-hero__title
) {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-legal-hero-title-size) !important;
  line-height: var(--ika-evergreen-legal-hero-title-line) !important;
  font-weight: var(--ika-evergreen-legal-hero-title-weight) !important;
  letter-spacing: var(--ika-evergreen-legal-hero-title-track) !important;
  max-width: 14ch !important;
  text-wrap: balance;
}

body:is(
  .ika-privacy-policy-page-template,
  .ika-terms-of-service-page-template,
  .ika-cookie-page-template,
  .ika-disclaimer-page-template,
  .ika-accessibility-policy-page-template
) :is(
  .ika-privacy-title,
  .ika-terms-title,
  .ika-cookie-title,
  .ika-disclaimer-title
) {
  font-family: var(--ika-evergreen-heading-font) !important;
  font-size: var(--ika-evergreen-legal-section-title-size) !important;
  line-height: var(--ika-evergreen-legal-section-title-line) !important;
  font-weight: var(--ika-evergreen-legal-section-title-weight) !important;
  letter-spacing: var(--ika-evergreen-legal-section-title-track) !important;
  text-wrap: balance;
}

body:is(
  .ika-privacy-policy-page-template,
  .ika-terms-of-service-page-template,
  .ika-cookie-page-template,
  .ika-disclaimer-page-template,
  .ika-accessibility-policy-page-template
) :is(
  .ika-privacy-panel,
  .ika-privacy-closing-card,
  .ika-terms-panel,
  .ika-terms-closing-card,
  .ika-cookie-panel,
  .ika-cookie-closing-card,
  .ika-disclaimer-panel,
  .ika-disclaimer-closing-card
) :is(
  .ika-privacy-title,
  .ika-terms-title,
  .ika-cookie-title,
  .ika-disclaimer-title
) {
  font-size: var(--ika-evergreen-legal-panel-title-size) !important;
}

@media (max-width: 1024px) {
  body:is(
    .ika-privacy-policy-page-template,
    .ika-terms-of-service-page-template,
    .ika-cookie-page-template,
    .ika-disclaimer-page-template,
    .ika-accessibility-policy-page-template
  ) :is(
    .ika-privacy-hero__title,
    .ika-terms-hero__title,
    .ika-cookie-hero__title,
    .ika-disclaimer-hero__title
  ) {
    max-width: 16ch !important;
  }
}

/* ========================================================================== 
   PA-45: Evergreen card + padding primitives, batch 1
   Purpose:
   - Standardize repeated card spacing/title/body rhythm on Start Here,
     How It Works, and Contact without redesigning page layouts.
   - Page-specific classes still own colors, borders, backgrounds, and grid layout.
   ========================================================================== */
body.ika-evergreen-route {
  --ika-evergreen-card-padding: clamp(1.45rem, 1vw + 1.15rem, 2rem);
  --ika-evergreen-card-padding-compact: clamp(1.25rem, 0.75vw + 1rem, 1.65rem);
  --ika-evergreen-card-title-gap: 0.78rem;
  --ika-evergreen-card-eyebrow-gap: 0.72rem;
  --ika-evergreen-card-number-gap: 1rem;
}

body:is(
  .ika-start-here-page-template,
  .ika-how-it-works-page-template,
  .ika-contact-page-template
) .ika-evergreen-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body:is(
  .ika-start-here-page-template,
  .ika-how-it-works-page-template,
  .ika-contact-page-template
) :is(
  .ika-start-card-grid.ika-start-card-grid--three > .ika-evergreen-card,
  .ika-start-steps-grid > .ika-evergreen-card,
  .ika-hiw-step-grid > .ika-evergreen-card,
  .ika-hiw-surface-grid > .ika-evergreen-card,
  .ika-contact-topic-grid > .ika-evergreen-card,
  .ika-contact-expect-grid > .ika-evergreen-card
) {
  min-height: 100%;
  padding: var(--ika-evergreen-card-padding) !important;
}

body:is(
  .ika-start-here-page-template,
  .ika-how-it-works-page-template,
  .ika-contact-page-template
) .ika-evergreen-card :is(
  .ika-evergreen-card__eyebrow,
  .ika-start-step-card__number,
  .ika-hiw-step-card__number,
  .ika-contact-expect-card__number
) {
  margin: 0 0 var(--ika-evergreen-card-eyebrow-gap) !important;
}

body:is(
  .ika-start-here-page-template,
  .ika-how-it-works-page-template,
  .ika-contact-page-template
) .ika-evergreen-card :is(.ika-evergreen-card__title) {
  margin: 0 0 var(--ika-evergreen-card-title-gap) !important;
}

body:is(
  .ika-start-here-page-template,
  .ika-how-it-works-page-template,
  .ika-contact-page-template
) .ika-evergreen-card :is(.ika-evergreen-card__text) {
  margin: 0 !important;
  max-width: 36ch;
}

body.ika-start-here-page-template .ika-start-card-grid.ika-start-card-grid--three > .ika-evergreen-card .ika-evergreen-card__text,
body.ika-start-here-page-template .ika-start-steps-grid > .ika-evergreen-card .ika-evergreen-card__text,
body.ika-contact-page-template .ika-contact-topic-grid > .ika-evergreen-card .ika-evergreen-card__text,
body.ika-contact-page-template .ika-contact-expect-grid > .ika-evergreen-card .ika-evergreen-card__text {
  line-height: var(--ika-evergreen-card-text-line) !important;
}

body.ika-how-it-works-page-template .ika-hiw-step-grid > .ika-evergreen-card .ika-hiw-step-card__number,
body.ika-contact-page-template .ika-contact-expect-grid > .ika-evergreen-card .ika-contact-expect-card__number {
  margin-bottom: var(--ika-evergreen-card-number-gap) !important;
}

@media (max-width: 767px) {
  body.ika-evergreen-route {
    --ika-evergreen-card-padding: var(--ika-evergreen-card-padding-compact);
    --ika-evergreen-card-title-gap: 0.68rem;
    --ika-evergreen-card-eyebrow-gap: 0.62rem;
  }
}

/* ========================================================================== 
   PA-45B: Contact page card/pill QA fixes
   Purpose:
   - Keep the backup email link on the approved evergreen blue instead of the
     browser/theme alert-red link color.
   - Preserve the Contact "What this page is for" card labels as compact pills
     after the shared evergreen card eyebrow migration.
   ========================================================================== */
body.ika-contact-page-template .ika-contact-reach-copy .ika-contact-copy a {
  color: var(--ika-evergreen-blue) !important;
  font-weight: 700;
  text-decoration-color: rgba(30, 91, 191, 0.35);
  text-underline-offset: 0.16em;
}

body.ika-contact-page-template .ika-contact-reach-copy .ika-contact-copy a:hover,
body.ika-contact-page-template .ika-contact-reach-copy .ika-contact-copy a:focus {
  color: #174da6 !important;
  text-decoration-color: rgba(23, 77, 166, 0.7);
}

body.ika-contact-page-template .ika-contact-topic-grid > .ika-evergreen-card .ika-contact-topic-card__eyebrow.ika-evergreen-card__eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 7px 13px !important;
  margin: 0 0 var(--ika-evergreen-card-eyebrow-gap) !important;
  border-radius: 999px;
  background: rgba(30, 91, 191, 0.08);
  border: 1px solid rgba(30, 91, 191, 0.12);
  line-height: 1 !important;
  white-space: nowrap;
}

/* ========================================================================== 
   PA-45C: Evergreen card + padding primitives, batch 2
   Purpose:
   - Extend the approved card spacing/title/body rhythm to About,
     Foundations, and FAQ without changing page layouts, imagery, or colors.
   - Keep page-specific CSS in charge of card surfaces and grid behavior.
   ========================================================================== */
body:is(
  .ika-about-page-template,
  .ika-foundations-page-template,
  .ika-faq-page-template
) .ika-evergreen-card {
  box-sizing: border-box;
  min-height: 100%;
}

body:is(
  .ika-about-page-template,
  .ika-foundations-page-template,
  .ika-faq-page-template
) :is(
  .ika-about-story-card.ika-evergreen-card,
  .ika-about-feature-card.ika-evergreen-card,
  .ika-about-audience-item.ika-evergreen-card,
  .ika-foundations-intro-card.ika-evergreen-card,
  .ika-foundations-feature-card.ika-evergreen-card,
  .ika-foundations-step-card.ika-evergreen-card,
  .ika-foundations-fit-card.ika-evergreen-card,
  .ika-foundations-mini-card.ika-evergreen-card,
  .ika-faq-signal-card.ika-evergreen-card,
  .ika-faq-jump-card.ika-evergreen-card
) {
  padding: var(--ika-evergreen-card-padding) !important;
}

body.ika-foundations-page-template :is(
  .ika-foundations-feature-card.ika-evergreen-card,
  .ika-foundations-step-card.ika-evergreen-card,
  .ika-foundations-fit-card.ika-evergreen-card,
  .ika-foundations-mini-card.ika-evergreen-card
),
body.ika-faq-page-template :is(
  .ika-faq-signal-card.ika-evergreen-card,
  .ika-faq-jump-card.ika-evergreen-card
) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body:is(
  .ika-about-page-template,
  .ika-foundations-page-template,
  .ika-faq-page-template
) .ika-evergreen-card :is(.ika-evergreen-card__eyebrow) {
  margin: 0 0 var(--ika-evergreen-card-eyebrow-gap) !important;
}

body:is(
  .ika-about-page-template,
  .ika-foundations-page-template,
  .ika-faq-page-template
) .ika-evergreen-card :is(.ika-evergreen-card__title) {
  margin: 0 0 var(--ika-evergreen-card-title-gap) !important;
}

body:is(
  .ika-about-page-template,
  .ika-foundations-page-template,
  .ika-faq-page-template
) .ika-evergreen-card :is(.ika-evergreen-card__text) {
  margin: 0 !important;
  max-width: 38ch;
}

body.ika-about-page-template .ika-about-story-card.ika-evergreen-card .ika-evergreen-card__title {
  font-size: clamp(1.35rem, 1.45vw, 1.85rem) !important;
  line-height: 1.1 !important;
}

body.ika-about-page-template .ika-about-story-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-about-page-template .ika-about-feature-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-about-page-template .ika-about-audience-item.ika-evergreen-card .ika-evergreen-card__text,
body.ika-foundations-page-template .ika-foundations-feature-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-foundations-page-template .ika-foundations-step-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-foundations-page-template .ika-foundations-fit-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-foundations-page-template .ika-foundations-mini-card.ika-evergreen-card .ika-evergreen-card__text,
body.ika-faq-page-template .ika-faq-signal-card.ika-evergreen-card .ika-evergreen-card__text {
  line-height: var(--ika-evergreen-card-text-line) !important;
}

body.ika-faq-page-template .ika-faq-jump-card.ika-evergreen-card .ika-evergreen-card__title {
  line-height: 1.42 !important;
}

body.ika-faq-page-template .ika-faq-signal-card.ika-evergreen-card .ika-faq-signal-card__label.ika-evergreen-card__eyebrow {
  color: #c08a16 !important;
}

body.ika-foundations-page-template .ika-foundations-step-card.ika-evergreen-card .ika-foundations-step-card__number.ika-evergreen-card__eyebrow {
  width: fit-content;
}

/* ========================================================================== 
   PA-45D: Foundations "Where this can lead later" card layout micro-fix
   Purpose:
   - Keep the approved Foundations section styling while giving the three
     downstream path cards enough room to breathe.
   - Make the intro copy a full-width row and place the cards beneath it on
     desktop, with a safe one-column stack on smaller screens.
   ========================================================================== */
body.ika-foundations-page-template .ika-foundations-later-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

body.ika-foundations-page-template .ika-foundations-later-copy {
  max-width: 760px;
}

body.ika-foundations-page-template .ika-foundations-later-cards {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.ika-foundations-page-template .ika-foundations-later-cards .ika-foundations-mini-card.ika-evergreen-card {
  min-width: 0;
}

body.ika-foundations-page-template .ika-foundations-later-cards .ika-evergreen-card__text {
  max-width: 42ch;
}

@media (max-width: 820px) {
  body.ika-foundations-page-template .ika-foundations-later-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================== 
   PA-46: Foundations non-link mini-card hover closeout
   Purpose: The "Where this can lead later" mini cards are informational, not
   links. Keep the gold label stable when the card is hovered/focused so the
   section does not imply clickability.
   ========================================================================== */
body.ika-foundations-page-template .ika-foundations-later-cards .ika-foundations-mini-card.ika-evergreen-card:where(:hover, :focus-within) .ika-foundations-mini-card__eyebrow.ika-evergreen-card__eyebrow,
body.ika-foundations-page-template .ika-foundations-later-cards .ika-foundations-mini-card.ika-evergreen-card:where(:hover, :focus-within) .ika-foundations-mini-card__eyebrow.ika-evergreen-card__eyebrow--gold {
  color: var(--ika-evergreen-gold) !important;
}