.display-xl {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.display-sm {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2.5vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--c-orange-3);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.text-lg   { font-size: var(--fs-md);   line-height: var(--lh-loose); }
.text-base { font-size: var(--fs-base); line-height: var(--lh-normal); }
.text-sm   { font-size: var(--fs-sm);   line-height: var(--lh-normal); }
.text-xs   { font-size: var(--fs-xs);   line-height: var(--lh-normal); }

.fw-light    { font-weight: var(--fw-light); }
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.text-orange  { color: var(--c-orange); }
.text-ink     { color: var(--c-ink); }
.text-ink2    { color: var(--c-ink-2); }
.text-muted   { color: var(--c-ink-3); }
.text-light   { color: var(--c-ink-4); }
.text-white   { color: #fff; }

.sec-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--sp-3);
}

.prose {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}
.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.prose em {
  font-style: italic;
  color: var(--c-orange);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,.5);
  margin-bottom: .75rem;
}
.breadcrumb a {
  color: inherit;
  transition: color var(--t-fast);
}
.breadcrumb a:hover { color: rgba(255,255,255,.85); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: .8rem;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,.72);
  line-height: var(--lh-loose);
  max-width: 560px;
}

.sec-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  color: var(--c-ink-3);
  line-height: var(--lh-loose);
  margin-top: var(--sp-3);
  max-width: 620px;
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
.card-sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-ink-3);
  margin-top: var(--sp-1);
  line-height: var(--lh-normal);
}

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-4);
}
.legal-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-8);
  padding-bottom: var(--sp-3);
  border-bottom: 1.5px solid var(--c-cream-3);
}
.legal-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--c-ink-2);
  line-height: var(--lh-loose);
}
.legal-body strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.legal-body ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: var(--sp-3);
}
.legal-body li {
  margin-bottom: var(--sp-2);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  color: var(--c-orange);
  line-height: 1;
}
.stat-label-txt {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-top: var(--sp-2);
}

.auth-form-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}
.auth-form-sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-ink-3);
  margin-bottom: var(--sp-6);
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  font-style: italic;
  letter-spacing: var(--ls-tight);
  color: inherit;
}

.pill-diff {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: .2rem .65rem;
  border-radius: var(--r-full);
}
.pill-easy   { background: #DCFCE7; color: #15803D; }
.pill-medium { background: #FFEDD5; color: #C2410C; }
.pill-hard   { background: #FEE2E2; color: #B91C1C; }