/* FinThots shared body and interface typography */
:root {
  --type-body: 18px;
  --type-small: 14px;
  --type-caption: 12px;
}

html body {
  font-size: var(--type-body);
  line-height: 1.6;
}

/* Primary descriptive copy */
html body .hero-sub,
html body .page-hero p,
html body .page-band-hero p,
html body .page-band-hero-inner p,
html body .about-hero-copy p,
html body .sec-sub,
html body .section-header p,
html body .about-section-head p,
html body .cta-section p,
html body .cta-band p,
html body .about-final-cta p {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Navigation and actions */
html body .nav .nav-links li a {
  position: relative !important;
  padding: 0 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  background: transparent !important;
  transition: color .22s ease !important;
}

html body .nav .nav-links li a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: #5f9d42;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}

html body .nav .nav-links li a:hover,
html body .nav .nav-links li a:focus-visible,
html body .nav .nav-links li a.active {
  color: #5f9d42 !important;
  background: transparent !important;
}

html body .nav .nav-links li a:hover::after,
html body .nav .nav-links li a:focus-visible::after,
html body .nav .nav-links li a.active::after {
  transform: scaleX(1);
}

html body .mobile-menu a {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html body .mobile-menu ul li a {
  position: relative;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  transition: color .2s ease !important;
}

html body .mobile-menu ul li a:hover,
html body .mobile-menu ul li a:focus-visible {
  color: #5f9d42 !important;
  text-decoration: underline;
  text-decoration-color: #5f9d42;
  text-underline-offset: 4px;
}

@media (min-width: 1181px) {
  html body .nav .nav-links { width: min(620px, 100%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .nav .nav-links li a,
  html body .nav .nav-links li a::after { transition: none !important; }
}

html body button,
html body .btn,
html body .btn-primary,
html body .btn-outline,
html body .btn-amber,
html body .btn-primary-lg,
html body .btn-secondary-lg,
html body .hero-btn-primary,
html body .hero-btn-outline,
html body .nav .nav-cta,
html body .nav-cta,
html body .mobile-cta,
html body .footer-work-btn {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Forms */
html body label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

html body input,
html body textarea,
html body select {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Supporting text */
html body .stat-main-label,
html body .stat-label {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html body .sec-eyebrow,
html body .sec-eyebrow-teal,
html body .sec-eyebrow-amber,
html body .section-eyebrow,
html body .about-kicker,
html body .dark-eyebrow {
  font-size: var(--type-caption) !important;
  line-height: 1.4 !important;
}

/* Footer: 14px and fully white across the site */
html body footer,
html body footer p,
html body footer h4,
html body footer a,
html body footer span,
html body footer label,
html body footer input,
html body footer .footer-contact-row,
html body footer .footer-follow-label,
html body footer .footer-social-btn,
html body footer .footer-copy,
html body footer .footer-legal a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5 !important;
}

html body footer svg { color: #ffffff !important; }
html body footer input::placeholder { color: #ffffff !important; opacity: 1; }

/* About page typography matched to the Home page scale */
html body .about-page .about-hero-copy h1 {
  font-size: 50px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

html body .about-page .about-title,
html body .about-page .about-quote h2 {
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

html body .about-page .about-final-cta h2 {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body .about-page .about-kicker,
html body .about-page .about-intro-heading {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

html body .about-page .about-intro-text p,
html body .about-page .about-section-head p,
html body .about-page .about-quote-note {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

html body .about-page .founder-copy p,
html body .about-page .about-value-card p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

html body .about-page .about-cap-card p {
  font-size: 13px !important;
  line-height: 1.62 !important;
}

html body .about-page .about-value-card h3,
html body .about-page .about-cap-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

html body .about-page .founder-copy h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

html body .about-page .founder-role { font-size: 14px !important; }
html body .about-page .founder-tags span { font-size: 12px !important; }
html body .about-page .about-stat strong { font-size: 36px !important; }
html body .about-page .about-stat span { font-size: 14px !important; }

@media (max-width: 1024px) {
  html body .about-page .about-hero-copy h1 { font-size: 40px !important; }
}

@media (max-width: 768px) {
  html body .about-page .about-hero-copy h1 { font-size: 32px !important; }
}

@media (max-width: 480px) {
  html body .about-page .about-hero-copy h1 { font-size: 30px !important; }
  html body .about-page .about-title,
  html body .about-page .about-quote h2,
  html body .about-page .about-final-cta h2 { font-size: 26px !important; }
}

/* Keep the footer logo container fully opaque. */
html body footer .footer-logo-wrap,
html body footer .footer-brand .logo-link {
  background: #ffffff !important;
}
