/**
 * CYN Standard Typography
 * Headings (h1/h2 + section titles): 42px / weight 600
 * Body / descriptions: 17px / weight 600
 * Excludes: founder page, homepage #founder block, nav, footer, UI chrome
 */

:root {
  --cyn-heading-size: 42px;
  --cyn-body-size: 17px;
  --cyn-font-weight: 600;
  --cyn-leading-heading: 1.2;
  --cyn-leading-body: 1.55;
}

/* ── Base ── */
body:not(.founder-page) {
  font-size: var(--cyn-body-size);
  font-weight: var(--cyn-font-weight);
  line-height: var(--cyn-leading-body);
}

/* ── Primary headings (h1 / h2 / known title classes) ── */
/* Home hero (#top .hero-title) excluded — keeps original large ALL CAPS stack */
body:not(.founder-page) :is(h1, h2).font-display:not(.hero-title),
body:not(.founder-page) h1:not(header h1):not(footer h1):not(.hero-title),
body:not(.founder-page) h2:not(header h2):not(footer h2),
body:not(.founder-page) .contact-hero-title,
body:not(.founder-page) .contact-hero-title__line,
body:not(.founder-page) .ci-title,
body:not(.founder-page) .home-safety__section-title,
body:not(.founder-page) .cyn-xp__heading,
body:not(.founder-page) .cyn-differentiators__title,
body:not(.founder-page) .safety-principles__title,
body:not(.founder-page) .safety-faq__title {
  font-size: var(--cyn-heading-size) !important;
  font-weight: var(--cyn-font-weight) !important;
  line-height: var(--cyn-leading-heading) !important;
  overflow: visible;
  text-wrap: balance;
}

/* Home hero only: large ALL CAPS — navy + teal (as before) */
body:not(.founder-page) #top .hero-title,
body:not(.founder-page) #top .hero-title > span {
  font-size: clamp(1.35rem, 8.4cqi, 4.25rem) !important;
  font-weight: 700 !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.025em !important;
  text-wrap: unset;
  color: #0E2A38 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0E2A38 !important;
}

@supports not (font-size: 1cqi) {
  body:not(.founder-page) #top .hero-title,
  body:not(.founder-page) #top .hero-title > span {
    font-size: clamp(1.35rem, 5.4vw, 4.25rem) !important;
  }
}

body:not(.founder-page) #top .hero-impact-text {
  color: #5BBFBF !important;
  -webkit-text-fill-color: #5BBFBF !important;
  background: none !important;
}

body:not(.founder-page) #top .eyebrow {
  color: #5BBFBF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* ── Body / supporting copy ── */
/* NOTE: do not use :not(#id) alone with !important — it gains ID specificity
   and overrides more specific class rules (eyebrows, impact labels, etc.). */
body:not(.founder-page) main p:not(.impact-stat-card__label):not(.eyebrow):not(.journey-panel__kicker):not(.home-safety__section-kicker):not(.hiw-flow__kicker),
body:not(.founder-page) main li,
body:not(.founder-page) main blockquote,
body:not(.founder-page) section:not(#founder) p:not(.impact-stat-card__label):not(.eyebrow):not(.journey-panel__kicker):not(.home-safety__section-kicker):not(.hiw-flow__kicker):not(.what-cyn-does__lede):not(.about-intro__lede):not(.home-safety__pointer-text),
body:not(.founder-page) section:not(#founder) li,
body:not(.founder-page) #top .hero-copy > p,
body:not(.founder-page) .home-safety__subtext,
body:not(.founder-page) .cyn-xp__sub,
body:not(.founder-page) .cyn-diff-card__text,
body:not(.founder-page) .cyn-diff-card__title,
body:not(.founder-page) .safety-principles__subtitle,
body:not(.founder-page) .safety-principles__card-text,
body:not(.founder-page) .safety-faq__answer,
body:not(.founder-page) .journey-item p,
body:not(.founder-page) .impact-stat-card__hint,
body:not(.founder-page) .video-story p,
body:not(.founder-page) .x-card__body p,
body:not(.founder-page) section:not(#founder):not(#platform-practices) h3,
body:not(.founder-page) section:not(#founder) .font-display + p,
body:not(.founder-page) section:not(#founder) h3 + p {
  font-size: var(--cyn-body-size);
  font-weight: var(--cyn-font-weight);
  line-height: var(--cyn-leading-body);
}

/* Stronger nested text inherits weight */
body:not(.founder-page) main strong,
body:not(.founder-page) section:not(#founder) strong {
  font-weight: 700;
}

/* ── Founder exclusions (page + homepage block) ── */
body.founder-page :is(h1, h2, h3, p, li, blockquote),
body:not(.founder-page) #founder :is(h1, h2, h3, p, li, blockquote),
body:not(.founder-page) #founder .font-display {
  font-size: unset !important;
  font-weight: unset !important;
  line-height: unset !important;
  text-transform: unset;
}

/* Homepage founder name — locked size/weight (must beat #founder unset above) */
body:not(.founder-page) #founder h2.founder-name-line,
body:not(.founder-page) #founder .founder-name-line,
body:not(.founder-page) #founder .founder-name-line .text-ink,
body:not(.founder-page) #founder .founder-name-line .founder-name-gradient {
  font-size: 46px !important;
  font-weight: 600 !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
}

/* ── UI chrome exclusions ── */
body:not(.founder-page) header :is(a, button, span, p, li),
body:not(.founder-page) footer :is(a, button, span, p, li, .footer-brand-tagline),
body:not(.founder-page) nav :is(a, button, span, p, li),
body:not(.founder-page) .btn-cta,
body:not(.founder-page) .btn-primary,
body:not(.founder-page) .btn-ghost,
body:not(.founder-page) .social-btn,
body:not(.founder-page) .marquee-track,
body:not(.founder-page) .impact-stat-card__value,
body:not(.founder-page) .home-safety__eyebrow,
body:not(.founder-page) .cyn-xp__hint,
body:not(.founder-page) .student-polaroid__name,
body:not(.founder-page) .vision-signal,
body:not(.founder-page) .hero-chip,
body:not(.founder-page) label,
body:not(.founder-page) input,
body:not(.founder-page) textarea,
body:not(.founder-page) select,
body:not(.founder-page) .text-\[10px\],
body:not(.founder-page) .text-\[12px\],
body:not(.founder-page) [data-counter],
body:not(.founder-page) .about-pillar-popover__title {
  font-size: unset !important;
  font-weight: unset !important;
  line-height: unset !important;
}

/* Section eyebrows + kickers — 13px everywhere (marketing) */
html body section:not(#founder) p.journey-panel__kicker,
html body section:not(#founder) p.home-safety__section-kicker,
html body .eyebrow,
html body span.eyebrow,
html body .cyn-eyebrow-13,
html body #about span.eyebrow,
html body.about-immersive .immersive-hero__copy span.eyebrow,
html body #community-impact span.eyebrow,
html body #community-impact .cyn-eyebrow-13,
html body #why-cyn-exists span.eyebrow,
html body #why-cyn-exists .cyn-eyebrow-13,
html body #video-story span.eyebrow,
html body #video-story .cyn-eyebrow-13,
html body #video-story .video-story__eyebrow,
html body .journey-panel__kicker,
html body .home-safety__section-kicker,
html body.founder-page .eyebrow,
html body.about-immersive .eyebrow {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* Impact stat labels — bold black 13px (must beat section p rules) */
html body:not(.founder-page) section:not(#founder) p.impact-stat-card__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.35 !important;
}

/* Impact stat descriptions — 15px */
html body:not(.founder-page) section:not(#founder) p.impact-stat-card__hint {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Homepage subheading context — 16px */
html body:not(.founder-page) #top .hero-copy > p,
html body:not(.founder-page) section:not(#founder) h2 + p:not(.what-cyn-does__lede):not(.about-intro__lede),
html body:not(.founder-page) section:not(#founder) .font-display + p,
html body:not(.founder-page) section:not(#founder) .impact-stats-header > p,
html body:not(.founder-page) section:not(#founder) .ci-lede,
html body:not(.founder-page) section:not(#founder) .x-card__body p,
html body:not(.founder-page) section:not(#founder) .home-safety__subtext,
html body:not(.founder-page) section:not(#founder) .video-story p {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Journey panel item descriptions — 15px */
html body:not(.founder-page) section:not(#founder) .journey-item p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* Home safety pointer cards — title 13px, description 15px */
html body:not(.founder-page) section:not(#founder) .home-safety__pointer-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

html body:not(.founder-page) section:not(#founder) .home-safety__pointer-text {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* Hero What/How/Why cards — label 13px, description 15px */
html body:not(.founder-page) #top .hero-quick-links span {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html body:not(.founder-page) #top .hero-quick-links p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* What CYN Does + About intro — 15px (not 16px subheading) */
html body:not(.founder-page) #what-cyn-does .what-cyn-does__lede,
html body:not(.founder-page) #what-cyn-does h2 + p,
html body:not(.founder-page) #about .about-intro__lede,
html body:not(.founder-page) #about h2 + p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* How It Works step kickers — 14px */
html body:not(.founder-page) section:not(#founder) .hiw-flow__kicker {
  font-size: 14px !important;
}

/* How It Works step descriptions — 15px */
html body:not(.founder-page) section:not(#founder) .hiw-flow__text {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Prevent gradient heading clipping */
body:not(.founder-page) :is(h1, h2).font-display {
  overflow: visible;
  padding-bottom: 0.08em;
}

body:not(.founder-page) .brand-gradient-text {
  padding-bottom: 0.1em;
  padding-right: 0.1em;
}

@media (max-width: 1023px) {
  #community-impact .ci-title {
    white-space: normal;
  }
}

/* Eyebrow / dash section labels — 13px sitewide (homepage excluded) */
body:not(.home-page) .eyebrow,
body:not(.home-page) .fa-hero__eyebrow,
body:not(.home-page) .security-ring__eyebrow {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}
