/*
 * UNFCU SEO Landing Page — CSS Design System
 * Financial Times / Bloomberg Editorial Style
 * Randomized class names only — NO semantic naming
 */

/* ==========================================================================
   1. CSS RESET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2. CSS VARIABLES
   ========================================================================== */

:root {
  --bg-primary: #FFF8E7;   /* FT cream */
  --bg-secondary: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-muted: #666666;
  --accent: #990F3D;       /* FT deep red */
  --border: #DDDDDD;
  --link: #1A1A1A;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
}

/* ==========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================== */

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   4. TYPOGRAPHY SYSTEM — Randomized Class Names
   ========================================================================== */

.b8n1j {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.k3mzp {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.m7r5x {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-primary);
}

.q2n8v {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-primary);
}

.w4p6q {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.z9t3h {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ==========================================================================
   5. ARTICLE TYPOGRAPHY — Random Names
   ========================================================================== */

.d5k2m p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.d5k2m p:last-child {
  margin-bottom: 0;
}

.d5k2m h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.d5k2m h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.d5k2m h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   6. LIST STYLES — Randomized Names
   ========================================================================== */

.r6t1w {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm) 0;
}

.r6t1w li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-primary);
}

.r6t1w li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 400;
}

.f9v3n {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 var(--space-sm) 0;
}

.f9v3n li {
  margin-bottom: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-primary);
}

.f9v3n li::marker {
  color: var(--accent);
}

/* ==========================================================================
   7. LINK STYLES — Randomized Names
   ========================================================================== */

.c7g4j a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.c7g4j a:hover {
  color: var(--accent);
}

.c7g4j a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.j2k5r {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.j2k5r:hover {
  opacity: 0.75;
}

/* ==========================================================================
   8. STRONG / BOLD — Randomized Names
   ========================================================================== */

.s8m2q {
  font-weight: 600;
  color: var(--text-primary);
}

.s8m2q--muted {
  font-weight: 400;
  color: var(--text-muted);
}

/* ==========================================================================
   9. BLOCKQUOTE — Editorial Style
   ========================================================================== */

.h6n4t {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--text-primary);
}

.h6n4t cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-style: normal;
  color: var(--text-muted);
}

/* ==========================================================================
   10. LAYOUT SYSTEM — Randomized Class Names
   ========================================================================== */

/* Container */
.y5w8z {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
  .y5w8z {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .y5w8z {
    padding: 0 var(--space-xl);
  }
}

/* Article / readable column */
.p4vq7 {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Grid system */
.g3r9h {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .g3r9h {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .g3r9h {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Two column grid */
.n6m4k {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .n6m4k {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

/* Flex alignment */
.l8j2h {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .l8j2h {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
}

.a6v1r {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ==========================================================================
   11. NAVIGATION — Randomized Names
   ========================================================================== */

.t5q7m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.t5q7m li a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}

.t5q7m li a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.t5q7m li a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   12. HERO / HEADER SECTION — Randomized Names
   ========================================================================== */

.e9d2n {
  padding: var(--space-xl) 0 var(--space-2xl);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .e9d2n {
    padding: var(--space-2xl) 0;
  }
}

.w7c3f {
  padding: var(--space-lg) 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.o4u6i {
  padding: var(--space-2xl) 0;
  background-color: var(--bg-primary);
}

@media (min-width: 768px) {
  .o4u6i {
    padding: var(--space-2xl) 0;
  }
}

/* ==========================================================================
   13. CONTENT SECTIONS — Randomized Names
   ========================================================================== */

.u5r1j {
  padding: var(--space-xl) 0;
  background-color: var(--bg-primary);
}

@media (min-width: 768px) {
  .u5r1j {
    padding: var(--space-2xl) 0;
  }
}

.x8k3n {
  padding: var(--space-xl) 0;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .x8k3n {
    padding: var(--space-2xl) 0;
  }
}

.v2z9p {
  padding: var(--space-lg) 0;
  background-color: var(--bg-primary);
}

@media (min-width: 768px) {
  .v2z9p {
    padding: var(--space-xl) 0;
  }
}

/* ==========================================================================
   14. FOOTER — Randomized Names
   ========================================================================== */

.f6t8r {
  padding: var(--space-xl) 0 var(--space-lg);
  background-color: var(--bg-secondary);
  border-top: 2px solid var(--text-primary);
}

@media (min-width: 768px) {
  .f6t8r {
    padding: var(--space-2xl) 0 var(--space-lg);
  }
}

.e3w5v {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .e3w5v {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xl);
  }
}

.k9j4m {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.q7w2z {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.q7w2z li {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-muted);
}

.q7w2z li a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.q7w2z li a:hover {
  color: var(--accent);
}

.d8c1x {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: var(--space-md);
}

/* ==========================================================================
   15. DIVIDERS
   ========================================================================== */

.r5h9b {
  width: 100%;
  height: 1px;
  background-color: var(--border);
  border: none;
  margin: var(--space-lg) 0;
}

.w2t6j {
  width: 48px;
  height: 2px;
  background-color: var(--accent);
  border: none;
  margin: var(--space-md) 0;
}

/* ==========================================================================
   16. CARDS / CONTENT BLOCKS — Randomized Names
   ========================================================================== */

.m3k7r {
  background-color: var(--bg-secondary);
  padding: var(--space-lg);
  border: 1px solid var(--border);
}

@media (min-width: 768px) {
  .m3k7r {
    padding: var(--space-xl);
  }
}

.b5n9q {
  background-color: var(--bg-primary);
  padding: var(--space-lg);
  border-left: 3px solid var(--accent);
}

@media (min-width: 768px) {
  .b5n9q {
    padding: var(--space-xl);
  }
}

/* ==========================================================================
   17. CTA / ACTION — Randomized Names
   ========================================================================== */

.a9w5x {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 500;
  color: var(--bg-secondary);
  background-color: var(--text-primary);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}

.a9w5x:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg-secondary);
}

.a9w5x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.a9w5x--outline {
  background-color: transparent;
  color: var(--text-primary);
}

.a9w5x--outline:hover {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-secondary);
}

.a9w5x--accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg-secondary);
}

.a9w5x--accent:hover {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ==========================================================================
   18. BADGE / TAG — Randomized Names
   ========================================================================== */

.p1v4h {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg-secondary);
  background-color: var(--accent);
  padding: 0.25rem 0.625rem;
}

.g8t3r {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background-color: transparent;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--accent);
}

/* ==========================================================================
   19. FORMS / INPUT — Randomized Names
   ========================================================================== */

.c6z2m {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.c6z2m::placeholder {
  color: var(--text-muted);
}

.c6z2m:focus {
  outline: none;
  border-color: var(--text-primary);
}

.c6z2m:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   20. UTILITY CLASSES — Randomized Names
   ========================================================================== */

.x9k2m { display: block; }
.x7h4j { display: inline-block; }
.x3t8w { display: flex; }
.x6v2q { display: grid; }
.x1r5n { display: none; }

.u4d9m { margin-bottom: 0.25rem; }
.u7k2x { margin-bottom: 0.5rem; }
.u2p6s { margin-bottom: 1rem; }
.u9n4v { margin-bottom: 1.5rem; }
.u5m8r { margin-bottom: 2rem; }
.u3w7t { margin-bottom: 3rem; }
.u6j1q { margin-bottom: var(--space-2xl); }

.m8b3c { margin-top: 0.25rem; }
.m4r9w { margin-top: 0.5rem; }
.m2n5x { margin-top: 1rem; }
.m7v3j { margin-top: 1.5rem; }
.m9p2k { margin-top: 2rem; }
.m5h8n { margin-top: 3rem; }
.m1w6t { margin-top: var(--space-2xl); }

.p3q7v { padding-bottom: 0.5rem; }
.p6t4r { padding-bottom: 1rem; }
.p2k8m { padding-bottom: 1.5rem; }
.p9w3j { padding-bottom: 2rem; }

.r4s2z { color: var(--text-muted); }
.r1m6t { color: var(--text-primary); }
.r8v5n { color: var(--accent); }
.r3b9k { color: var(--bg-secondary); }

.t8c1x { text-align: left; }
.t5w2r { text-align: center; }
.t3m7v { text-align: right; }

.w6p3j { width: 100%; }
.w2n8q { max-width: 100%; }
.w9k4m { max-width: 720px; }
.w7t6v { max-width: 960px; }
.w1r9z { max-width: 1200px; }

.v5h2r { background-color: var(--bg-primary); }
.v8m4n { background-color: var(--bg-secondary); }
.v2t7k { background-color: var(--accent); }

.b9p1w { border: 1px solid var(--border); }
.b4r6m { border-top: 1px solid var(--border); }
.b7s3j { border-bottom: 1px solid var(--border); }
.b2v8t { border-left: 3px solid var(--accent); }

.f4n9w { float: left; }
.f7k3v { float: right; }
.f1t5r { clear: both; }

.z3m8q { position: relative; }
.z6v2r { position: static; }

.g5w9m { gap: var(--space-xs); }
.g2k7j { gap: var(--space-sm); }
.g8n3x { gap: var(--space-md); }
.g4t6v { gap: var(--space-lg); }
.g1p9r { gap: var(--space-xl); }

.c2z4w { cursor: pointer; }
.c8m6t { cursor: default; }
.c5r1n { pointer-events: none; }

.o3h7k { opacity: 0.6; }
.o9v2m { opacity: 0.8; }
.o6t5j { opacity: 1; }

.o1w4r {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.o7k9v {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.l9t2m {
  line-height: 1.4;
}

.l6v8n {
  line-height: 1.6;
}

.l3p5w {
  line-height: 1.8;
}

.l4r7q {
  letter-spacing: -0.02em;
}

.l8n1x {
  letter-spacing: 0.02em;
}

.l2w6t {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.n4t9v {
  text-transform: capitalize;
}

/* ==========================================================================
   21. RESPONSIVE VISIBILITY — Randomized Names
   ========================================================================== */

@media (max-width: 767px) {
  .h5m2j { display: none; }
  .s7v4n { display: block; }
}

@media (min-width: 768px) {
  .h5m2j { display: block; }
  .s7v4n { display: none; }
}

/* ==========================================================================
   22. SELECTION & SCROLLBAR — Randomized Names
   ========================================================================== */

::selection {
  background-color: var(--accent);
  color: var(--bg-secondary);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================================================
   23. FOCUS STYLES — Global
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}