/* ==========================================================
   LINK COMMUNITY HUB
   SITEWIDE RESPONSIVE WIDTH + TYPOGRAPHY SYSTEM
   2026-09-09

   Loaded LAST on public-facing pages.
   Layout / readability only.
   No application logic.
   ========================================================== */

:root {
  --link-page-max: 1440px;
  --link-content-max: 1320px;
  --link-reading-max: 76ch;

  --link-edge-desktop: 3vw;
  --link-edge-tablet: 28px;
  --link-edge-mobile: 18px;

  --link-navy: #0b2344;
  --link-deep: #06172e;
  --link-green: #577c42;
  --link-gold: #e0a52f;
  --link-cream: #f7f3eb;
  --link-white: #ffffff;
  --link-ink: #17324d;
  --link-muted: #59697b;
  --link-line: rgba(11,35,68,.13);
}


/* ----------------------------------------------------------
   FOUNDATION
   ---------------------------------------------------------- */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--link-ink);
  font-size: 17px;
  line-height: 1.6;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}


/* ----------------------------------------------------------
   SITE WIDTH
   Major public containers should USE the screen.
   ---------------------------------------------------------- */

main,
.page,
.page-shell,
.site-shell,
.content-shell,
.auth-shell,
.business-public-page .auth-shell,
.resource-shell,
.community-shell,
.opportunities-shell,
.events-shell,
.students-shell,
.nonprofit-shell,
.services-shell {
  width: min(
    var(--link-content-max),
    calc(100% - (var(--link-edge-desktop) * 2))
  );
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}


/* Major visual sections can expand wider than reading text. */

.hero,
.hero-section,
.home-hero,
.business-approved-hero,
.student-approved-head,
.link-media-strip,
.link-branded-section,
.business-real-resource,
.business-value-section,
.student-action-visuals,
.student-progress-showcase,
.student-challenge-section {
  width: 100%;
}


/* Prevent old narrow desktop declarations from trapping pages. */

body > main,
body > .page,
body > .page-shell,
body > .site-shell {
  max-width: var(--link-content-max);
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

body,
p,
li,
label,
input,
select,
textarea,
button,
a {
  -webkit-font-smoothing: antialiased;
}

p,
li {
  font-size: clamp(1rem, .96rem + .16vw, 1.1rem);
  line-height: 1.65;
}

small,
.small,
.meta,
.card-meta,
.helper,
.hint,
.note {
  font-size: clamp(.82rem, .79rem + .12vw, .93rem);
  line-height: 1.5;
}

h1 {
  font-size: clamp(2.35rem, 4.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
}

h2 {
  font-size: clamp(1.9rem, 3.2vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

h3 {
  font-size: clamp(1.3rem, 1.7vw, 1.8rem);
  line-height: 1.18;
}

h4 {
  font-size: clamp(1.08rem, 1.25vw, 1.35rem);
  line-height: 1.25;
}

p {
  max-width: var(--link-reading-max);
}


/* Do not make card copy microscopic. */

.card p,
.business-value-card p,
.opportunity-card p,
.event-card p,
.resource-card p,
.student-impact-feature span,
.student-challenge-card p,
.link-branded-card p {
  font-size: clamp(.96rem, .92rem + .14vw, 1.04rem);
}


/* ----------------------------------------------------------
   SECTION SPACING
   ---------------------------------------------------------- */

main > section,
.page > section,
.page-shell > section,
.site-shell > section {
  margin-top: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(28px, 4vw, 64px);
}

section {
  scroll-margin-top: 90px;
}


/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */

.card,
.business-value-card,
.opportunity-card,
.event-card,
.resource-card,
.link-branded-card,
.student-impact-feature,
.student-challenge-card,
.auth-card {
  padding: clamp(18px, 2vw, 30px);
}

.card-grid,
.business-value-grid,
.opportunities-grid,
.events-grid,
.resources-grid {
  gap: clamp(14px, 2vw, 24px);
}


/* ----------------------------------------------------------
   HEROES / SPLIT LAYOUTS
   ---------------------------------------------------------- */

.business-approved-hero,
.student-approved-head,
.hero-split,
.split-layout,
.two-column {
  width: 100%;
}

.business-approved-hero {
  min-height: min(680px, 74vh);
}

.business-approved-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ----------------------------------------------------------
   BUTTONS + TOUCH TARGETS
   ---------------------------------------------------------- */

button,
.button,
.btn,
.primary,
.secondary,
a.primary,
a.secondary,
.business-card-cta,
.business-resource-primary,
.footer-cta-button,
.student-action-primary,
.student-action-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-size: clamp(.9rem, .87rem + .1vw, 1rem);
  line-height: 1.15;
}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
}

textarea {
  min-height: 120px;
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

table {
  width: 100%;
  font-size: clamp(.88rem, .84rem + .12vw, 1rem);
}

.table-wrap,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ----------------------------------------------------------
   LARGE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

  :root {
    --link-content-max: 1420px;
  }

  body {
    font-size: 18px;
  }

}


/* ----------------------------------------------------------
   LAPTOP
   1024–1499
   ---------------------------------------------------------- */

@media (max-width: 1499px) {

  :root {
    --link-content-max: 1240px;
    --link-edge-desktop: 32px;
  }

  body {
    font-size: 16.5px;
  }

}


/* ----------------------------------------------------------
   TABLET / SMALL LAPTOP
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  :root {
    --link-edge-desktop: var(--link-edge-tablet);
  }

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .resource-shell,
  .community-shell,
  .opportunities-shell,
  .events-shell,
  .students-shell,
  .nonprofit-shell,
  .services-shell {
    width: calc(100% - (var(--link-edge-tablet) * 2));
  }

  .business-value-grid,
  .student-impact-feature-row,
  .student-progress-tools {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .business-approved-hero,
  .student-approved-head,
  .hero-split,
  .split-layout,
  .two-column {
    grid-template-columns: 1fr;
  }

  .business-approved-hero {
    min-height: 0;
  }

}


/* ----------------------------------------------------------
   MOBILE / IPHONE / ANDROID
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  :root {
    --link-edge-desktop: var(--link-edge-mobile);
  }

  body {
    font-size: 16px;
  }

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .resource-shell,
  .community-shell,
  .opportunities-shell,
  .events-shell,
  .students-shell,
  .nonprofit-shell,
  .services-shell {
    width: calc(100% - (var(--link-edge-mobile) * 2));
  }

  h1 {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  h2 {
    font-size: clamp(1.65rem, 8vw, 2.55rem);
  }

  h3 {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
  }

  p,
  li {
    font-size: 1rem;
  }

  .business-value-grid,
  .student-impact-feature-row,
  .student-progress-tools,
  .student-challenge-grid,
  .card-grid,
  .opportunities-grid,
  .events-grid,
  .resources-grid {
    grid-template-columns: 1fr !important;
  }

  .card,
  .business-value-card,
  .opportunity-card,
  .event-card,
  .resource-card,
  .link-branded-card,
  .student-impact-feature,
  .student-challenge-card,
  .auth-card {
    padding: 18px;
  }

  button,
  .button,
  .btn,
  .primary,
  .secondary,
  a.primary,
  a.secondary,
  .business-card-cta,
  .business-resource-primary,
  .footer-cta-button,
  .student-action-primary,
  .student-action-secondary {
    width: 100%;
    min-height: 48px;
  }

}


/* ----------------------------------------------------------
   VERY SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell {
    width: calc(100% - 28px);
  }

  body {
    font-size: 16px;
  }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}


/* ==========================================================
   LINK COMMUNITY HUB
   FULL-WIDTH RESPONSIVE OVERRIDE V2
   2026-09-09

   Purpose:
   - Remove legacy narrow desktop wrappers
   - Let heroes and major sections use available viewport width
   - Increase readable typography
   - Preserve tablet/mobile responsiveness
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL PUBLIC PAGE WIDTH
   ---------------------------------------------------------- */

html,
body {
  width: 100%;
  max-width: none !important;
}

body {
  overflow-x: hidden;
}


/*
   Major page shells:
   use almost the entire browser width on desktop.
*/

main,
.page,
.page-shell,
.site-shell,
.content-shell,
.auth-shell,
.business-public-page .auth-shell,
.resource-shell,
.community-shell,
.opportunities-shell,
.events-shell,
.students-shell,
.student-shell,
.nonprofit-shell,
.services-shell,
.home-shell,
main.container,
main.wrapper {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/*
   Legacy inner wrappers are what have been keeping
   sections narrow. Allow them to fill their parent.
*/

main > .container,
main > .wrapper,
main > .inner,
main > .content,
main > .shell,

section > .container,
section > .wrapper,
section > .inner,
section > .content,
section > .shell,

.page > .container,
.page > .wrapper,
.page > .inner,

.page-shell > .container,
.page-shell > .wrapper,
.page-shell > .inner,

.site-shell > .container,
.site-shell > .wrapper,
.site-shell > .inner {
  width: 100% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* ----------------------------------------------------------
   HERO WIDTH
   Major heroes should visually use the screen.
   ---------------------------------------------------------- */

.hero,
.home-hero,
.hero-section,
.page-hero,
.business-approved-hero,
.student-approved-head,
.opportunities-hero,
.community-hero,
.events-hero,
.nonprofit-hero,
.services-hero,
.resource-hero {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;

  margin-left: 50% !important;
  margin-right: 0 !important;

  transform: translateX(-50%) !important;

  border-radius: clamp(0px, 1.5vw, 24px);
}


/* Home approved hero image */

.link-locked-home-hero-image {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  display: block !important;

  object-fit: contain !important;
}


/* Business hero */

.business-approved-hero {
  display: block !important;
}

.business-approved-hero-image {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  display: block !important;

  object-fit: contain !important;
}


/* Student hero */

.student-approved-head {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;
}


/* ----------------------------------------------------------
   MAJOR CONTENT SECTIONS
   ---------------------------------------------------------- */

.business-real-resource,
.business-value-section,
.link-branded-section,
.business-approved-lower-panel,

.student-action-visuals,
.student-progress-showcase,
.student-challenge-section,

.link-media-strip,
.home-impact-section,
.impact-section,

.opportunities-page,
.opportunities-content,
.events-page,
.community-page,
.resources-page {
  width: 100% !important;
  max-width: none !important;
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   Stop shrinking copy while space is available.
   ---------------------------------------------------------- */

body {
  font-size: 18px !important;
}

p,
li {
  font-size: clamp(1.05rem, .98rem + .20vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

h1 {
  font-size: clamp(2.75rem, 4.8vw, 5.35rem) !important;
  line-height: .98 !important;
}

h2 {
  font-size: clamp(2rem, 3.4vw, 3.6rem) !important;
  line-height: 1.05 !important;
}

h3 {
  font-size: clamp(1.35rem, 1.7vw, 1.9rem) !important;
  line-height: 1.16 !important;
}

h4 {
  font-size: clamp(1.12rem, 1.3vw, 1.45rem) !important;
}


/* Supporting copy */

small,
.small,
.meta,
.card-meta,
.helper,
.hint,
.note,
.eyebrow,
.panel-kicker {
  font-size: clamp(.86rem, .82rem + .10vw, .96rem) !important;
}


/* Card copy should remain readable */

.card p,
.business-value-card p,
.opportunity-card p,
.event-card p,
.resource-card p,
.student-impact-feature span,
.student-challenge-card p,
.link-branded-card p {
  font-size: clamp(1rem, .97rem + .12vw, 1.1rem) !important;
  line-height: 1.58 !important;
}


/* ----------------------------------------------------------
   BUSINESS PAGE
   ---------------------------------------------------------- */

.business-public-page .auth-shell {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;
}

.business-public-page .business-real-resource,
.business-public-page .business-value-section,
.business-public-page .link-branded-section,
.business-public-page .business-approved-lower-panel {
  width: 100% !important;
  max-width: none !important;
}

.business-public-page .business-value-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;
}

.business-public-page .business-value-card {
  min-width: 0 !important;
}


/* ----------------------------------------------------------
   STUDENT PAGE
   ---------------------------------------------------------- */

.student-action-visuals--approved {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;
}

.student-impact-feature-row {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 18px !important;
}

.student-challenge-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 22px !important;
}


/* Assessment should be wider too */

.student-assessment-intro,
#link-student-assessment {
  width: min(1320px, calc(100vw - 64px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

.student-assessment-intro > *,
#link-student-assessment > * {
  max-width: none !important;
}


/* ----------------------------------------------------------
   HOME PAGE
   ---------------------------------------------------------- */

body > main,
#main,
.home-main {
  max-width: none !important;
}

.home-hero,
.link-locked-home-hero,
.homepage-hero {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;

  margin-left: 50% !important;

  transform: translateX(-50%) !important;
}


/* Homepage card groups */

.home-role-grid,
.role-grid,
.ecosystem-grid,
.involvement-grid {
  width: 100% !important;
  max-width: none !important;
}


/* ----------------------------------------------------------
   OPPORTUNITIES PAGE
   ---------------------------------------------------------- */

.opportunities-page,
.opportunities-shell,
#opportunitiesGrid,
.opportunities-grid {
  width: 100% !important;
  max-width: none !important;
}

.opportunities-grid,
#opportunitiesGrid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 24px !important;
}


/* ----------------------------------------------------------
   UNIVERSAL NAV
   ---------------------------------------------------------- */

.link-universal-nav > *,
.link-universal-nav .inner,
.link-universal-nav .container {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

.link-universal-nav a {
  font-size: 14px !important;
}


/* ----------------------------------------------------------
   LARGE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1600px) {

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .student-action-visuals--approved,
  .hero,
  .home-hero,
  .business-approved-hero,
  .student-approved-head {
    width: min(1540px, calc(100vw - 64px)) !important;
  }

}


/* ----------------------------------------------------------
   TABLET / SMALL LAPTOP
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .student-action-visuals--approved,
  .hero,
  .home-hero,
  .business-approved-hero,
  .student-approved-head {
    width: calc(100vw - 40px) !important;
  }

  .business-public-page .business-value-grid,
  .student-impact-feature-row,
  .opportunities-grid,
  #opportunitiesGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  body {
    font-size: 17px !important;
  }

}


/* ----------------------------------------------------------
   MOBILE / IPHONE / ANDROID
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .student-action-visuals--approved,

  .hero,
  .home-hero,
  .hero-section,
  .page-hero,
  .business-approved-hero,
  .student-approved-head,
  .opportunities-hero {
    width: calc(100vw - 28px) !important;
  }

  body {
    font-size: 16px !important;
  }

  p,
  li {
    font-size: 1rem !important;
  }

  h1 {
    font-size: clamp(2.15rem, 10vw, 3.3rem) !important;
  }

  h2 {
    font-size: clamp(1.7rem, 8vw, 2.55rem) !important;
  }

  .business-public-page .business-value-grid,
  .student-impact-feature-row,
  .student-challenge-grid,
  .student-progress-tools,
  .opportunities-grid,
  #opportunitiesGrid {
    grid-template-columns: 1fr !important;
  }

  .student-assessment-intro,
  #link-student-assessment {
    width: calc(100vw - 28px) !important;
  }

}


/* ----------------------------------------------------------
   VERY SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  main,
  .page,
  .page-shell,
  .site-shell,
  .content-shell,
  .auth-shell,
  .business-public-page .auth-shell,
  .student-action-visuals--approved,
  .hero,
  .home-hero,
  .business-approved-hero,
  .student-approved-head {
    width: calc(100vw - 20px) !important;
  }

}

/* =========================================================
   LINK COMMUNITY HUB — SITEWIDE READABILITY STANDARD
   Public-facing text must remain comfortably legible.
   Small type is reserved for footer/legal/supporting fine print.
   ========================================================= */

:root {
  --link-font-body: 17px;
  --link-font-body-large: 18px;
  --link-font-small: 15px;
  --link-font-meta: 14px;
  --link-font-legal: 12px;
}

/* ---------------------------------------------------------
   GLOBAL BODY COPY
   --------------------------------------------------------- */

body {
  font-size: var(--link-font-body) !important;
  line-height: 1.6 !important;
}

main p,
main li,
main dd,
main dt,
main label,
main input,
main textarea,
main select,
main button,
main a {
  font-size: max(1rem, var(--link-font-body)) !important;
}

/* ---------------------------------------------------------
   CARDS / PANELS / FEATURE BLOCKS
   --------------------------------------------------------- */

.card,
.panel,
.tile,
.feature-card,
.info-card,
.organization-card,
.nonprofit-card,
.resource-card,
.opportunity-card,
section article {
  font-size: var(--link-font-body) !important;
}

.card p,
.panel p,
.tile p,
.feature-card p,
.info-card p,
.organization-card p,
.nonprofit-card p,
.resource-card p,
.opportunity-card p {
  font-size: var(--link-font-body) !important;
  line-height: 1.58 !important;
}

/* ---------------------------------------------------------
   NAV / FILTERS / BUTTONS
   --------------------------------------------------------- */

nav a,
nav button,
button,
.button,
.btn,
[role="button"],
input,
select,
textarea {
  font-size: 16px !important;
}

nav small,
.nav-subtitle,
.nav-kicker {
  font-size: 14px !important;
}

/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

h1 {
  font-size: clamp(2.6rem, 5vw, 5rem) !important;
  line-height: 1.04 !important;
}

h2 {
  font-size: clamp(2rem, 3.3vw, 3.4rem) !important;
  line-height: 1.08 !important;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.15 !important;
}

h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
}

/* ---------------------------------------------------------
   SECONDARY TEXT
   No unreadable micro-copy.
   --------------------------------------------------------- */

small,
.meta,
.metadata,
.caption,
.eyebrow,
.kicker,
.tag,
.badge,
.status,
.helper-text,
.supporting-copy {
  font-size: var(--link-font-small) !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------
   EXCEPTION:
   true legal/footer fine print may remain smaller
   --------------------------------------------------------- */

footer small,
footer .legal,
footer .copyright,
footer .fine-print,
.legal,
.legal-copy,
.copyright,
.fine-print,
[data-legal] {
  font-size: var(--link-font-legal) !important;
  line-height: 1.45 !important;
}

/* ---------------------------------------------------------
   STAT / IMPACT ROWS
   --------------------------------------------------------- */

.stats,
.stat-grid,
.impact-grid,
.metric-grid,
.summary-grid {
  font-size: 16px !important;
}

.stat,
.metric,
.impact-stat {
  font-size: 16px !important;
}

.stat strong,
.metric strong,
.impact-stat strong {
  font-size: 1.35rem !important;
}

/* ---------------------------------------------------------
   LINKS THAT FUNCTION AS CTAs
   --------------------------------------------------------- */

main a[class*="button"],
main a[class*="cta"],
main a[class*="action"],
main button {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------------------------------------------------------
   LARGE DESKTOP:
   use width before shrinking type
   --------------------------------------------------------- */

@media (min-width: 1200px) {
  body {
    font-size: var(--link-font-body-large) !important;
  }

  main p,
  main li,
  main dd,
  main dt {
    font-size: var(--link-font-body-large) !important;
  }
}

/* ---------------------------------------------------------
   MOBILE:
   still no unreadable public text
   --------------------------------------------------------- */

@media (max-width: 700px) {
  body,
  main p,
  main li,
  main label,
  main input,
  main textarea,
  main select,
  main button,
  main a {
    font-size: 16px !important;
  }

  small,
  .meta,
  .metadata,
  .caption,
  .eyebrow,
  .kicker,
  .tag,
  .badge,
  .status,
  .helper-text {
    font-size: 14px !important;
  }

  footer small,
  footer .legal,
  footer .copyright,
  footer .fine-print,
  .legal,
  .legal-copy,
  .copyright,
  .fine-print,
  [data-legal] {
    font-size: 12px !important;
  }
}