MiniMax MiniMax M3.1 Flash – Personal Finance

via Minimax · Generated

  • AIMAC Debt 4.94
  • Cost $0.03
  • Total Violations 22
  • HTML Size 134 KB
  • Em Dashes 13

Screenshot

View MiniMax MiniMax M3.1 Flash Personal Finance page View Live Page

Accessibility Issues Found

22 Serious

  • color-contrast serious 22 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p>© <span id="current-year">2026</span> LumaLedger Financial, LLC. All rights reserved.</p>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#153a32">
  <meta name="description" content="LumaLedger brings budgeting, credit, investing, retirement, and tax planning together in one practical, personalized personal finance platform.">
  <meta name="robots" content="index, follow">
  <meta property="og:type" content="website">
  <meta property="og:title" content="LumaLedger — Make every money move with clarity">
  <meta property="og:description" content="Build a practical money plan for your goals with clear tools, educational resources, and straightforward guidance.">
  <meta property="og:image" content="https://placehold.co/1200x630/153a32/f2c968?text=LumaLedger&amp;font=playfair+display">
  <meta property="og:url" content="https://www.lumaledger.com/">
  <link rel="canonical" href="https://www.lumaledger.com/">
  <link rel="icon" href="https://placehold.co/64x64/153a32/f7cf6b?text=LL&amp;font=poppins">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Playfair+Display:ital,wght@0,600;0,700;1,600&amp;display=swap" rel="stylesheet">
  <title>LumaLedger — Personal Finance, Made Clear</title>
  <script>document.documentElement.classList.add('js'); if ('IntersectionObserver' in window) document.documentElement.classList.add('reveal-ready');</script>
  <style>
    :root {
      --forest-950: #0c2823;
      --forest-900: #12372f;
      --forest-800: #19483d;
      --forest-700: #286052;
      --forest-500: #4f8a79;
      --sage: #dcebe4;
      --sage-light: #eef5f1;
      --cream: #f8f5ed;
      --paper: #fffdf8;
      --gold: #f2c968;
      --gold-light: #fff3cd;
      --coral: #e97950;
      --coral-light: #f8e5dc;
      --ink: #17322c;
      --muted: #61716c;
      --line: #d9e2dd;
      --white: #ffffff;
      --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-serif: "Playfair Display", Georgia, serif;
      --shadow-sm: 0 8px 30px rgba(19, 55, 47, 0.08);
      --shadow-lg: 0 26px 70px rgba(12, 40, 35, 0.16);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --container: 1180px;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 104px;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background: var(--cream);
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    body.modal-open {
      overflow: hidden;
    }

    h1, h2, h3, h4, p {
      margin-top: 0;
    }

    h1, h2, h3, h4 {
      line-height: 1.12;
      text-wrap: balance;
    }

    p {
      color: var(--muted);
      text-wrap: pretty;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
    }

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

    button {
      cursor: pointer;
    }

    [hidden] {
      display: none !important;
    }

    ::selection {
      color: var(--forest-950);
      background: var(--gold);
    }

    :focus-visible {
      outline: 3px solid var(--coral);
      outline-offset: 4px;
    }

    section[id], article[id] {
      scroll-margin-top: 104px;
    }

    .container {
      width: min(var(--container), calc(100% - 40px));
      margin-inline: auto;
    }

    .section {
      padding: 112px 0;
    }

    .section-soft {
      background: var(--sage-light);
    }

    .section-paper {
      background: var(--paper);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 3000;
      padding: 12px 18px;
      border-radius: 10px;
      color: var(--white);
      background: var(--forest-950);
      transform: translateY(-160%);
      transition: transform 180ms ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .icon {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 23px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 0.94rem;
      font-weight: 700;
      line-height: 1.2;
      transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button .icon {
      width: 18px;
      height: 18px;
      transition: transform 180ms ease;
    }

    .button:hover .icon {
      transform: translateX(3px);
    }

    .button-primary {
      color: var(--white);
      background: var(--forest-900);
      box-shadow: 0 12px 28px rgba(18, 55, 47, 0.18);
    }

    .button-primary:hover {
      background: var(--forest-800);
      box-shadow: 0 15px 32px rgba(18, 55, 47, 0.25);
    }

    .button-gold {
      color: var(--forest-950);
      background: var(--gold);
      box-shadow: 0 12px 28px rgba(242, 201, 104, 0.18);
    }

    .button-gold:hover {
      background: #f7d67f;
    }

    .button-light {
      color: var(--forest-900);
      background: var(--white);
      border-color: var(--line);
    }

    .button-light:hover {
      border-color: var(--forest-700);
    }

    .button-ghost {
      color: var(--forest-900);
      background: transparent;
      border-color: rgba(23, 50, 44, 0.24);
    }

    .button-ghost-light {
      color: var(--white);
      background: transparent;
      border-color: rgba(255, 255, 255, 0.34);
    }

    .button-ghost-light:hover {
      border-color: var(--white);
    }

    .button-small {
      min-height: 43px;
      padding: 10px 17px;
      font-size: 0.87rem;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--forest-800);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .text-link .icon {
      width: 17px;
      height: 17px;
      transition: transform 180ms ease;
    }

    .text-link:hover .icon {
      transform: translateX(4px);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--forest-700);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 26px;
      height: 2px;
      content: "";
      background: var(--coral);
    }

    .eyebrow-light {
      color: #b8d6ca;
    }

    .eyebrow-light::before {
      background: var(--gold);
    }

    .section-title {
      max-width: 760px;
      margin-bottom: 20px;
      font-family: var(--font-serif);
      font-size: clamp(2.45rem, 4.6vw, 4.15rem);
      font-weight: 600;
      letter-spacing: -0.035em;
    }

    .section-title em {
      color: var(--coral);
      font-weight: 600;
    }

    .section-intro {
      max-width: 680px;
      margin-bottom: 0;
      font-size: 1.08rem;
    }

    .centered-heading {
      margin-inline: auto;
      text-align: center;
    }

    .centered-heading .section-intro {
      margin-inline: auto;
    }

    .announcement {
      position: relative;
      z-index: 1001;
      padding: 9px 20px;
      color: rgba(255, 255, 255, 0.82);
      background: var(--forest-950);
      font-size: 0.81rem;
      text-align: center;
    }

    .announcement a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-left: 9px;
      color: var(--gold);
      font-weight: 700;
    }

    .announcement .icon {
      width: 14px;
      height: 14px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(23, 50, 44, 0.08);
      background: rgba(248, 245, 237, 0.9);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      position: relative;
      display: flex;
      min-height: 82px;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 12px;
    }

    .brand img {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      box-shadow: 0 7px 18px rgba(18, 55, 47, 0.14);
    }

    .brand-copy {
      display: grid;
      line-height: 1.05;
    }

    .brand-name {
      color: var(--forest-950);
      font-family: var(--font-serif);
      font-size: 1.38rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .brand-tagline {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.045em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .nav-link {
      position: relative;
      padding: 29px 0 27px;
      color: #435a54;
      font-size: 0.88rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .nav-link::after {
      position: absolute;
      right: 0;
      bottom: 20px;
      left: 0;
      height: 2px;
      content: "";
      background: var(--coral);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 180ms ease;
    }

    .nav-link:hover,
    .nav-link[aria-current="page"] {
      color: var(--forest-900);
    }

    .nav-link:hover::after,
    .nav-link[aria-current="page"]::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-toggle {
      display: none;
      width: 46px;
      height: 46px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--forest-900);
      background: var(--paper);
    }

    .nav-toggle .icon {
      width: 23px;
      height: 23px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 104px;
      background:
        radial-gradient(circle at 5% 18%, rgba(242, 201, 104, 0.24), transparent 22%),
        linear-gradient(135deg, #fbf8f0 0%, #f3f6ee 100%);
    }

    .hero::after {
      position: absolute;
      right: -220px;
      bottom: -300px;
      width: 700px;
      height: 700px;
      border: 1px solid rgba(40, 96, 82, 0.13);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 80px rgba(40, 96, 82, 0.035), 0 0 0 160px rgba(40, 96, 82, 0.02);
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(420px, 0.97fr);
      align-items: center;
      gap: 76px;
    }

    .hero-copy {
      max-width: 690px;
    }

    .hero h1 {
      margin-bottom: 27px;
      font-family: var(--font-serif);
      font-size: clamp(3.45rem, 6.4vw, 6rem);
      font-weight: 600;
      letter-spacing: -0.055em;
      line-height: 0.98;
    }

    .hero h1 em {
      color: var(--coral);
      font-weight: 600;
    }

    .hero-copy > p {
      max-width: 650px;
      margin-bottom: 32px;
      font-size: 1.12rem;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      color: #60716c;
      font-size: 0.81rem;
      font-weight: 600;
    }

    .hero-proof span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-proof .icon {
      width: 16px;
      height: 16px;
      color: var(--forest-700);
    }

    .hero-visual {
      position: relative;
      min-height: 580px;
    }

    .hero-image-frame {
      position: relative;
      height: 560px;
      overflow: hidden;
      border: 8px solid rgba(255, 255, 255, 0.74);
      border-radius: 34px 34px 140px 34px;
      background: var(--sage);
      box-shadow: var(--shadow-lg);
    }

    .hero-image-frame::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(180deg, transparent 55%, rgba(12, 40, 35, 0.25));
      pointer-events: none;
    }

    .hero-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-caption {
      position: absolute;
      z-index: 2;
      right: 24px;
      bottom: 22px;
      left: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 15px 17px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 16px;
      color: var(--white);
      background: rgba(12, 40, 35, 0.68);
      backdrop-filter: blur(10px);
      font-size: 0.8rem;
    }

    .image-caption strong {
      display: block;
      margin-bottom: 2px;
      font-size: 0.94rem;
    }

    .image-caption span {
      color: rgba(255, 255, 255, 0.72);
    }

    .hero-float-card {
      position: absolute;
      z-index: 3;
      padding: 18px;
      border: 1px solid rgba(23, 50, 44, 0.08);
      border-radius: 18px;
      background: rgba(255, 253, 248, 0.96);
      box-shadow: var(--shadow-lg);
    }

    .fund-card {
      top: 35px;
      right: -34px;
      width: 225px;
    }

    .credit-card {
      bottom: 17px;
      left: -46px;
      width: 238px;
    }

    .float-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .float-icon {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 11px;
      color: var(--forest-900);
      background: var(--sage);
    }

    .float-icon.gold {
      background: var(--gold-light);
    }

    .float-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 600;
    }

    .float-value {
      display: block;
      color: var(--forest-950);
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .progress-line {
      height: 6px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 99px;
      background: #e2e9e5;
    }

    .progress-line span {
      display: block;
      width: 67%;
      height: 100%;
      border-radius: inherit;
      background: var(--forest-700);
    }

    .score-ring {
      display: grid;
      width: 47px;
      height: 47px;
      place-items: center;
      border: 5px solid #8dc0af;
      border-left-color: var(--gold);
      border-radius: 50%;
      color: var(--forest-900);
      font-size: 0.75rem;
      font-weight: 800;
      transform: rotate(-18deg);
    }

    .score-ring span {
      transform: rotate(18deg);
    }

    .metrics {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .metric {
      position: relative;
      padding: 34px 28px;
      text-align: center;
    }

    .metric:not(:last-child)::after {
      position: absolute;
      top: 25%;
      right: 0;
      width: 1px;
      height: 50%;
      content: "";
      background: var(--line);
    }

    .metric strong {
      display: block;
      color: var(--forest-900);
      font-family: var(--font-serif);
      font-size: 2rem;
      line-height: 1;
    }

    .metric span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .approach {
      padding: 78px 0;
      background: var(--paper);
    }

    .approach-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.35fr auto;
      align-items: center;
      gap: 56px;
    }

    .approach h2 {
      margin-bottom: 0;
      font-family: var(--font-serif);
      font-size: clamp(2rem, 3.3vw, 3rem);
      font-weight: 600;
      letter-spacing: -0.035em;
    }

    .approach-copy p {
      margin-bottom: 14px;
      font-size: 0.96rem;
    }

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

    .goal-section {
      position: relative;
      overflow: hidden;
    }

    .goal-section::before {
      position: absolute;
      top: 90px;
      left: -120px;
      width: 290px;
      height: 290px;
      border-radius: 50%;
      content: "";
      background: rgba(220, 235, 228, 0.6);
      filter: blur(2px);
    }

    .goal-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 54px;
    }

    .goal-card {
      display: flex;
      min-height: 320px;
      flex-direction: column;
      padding: 29px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--paper);
      box-shadow: 0 4px 0 rgba(19, 55, 47, 0.02);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .goal-card:hover {
      border-color: rgba(40, 96, 82, 0.35);
      box-shadow: var(--shadow-sm);
      transform: translateY(-5px);
    }

    .goal-icon {
      display: grid;
      width: 51px;
      height: 51px;
      margin-bottom: 26px;
      place-items: center;
      border-radius: 15px;
      color: var(--forest-900);
      background: var(--sage);
    }

    .goal-card:nth-child(2) .goal-icon,
    .goal-card:nth-child(5) .goal-icon {
      background: var(--gold-light);
    }

    .goal-card:nth-child(3) .goal-icon,
    .goal-card:nth-child(6) .goal-icon {
      background: var(--coral-light);
    }

    .goal-card h3 {
      margin-bottom: 12px;
      font-family: var(--font-serif);
      font-size: 1.47rem;
      font-weight: 700;
    }

    .goal-card p {
      margin-bottom: 22px;
      font-size: 0.91rem;
    }

    .goal-card .text-link {
      margin-top: auto;
    }

    .planner-section {
      position: relative;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 95% 0%, rgba(242, 201, 104, 0.15), transparent 28%),
        var(--forest-950);
    }

    .planner-section::after {
      position: absolute;
      bottom: -240px;
      left: -190px;
      width: 560px;
      height: 560px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.025), 0 0 0 120px rgba(255, 255, 255, 0.018);
    }

    .planner-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      align-items: center;
      gap: 78px;
    }

    .planner-copy h2 {
      max-width: 560px;
      margin-bottom: 24px;
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4.8vw, 4.5rem);
      font-weight: 600;
      letter-spacing: -0.04em;
    }

    .planner-copy h2 em {
      color: var(--gold);
    }

    .planner-copy > p {
      color: rgba(255, 255, 255, 0.68);
      font-size: 1.02rem;
    }

    .planner-checks {
      display: grid;
      gap: 13px;
      margin: 30px 0 34px;
      padding: 0;
      list-style: none;
    }

    .planner-checks li {
      display: flex;
      align-items: center;
      gap: 11px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.9rem;
    }

    .planner-checks .icon {
      color: var(--gold);
    }

    .calculator {
      padding: 33px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 26px;
      color: var(--ink);
      background: var(--paper);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
    }

    .calculator-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 26px;
    }

    .calculator-header h3 {
      margin-bottom: 5px;
      font-family: var(--font-serif);
      font-size: 1.6rem;
    }

    .calculator-header p {
      margin-bottom: 0;
      font-size: 0.83rem;
    }

    .calculator-badge {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 99px;
      color: var(--forest-800);
      background: var(--sage);
      font-size: 0.7rem;
      font-weight: 700;
    }

    .calculator-badge .icon {
      width: 14px;
      height: 14px;
    }

    .calc-fields {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 24px;
    }

    .range-field {
      min-width: 0;
    }

    .field-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .field-top label {
      color: #526660;
      font-size: 0.78rem;
      font-weight: 600;
    }

    .field-top output {
      color: var(--forest-900);
      font-size: 0.9rem;
      font-weight: 800;
    }

    input[type="range"] {
      --range-progress: 50%;
      width: 100%;
      height: 6px;
      margin: 0;
      appearance: none;
      border-radius: 99px;
      outline: none;
      background: linear-gradient(to right, var(--forest-700) 0 var(--range-progress), #dfe7e3 var(--range-progress) 100%);
    }

    input[type="range"]::-webkit-slider-thumb {
      width: 19px;
      height: 19px;
      appearance: none;
      border: 3px solid var(--white);
      border-radius: 50%;
      background: var(--forest-700);
      box-shadow: 0 2px 8px rgba(18, 55, 47, 0.25);
      cursor: grab;
    }

    input[type="range"]::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border: 3px solid var(--white);
      border-radius: 50%;
      background: var(--forest-700);
      box-shadow: 0 2px 8px rgba(18, 55, 47, 0.25);
      cursor: grab;
    }

    input[type="range"]:focus-visible {
      outline: 2px solid var(--coral);
      outline-offset: 5px;
    }

    .range-scale {
      display: flex;
      justify-content: space-between;
      margin-top: 7px;
      color: #91a09b;
      font-size: 0.64rem;
    }

    .plan-result {
      margin-top: 27px;
      padding: 23px;
      border: 1px solid #cfe0d8;
      border-radius: 18px;
      background: var(--sage-light);
      transition: background-color 180ms ease, border-color 180ms ease;
    }

    .plan-result.is-over {
      border-color: #efb39b;
      background: #fff2ec;
    }

    .result-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 16px;
    }

    .result-heading span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .result-value {
      display: grid;
      text-align: right;
    }

    .result-value strong {
      color: var(--forest-900);
      font-family: var(--font-serif);
      font-size: 2.2rem;
      line-height: 1;
    }

    .result-value small {
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .allocation-bar {
      display: flex;
      height: 13px;
      overflow: hidden;
      border-radius: 99px;
      background: #dce4e0;
    }

    .allocation-segment {
      width: 0;
      min-width: 0;
      height: 100%;
      transition: width 250ms ease;
    }

    .allocation-segment.essentials {
      background: var(--forest-700);
    }

    .allocation-segment.lifestyle {
      background: #7eaa9a;
    }

    .allocation-segment.debt {
      background: var(--gold);
    }

    .allocation-segment.goals {
      background: var(--coral);
    }

    .allocation-legend {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 13px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 0.66rem;
    }

    .legend-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
    }

    .plan-message {
      min-height: 42px;
      margin: 15px 0 0;
      color: #536a63;
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .plan-result.is-over .result-value strong {
      color: #a64e30;
    }

    .calc-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
    }

    .calculator-footnote {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      margin: 15px 0 0;
      color: #7d8d87;
      font-size: 0.7rem;
    }

    .calculator-footnote .icon {
      width: 14px;
      height: 14px;
      margin-top: 2px;
    }

    .foundation-layout {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      align-items: center;
      gap: 78px;
    }

    .foundation-visual {
      position: relative;
      min-height: 690px;
    }

    .foundation-image {
      width: 100%;
      height: 690px;
      object-fit: cover;
      border-radius: 30px 30px 30px 120px;
      box-shadow: var(--shadow-lg);
    }

    .foundation-score {
      position: absolute;
      right: -34px;
      bottom: 40px;
      width: 245px;
      padding: 22px;
      border: 1px solid rgba(23, 50, 44, 0.08);
      border-radius: 20px;
      background: var(--paper);
      box-shadow: var(--shadow-lg);
    }

    .foundation-score-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 13px;
    }

    .foundation-score-top span {
      color: var(--muted);
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .foundation-score strong {
      display: block;
      font-family: var(--font-serif);
      font-size: 2rem;
      line-height: 1;
    }

    .foundation-score p {
      margin: 10px 0 0;
      font-size: 0.74rem;
    }

    .foundation-content > p {
      max-width: 670px;
      font-size: 1.02rem;
    }

    .foundation-steps {
      margin-top: 35px;
    }

    .foundation-step {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 20px;
      padding: 27px 0;
      border-top: 1px solid var(--line);
    }

    .step-number {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 50%;
      color: var(--forest-900);
      background: var(--sage);
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
    }

    .foundation-step:nth-child(2) .step-number {
      background: var(--gold-light);
    }

    .foundation-step:nth-child(3) .step-number {
      background: var(--coral-light);
    }

    .foundation-step h3 {
      margin: 3px 0 10px;
      font-family: var(--font-serif);
      font-size: 1.45rem;
    }

    .foundation-step p {
      margin-bottom: 13px;
      font-size: 0.9rem;
    }

    .step-points {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .step-points li {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 99px;
      color: #587068;
      background: rgba(255, 255, 255, 0.55);
      font-size: 0.7rem;
      font-weight: 600;
    }

    .inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 28px;
    }

    .investment-section {
      position: relative;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 5% 95%, rgba(233, 121, 80, 0.12), transparent 30%),
        var(--forest-950);
    }

    .investment-layout {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      align-items: center;
      gap: 80px;
    }

    .investment-copy h2 {
      margin-bottom: 24px;
      font-family: var(--font-serif);
      font-size: clamp(2.7rem, 5vw, 4.6rem);
      font-weight: 600;
      letter-spacing: -0.045em;
    }

    .investment-copy h2 em {
      color: var(--gold);
    }

    .investment-copy > p {
      color: rgba(255, 255, 255, 0.68);
      font-size: 1rem;
    }

    .investment-principles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 34px 0;
    }

    .investment-principle {
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.045);
    }

    .investment-principle .icon {
      width: 21px;
      height: 21px;
      margin-bottom: 12px;
      color: var(--gold);
    }

    .investment-principle h3 {
      margin-bottom: 7px;
      font-size: 0.91rem;
    }

    .investment-principle p {
      margin: 0;
      color: rgba(255, 255, 255, 0.56);
      font-size: 0.72rem;
      line-height: 1.55;
    }

    .investment-visual {
      position: relative;
      min-height: 610px;
      padding: 28px 28px 0 0;
    }

    .investment-image {
      width: 100%;
      height: 555px;
      object-fit: cover;
      border: 7px solid rgba(255, 255, 255, 0.08);
      border-radius: 30px 110px 30px 30px;
      box-shadow: 0 30px 75px rgba(0, 0, 0, 0.26);
    }

    .portfolio-card {
      position: absolute;
      right: 0;
      bottom: 0;
      width: min(380px, 88%);
      padding: 25px;
      border: 1px solid rgba(23, 50, 44, 0.08);
      border-radius: 20px;
      color: var(--ink);
      background: var(--paper);
      box-shadow: var(--shadow-lg);
    }

    .portfolio-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 17px;
    }

    .portfolio-card h3 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.25rem;
    }

    .portfolio-card-header span {
      color: var(--forest-700);
      font-size: 0.68rem;
      font-weight: 700;
    }

    .allocation-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .allocation-list li {
      display: grid;
      grid-template-columns: 10px 1fr auto;
      align-items: center;
      gap: 9px;
      color: #566963;
      font-size: 0.75rem;
    }

    .allocation-swatch {
      width: 9px;
      height: 9px;
      border-radius: 3px;
    }

    .allocation-list strong {
      color: var(--forest-900);
      font-size: 0.73rem;
    }

    .portfolio-note {
      margin: 15px 0 0;
      padding-top: 13px;
      border-top: 1px solid var(--line);
      color: #81908b;
      font-size: 0.66rem;
    }

    .retirement-section {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 95% 5%, rgba(255, 255, 255, 0.65), transparent 27%),
        var(--gold-light);
    }

    .retirement-section::after {
      position: absolute;
      top: 120px;
      right: -90px;
      width: 280px;
      height: 280px;
      border: 1px solid rgba(23, 50, 44, 0.1);
      border-radius: 50%;
      content: "";
    }

    .retirement-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      align-items: start;
      gap: 76px;
    }

    .retirement-copy h2 {
      margin-bottom: 22px;
      font-family: var(--font-serif);
      font-size: clamp(2.7rem, 4.8vw, 4.45rem);
      font-weight: 600;
      letter-spacing: -0.045em;
    }

    .retirement-copy h2 em {
      color: var(--coral);
    }

    .retirement-copy > p {
      font-size: 1rem;
    }

    .phase-list {
      position: relative;
      display: grid;
      gap: 28px;
      margin: 38px 0 0;
      padding: 0;
      list-style: none;
    }

    .phase-list::before {
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 7px;
      width: 1px;
      content: "";
      background: rgba(23, 50, 44, 0.2);
    }

    .phase {
      position: relative;
      padding-left: 36px;
    }

    .phase::before {
      position: absolute;
      top: 6px;
      left: 0;
      width: 15px;
      height: 15px;
      border: 4px solid var(--gold-light);
      border-radius: 50%;
      content: "";
      background: var(--forest-800);
      box-shadow: 0 0 0 1px rgba(23, 50, 44, 0.2);
    }

    .phase span {
      color: var(--forest-700);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .phase h3 {
      margin: 5px 0 8px;
      font-family: var(--font-serif);
      font-size: 1.27rem;
    }

    .phase p {
      margin-bottom: 0;
      font-size: 0.84rem;
    }

    .estimator {
      padding: 32px;
      border: 1px solid rgba(23, 50, 44, 0.1);
      border-radius: 26px;
      background: var(--paper);
      box-shadow: var(--shadow-lg);
    }

    .estimator-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 25px;
    }

    .estimator-header h3 {
      margin-bottom: 5px;
      font-family: var(--font-serif);
      font-size: 1.65rem;
    }

    .estimator-header p {
      margin-bottom: 0;
      font-size: 0.82rem;
    }

    .estimator-badge {
      padding: 7px 10px;
      border-radius: 99px;
      color: var(--forest-800);
      background: var(--sage);
      font-size: 0.67rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .number-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .number-field label {
      display: block;
      margin-bottom: 7px;
      color: #5c6e68;
      font-size: 0.73rem;
      font-weight: 600;
    }

    .number-input-wrap {
      position: relative;
    }

    .number-input-wrap span {
      position: absolute;
      top: 50%;
      left: 14px;
      color: #82908c;
      font-size: 0.9rem;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .number-field input {
      width: 100%;
      min-height: 49px;
      padding: 10px 13px 10px 29px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--forest-900);
      background: #fbfcfa;
      font-size: 0.88rem;
      font-weight: 700;
      outline: none;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .number-field input:focus {
      border-color: var(--forest-700);
      box-shadow: 0 0 0 3px rgba(40, 96, 82, 0.12);
    }

    .projection-panel {
      margin-top: 23px;
      padding: 23px;
      border-radius: 18px;
      color: var(--white);
      background: var(--forest-900);
    }

    .projection-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }

    .projection-top span {
      color: rgba(255, 255, 255, 0.65);
      font-size: 0.74rem;
    }

    .projection-top strong {
      display: block;
      margin-top: 4px;
      color: var(--gold);
      font-family: var(--font-serif);
      font-size: 2.35rem;
      line-height: 1;
    }

    .projection-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .projection-detail {
      padding: 13px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
    }

    .projection-detail span {
      display: block;
      color: rgba(255, 255, 255, 0.55);
      font-size: 0.65rem;
    }

    .projection-detail strong {
      display: block;
      margin-top: 4px;
      font-size: 0.9rem;
    }

    .projection-assumption {
      margin: 15px 0 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.66rem;
      line-height: 1.5;
    }

    .estimate-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 18px;
    }

    .resources-section {
      background: var(--paper);
    }

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 50px;
    }

    .resource-card {
      display: flex;
      overflow: hidden;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #fff;
      box-shadow: 0 5px 0 rgba(19, 55, 47, 0.02);
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

    .resource-card:hover {
      box-shadow: var(--shadow-sm);
      transform: translateY(-5px);
    }

    .resource-image {
      width: 100%;
      aspect-ratio: 1.62;
      object-fit: cover;
    }

    .resource-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 25px;
    }

    .resource-tag {
      align-self: flex-start;
      margin-bottom: 14px;
      padding: 6px 10px;
      border-radius: 99px;
      color: var(--forest-700);
      background: var(--sage-light);
      font-size: 0.67rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .resource-card h3 {
      margin-bottom: 11px;
      font-family: var(--font-serif);
      font-size: 1.42rem;
    }

    .resource-card p {
      margin-bottom: 22px;
      font-size: 0.87rem;
    }

    .resource-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      margin-top: auto;
      padding: 0;
      border: 0;
      color: var(--forest-800);
      background: none;
      font-size: 0.87rem;
      font-weight: 800;
    }

    .resource-button .icon {
      width: 17px;
      height: 17px;
      transition: transform 180ms ease;
    }

    .resource-button:hover .icon {
      transform: translateX(4px);
    }

    .resource-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin: 31px 0 0;
      color: var(--muted);
      font-size: 0.78rem;
      text-align: center;
    }

    .resource-note .icon {
      color: var(--forest-700);
    }

    .stories-section {
      background: var(--sage-light);
    }

    .story-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 50px;
    }

    .story-card {
      display: flex;
      min-height: 360px;
      flex-direction: column;
      padding: 29px;
      border: 1px solid rgba(40, 96, 82, 0.13);
      border-radius: var(--radius-md);
      background: var(--paper);
    }

    .story-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 19px;
      color: #d6a831;
      font-size: 0.84rem;
      letter-spacing: 0.1em;
    }

    .story-quote {
      flex: 1;
      margin-bottom: 24px;
      color: #39534b;
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-style: italic;
      line-height: 1.55;
    }

    .story-person {
      display: flex;
      align-items: center;
      gap: 13px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .story-person img {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border-radius: 50%;
      object-fit: cover;
    }

    .story-person strong,
    .story-person span {
      display: block;
    }

    .story-person strong {
      color: var(--forest-900);
      font-size: 0.85rem;
    }

    .story-person span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: 0.72fr 1.28fr;
      align-items: start;
      gap: 80px;
    }

    .faq-intro {
      position: sticky;
      top: 125px;
    }

    .faq-intro p {
      max-width: 430px;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

    .faq-list details {
      border-bottom: 1px solid var(--line);
    }

    .faq-list summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 0;
      color: var(--forest-950);
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      list-style: none;
      cursor: pointer;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-plus {
      position: relative;
      width: 27px;
      height: 27px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--sage-light);
    }

    .faq-plus::before,
    .faq-plus::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 11px;
      height: 1.5px;
      content: "";
      background: var(--forest-800);
      transform: translate(-50%, -50%);
      transition: transform 180ms ease;
    }

    .faq-plus::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-list details[open] .faq-plus::after {
      transform: translate(-50%, -50%) rotate(0);
    }

    .faq-answer {
      max-width: 730px;
      padding: 0 46px 25px 0;
      color: var(--muted);
      font-size: 0.91rem;
    }

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

    .newsletter-section {
      padding: 86px 0;
      background: var(--cream);
    }

    .newsletter-panel {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: 70px;
      overflow: hidden;
      padding: 58px 64px;
      border-radius: 30px;
      color: var(--white);
      background:
        radial-gradient(circle at 85% 0%, rgba(242, 201, 104, 0.2), transparent 33%),
        var(--forest-900);
      box-shadow: var(--shadow-lg);
    }

    .newsletter-panel::after {
      position: absolute;
      right: -110px;
      bottom: -150px;
      width: 350px;
      height: 350px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      content: "";
      box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.025);
    }

    .newsletter-panel > * {
      position: relative;
      z-index: 1;
    }

    .newsletter-panel h2 {
      margin-bottom: 14px;
      font-family: var(--font-serif);
      font-size: clamp(2.2rem, 4vw, 3.55rem);
      font-weight: 600;
      letter-spacing: -0.04em;
    }

    .newsletter-panel p {
      margin-bottom: 0;
      color: rgba(255, 255, 255, 0.68);
    }

    .newsletter-form {
      display: flex;
      gap: 9px;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.08);
    }

    .newsletter-form input {
      min-width: 0;
      flex: 1;
      padding: 12px 13px;
      border: 0;
      border-radius: 10px;
      color: var(--forest-950);
      background: var(--white);
      outline: none;
    }

    .newsletter-form input:focus {
      box-shadow: 0 0 0 3px rgba(242, 201, 104, 0.5);
    }

    .newsletter-form .button {
      flex: 0 0 auto;
    }

    .newsletter-note {
      margin-top: 11px !important;
      color: rgba(255, 255, 255, 0.46) !important;
      font-size: 0.68rem;
    }

    .newsletter-message {
      min-height: 22px;
      margin: 12px 0 0 !important;
      color: var(--gold) !important;
      font-size: 0.76rem;
      font-weight: 700;
    }

    .site-footer {
      padding: 74px 0 0;
      color: rgba(255, 255, 255, 0.72);
      background: var(--forest-950);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 0.7fr 0.7fr 0.95fr;
      gap: 50px;
      padding-bottom: 56px;
    }

    .footer-brand .brand-name {
      color: var(--white);
    }

    .footer-brand .brand-tagline {
      color: rgba(255, 255, 255, 0.5);
    }

    .footer-brand > p {
      max-width: 340px;
      margin: 22px 0 25px;
      color: rgba(255, 255, 255, 0.55);
      font-size: 0.84rem;
    }

    .social-links {
      display: flex;
      gap: 8px;
    }

    .social-link {
      display: grid;
      width: 39px;
      height: 39px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      color: var(--white);
      background: rgba(255, 255, 255, 0.04);
      font-size: 0.72rem;
      font-weight: 800;
      transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    .social-link:hover {
      color: var(--forest-950);
      background: var(--gold);
      transform: translateY(-2px);
    }

    .footer-column h3 {
      margin-bottom: 19px;
      color: var(--white);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .footer-links {
      display: grid;
      gap: 11px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.58);
      font-size: 0.8rem;
      transition: color 180ms ease;
    }

    .footer-links a:hover {
      color: var(--gold);
    }

    .footer-contact {
      display: grid;
      gap: 15px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-contact li {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 9px;
      color: rgba(255, 255, 255, 0.58);
      font-size: 0.8rem;
    }

    .footer-contact .icon {
      width: 17px;
      height: 17px;
      margin-top: 4px;
      color: var(--gold);
    }

    .footer-contact address {
      font-style: normal;
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 25px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom p {
      margin: 0;
      color: rgba(255, 255, 255, 0.42);
      font-size: 0.69rem;
    }

    .legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .legal-links a {
      color: rgba(255, 255, 255, 0.48);
      font-size: 0.69rem;
    }

    .legal-links a:hover {
      color: var(--gold);
    }

    .footer-disclaimer {
      padding: 20px 0 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .footer-disclaimer p {
      max-width: 1040px;
      margin: 0;
      color: rgba(255, 255, 255, 0.34);
      font-size: 0.64rem;
      line-height: 1.6;
    }

    .modal {
      position: fixed;
      z-index: 2000;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(7, 25, 21, 0.76);
      opacity: 0;
      backdrop-filter: blur(8px);
      transition: opacity 180ms ease;
    }

    .modal-card {
      position: relative;
      z-index: 1;
      width: min(700px, 100%);
      max-height: min(86vh, 850px);
      overflow-y: auto;
      padding: 34px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 24px;
      background: var(--paper);
      box-shadow: 0 35px 100px rgba(0, 0, 0, 0.38);
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .modal.is-visible .modal-backdrop {
      opacity: 1;
    }

    .modal.is-visible .modal-card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--forest-900);
      background: var(--white);
    }

    .modal-close:hover {
      background: var(--sage-light);
    }

    .modal-kicker {
      margin-bottom: 9px;
      padding-right: 45px;
      color: var(--forest-700);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .modal-title {
      max-width: 570px;
      margin-bottom: 16px;
      padding-right: 40px;
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .modal-intro {
      margin-bottom: 25px;
      font-size: 0.95rem;
    }

    .guide-section {
      margin-top: 22px;
    }

    .guide-section h3,
    .legal-body h3 {
      margin-bottom: 9px;
      color: var(--forest-900);
      font-family: var(--font-serif);
      font-size: 1.25rem;
    }

    .guide-section ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 20px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .guide-section li::marker {
      color: var(--coral);
    }

    .legal-body p,
    .legal-body li {
      color: var(--muted);
      font-size: 0.86rem;
    }

    .legal-body h3:not(:first-child) {
      margin-top: 25px;
    }

    .modal-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

    .js.reveal-ready .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 650ms ease, transform 650ms ease;
    }

    .js.reveal-ready .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .js.reveal-ready .reveal-delay-1 {
      transition-delay: 90ms;
    }

    .js.reveal-ready .reveal-delay-2 {
      transition-delay: 180ms;
    }

    .js.reveal-ready .reveal-delay-3 {
      transition-delay: 270ms;
    }

    @media (max-width: 1100px) {
      .nav-toggle {
        display: inline-flex;
      }

      .header-actions .nav-cta {
        display: none;
      }

      .primary-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: 0;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 0 0 22px 22px;
        background: rgba(255, 253, 248, 0.98);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transition: max-height 260ms ease, opacity 180ms ease, visibility 180ms ease, padding 260ms ease;
      }

      .primary-nav.is-open {
        max-height: 600px;
        padding: 18px;
        border-color: var(--line);
        opacity: 1;
        visibility: visible;
      }

      .nav-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px 18px;
      }

      .nav-link {
        padding: 12px 10px;
        border-radius: 10px;
      }

      .nav-link:hover {
        background: var(--sage-light);
      }

      .nav-link::after {
        display: none;
      }

      .hero-grid {
        grid-template-columns: 1fr 0.9fr;
        gap: 45px;
      }

      .fund-card {
        right: -15px;
      }

      .credit-card {
        left: -20px;
      }

      .approach-grid {
        grid-template-columns: 0.9fr 1.3fr;
      }

      .approach-grid > .text-link {
        grid-column: 2;
      }

      .planner-layout,
      .foundation-layout,
      .investment-layout,
      .retirement-layout {
        gap: 50px;
      }

      .footer-grid {
        grid-template-columns: 1.25fr repeat(3, 1fr);
        gap: 30px;
      }
    }

    @media (max-width: 960px) {
      .section {
        padding: 92px 0;
      }

      .hero {
        padding-top: 75px;
      }

      .hero-grid,
      .planner-layout,
      .foundation-layout,
      .investment-layout,
      .retirement-layout,
      .faq-layout {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        max-width: 790px;
      }

      .hero-visual {
        width: min(700px, 100%);
        margin-inline: auto;
      }

      .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .metric:nth-child(2)::after {
        display: none;
      }

      .metric:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
      }

      .goal-grid,
      .resource-grid,
      .story-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .goal-card:last-child,
      .resource-card:last-child,
      .story-card:last-child {
        grid-column: 1 / -1;
      }

      .foundation-visual {
        width: min(620px, 100%);
      }

      .investment-visual {
        width: min(700px, 100%);
        margin-inline: auto;
      }

      .retirement-copy {
        max-width: 720px;
      }

      .faq-intro {
        position: static;
      }

      .newsletter-panel {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 50px;
      }

      .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 760px) {
      .container {
        width: min(100% - 30px, var(--container));
      }

      .section {
        padding: 76px 0;
      }

      .announcement {
        font-size: 0.72rem;
      }

      .announcement a {
        margin-left: 4px;
      }

      .header-inner {
        min-height: 72px;
      }

      .brand img {
        width: 43px;
        height: 43px;
      }

      .brand-name {
        font-size: 1.2rem;
      }

      .brand-tagline {
        display: none;
      }

      .nav-links {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 65px 0 78px;
      }

      .hero h1 {
        font-size: clamp(3rem, 13vw, 4.4rem);
      }

      .hero-copy > p {
        font-size: 1rem;
      }

      .hero-visual {
        min-height: 480px;
      }

      .hero-image-frame {
        height: 460px;
        border-radius: 25px 25px 95px 25px;
      }

      .fund-card {
        top: 22px;
        right: -8px;
        width: 195px;
        padding: 14px;
      }

      .credit-card {
        bottom: 10px;
        left: -8px;
        width: 205px;
        padding: 14px;
      }

      .float-value {
        font-size: 1.25rem;
      }

      .metric {
        padding: 28px 15px;
      }

      .metric strong {
        font-size: 1.7rem;
      }

      .approach {
        padding: 62px 0;
      }

      .approach-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .approach-grid > .text-link {
        grid-column: auto;
      }

      .goal-grid,
      .resource-grid,
      .story-grid,
      .investment-principles {
        grid-template-columns: 1fr;
      }

      .goal-card:last-child,
      .resource-card:last-child,
      .story-card:last-child {
        grid-column: auto;
      }

      .goal-card {
        min-height: auto;
      }

      .calculator,
      .estimator {
        padding: 24px;
      }

      .calc-fields,
      .number-grid {
        grid-template-columns: 1fr;
      }

      .allocation-legend {
        grid-template-columns: repeat(2, 1fr);
      }

      .foundation-visual,
      .foundation-image {
        min-height: 500px;
        height: 500px;
      }

      .foundation-image {
        border-radius: 24px 24px 24px 80px;
      }

      .foundation-score {
        right: -4px;
        bottom: 18px;
        width: 220px;
      }

      .investment-visual {
        min-height: 530px;
        padding-right: 0;
      }

      .investment-image {
        height: 490px;
        border-radius: 24px 75px 24px 24px;
      }

      .portfolio-card {
        width: min(355px, 92%);
      }

      .newsletter-panel {
        padding: 37px 27px;
      }

      .newsletter-form {
        flex-direction: column;
      }

      .newsletter-form .button {
        width: 100%;
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
      }

      .modal-card {
        padding: 28px 22px;
      }
    }

    @media (max-width: 480px) {
      .hero-actions,
      .inline-actions,
      .calc-actions,
      .estimate-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .hero-actions .button,
      .inline-actions .button,
      .calc-actions .button,
      .estimate-actions .button {
        width: 100%;
      }

      .hero-visual {
        min-height: 445px;
      }

      .hero-image-frame {
        height: 425px;
      }

      .fund-card {
        right: 0;
        width: 178px;
      }

      .credit-card {
        left: 0;
        width: 188px;
      }

      .float-label {
        font-size: 0.64rem;
      }

      .calculator-header,
      .estimator-header,
      .result-heading,
      .projection-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .result-value,
      .projection-top {
        text-align: left;
      }

      .result-value strong,
      .projection-top strong {
        font-size: 2rem;
      }

      .foundation-step {
        grid-template-columns: 40px 1fr;
        gap: 13px;
      }

      .step-number {
        width: 38px;
        height: 38px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-column: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

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

      .js.reveal-ready .reveal {
        opacity: 1;
        transform: none;
      }
    }
  </style>
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden">
    <symbol id="icon-arrow-right" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
    <symbol id="icon-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
    <symbol id="icon-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
    <symbol id="icon-close" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></symbol>
    <symbol id="icon-wallet" viewBox="0 0 24 24"><path d="M4 6.5h14a2 2 0 0 1 2 2V19H5a2 2 0 0 1-2-2V7a3 3 0 0 1 3-3h12v3"/><path d="M16 11h4v4h-4a2 2 0 0 1 0-4Z"/></symbol>
    <symbol id="icon-shield" viewBox="0 0 24 24"><path d="M12 3 4.5 6v5.5c0 4.7 3.1 7.8 7.5 9.5 4.4-1.7 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m8.5 12 2.2 2.2 4.8-5"/></symbol>
    <symbol id="icon-card" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M7 15h3"/></symbol>
    <symbol id="icon-chart" viewBox="0 0 24 24"><path d="M4 19V9M10 19V5M16 19v-7M22 19V3"/><path d="m4 7 6-4 6 8 6-7"/></symbol>
    <symbol id="icon-umbrella" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 18 0H3Z"/><path d="M12 3v15.5a2.5 2.5 0 0 0 5 0M12 12v6.5"/></symbol>
    <symbol id="icon-receipt" viewBox="0 0 24 24"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Z"/><path d="M9 8h6M9 12h6M9 16h3"/></symbol>
    <symbol id="icon-calculator" viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8M8 11h2M14 11h2M8 15h2M14 15h2M8 18h2M14 18h2"/></symbol>
    <symbol id="icon-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></symbol>
    <symbol id="icon-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></symbol>
    <symbol id="icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
    <symbol id="icon-compass" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z"/></symbol>
    <symbol id="icon-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></symbol>
    <symbol id="icon-phone" viewBox="0 0 24 24"><path d="M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-4-2-2 2c-3.4-1.5-6-4.1-7.5-7.5l2-2-2.5-4Z"/></symbol>
    <symbol id="icon-pin" viewBox="0 0 24 24"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></symbol>
  </svg>

  <div class="announcement">
    New: Your monthly Money Reset is ready.
    <a href="#planner">Build your plan <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
  </div>

  <header class="site-header" id="site-header">
    <div class="container header-inner">
      <a class="brand" href="#main-content" aria-label="LumaLedger home">
        <img src="https://placehold.co/96x96/153a32/f7cf6b?text=LL&amp;font=poppins" width="48" height="48" alt="LumaLedger logo">
        <span class="brand-copy">
          <span class="brand-name">LumaLedger</span>
          <span class="brand-tagline">Make every money move with clarity.</span>
        </span>
      </a>

      <nav class="primary-nav" id="primary-nav" aria-label="Primary navigation">
        <div class="nav-links">
          <a class="nav-link" href="#budgeting">Budgeting</a>
          <a class="nav-link" href="#credit">Credit</a>
          <a class="nav-link" href="#investment">Investment</a>
          <a class="nav-link" href="#retirement">Retirement</a>
          <a class="nav-link" href="#tax-planning">Tax Planning</a>
          <a class="nav-link" href="#resources">Resources</a>
          <a class="nav-link" href="#stories">Success Stories</a>
        </div>
      </nav>

      <div class="header-actions">
        <a class="button button-primary button-small nav-cta" href="#planner">Build a plan</a>
        <button class="nav-toggle" id="nav-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation">
          <svg class="icon" aria-hidden="true"><use href="#icon-menu"></use></svg>
        </button>
      </div>
    </div>
  </header>

  <main id="main-content">
    <section class="hero" id="dashboard">
      <div class="container hero-grid">
        <div class="hero-copy reveal">
          <span class="eyebrow">Personal finance, personalized</span>
          <h1>A clearer plan for your money. <em>A more confident life.</em></h1>
          <p>LumaLedger brings budgeting, credit, investing, retirement, and tax planning into one calm, practical system. Build a plan around your priorities, understand the next right move, and move forward without second-guessing every purchase.</p>
          <div class="hero-actions">
            <a class="button button-primary" href="#planner">Build my free plan <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
            <a class="button button-ghost" href="#resources">Explore the library</a>
          </div>
          <div class="hero-proof" aria-label="Platform benefits">
            <span><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>Free to start</span>
            <span><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>No account required</span>
            <span><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>Your data stays private</span>
          </div>
        </div>

        <div class="hero-visual reveal reveal-delay-2">
          <div class="hero-image-frame">
            <img class="hero-photo" src="https://placehold.co/1000x820/d9e8e2/153a32?text=Your+money%2C+made+clear&amp;font=lora" width="1000" height="820" alt="Calm financial future represented by a LumaLedger image placeholder" fetchpriority="high">
            <div class="image-caption">
              <div>
                <strong>One connected money plan</strong>
                <span>Goals first. Numbers made useful.</span>
              </div>
              <svg class="icon" aria-hidden="true"><use href="#icon-target"></use></svg>
            </div>
          </div>

          <div class="hero-float-card fund-card">
            <div class="float-card-top">
              <span class="float-icon gold"><svg class="icon" aria-hidden="true"><use href="#icon-shield"></use></svg></span>
              <span class="float-label">Emergency fund</span>
            </div>
            <strong class="float-value">$12,400</strong>
            <span class="float-label">67% of your 6-month target</span>
            <div class="progress-line" aria-hidden="true"><span></span></div>
          </div>

          <div class="hero-float-card credit-card">
            <div class="float-card-top">
              <div>
                <span class="float-label">Credit score</span>
                <strong class="float-value">742</strong>
              </div>
              <span class="score-ring" aria-label="Score of 742"><span>742</span></span>
            </div>
            <span class="float-label">Up 18 points in 6 months</span>
          </div>
        </div>
      </div>
    </section>

    <section class="metrics" aria-label="LumaLedger community statistics">
      <div class="container metrics-grid">
        <div class="metric reveal">
          <strong>12,400+</strong>
          <span>personal plans started</span>
        </div>
        <div class="metric reveal reveal-delay-1">
          <strong>34</strong>
          <span>free learning resources</span>
        </div>
        <div class="metric reveal reveal-delay-2">
          <strong>4.9/5</strong>
          <span>average member rating</span>
        </div>
        <div class="metric reveal reveal-delay-3">
          <strong>100%</strong>
          <span>independent, educational guidance</span>
        </div>
      </div>
    </section>

    <section class="approach" id="about">
      <div class="container approach-grid">
        <div class="reveal">
          <span class="eyebrow">The LumaLedger approach</span>
          <h2>Guidance you can use. Tools you can trust.</h2>
        </div>
        <div class="approach-copy reveal reveal-delay-1">
          <p>Money advice should make your life feel more manageable, not turn you into a spreadsheet expert. LumaLedger translates complex financial concepts into practical decisions you can make today, with plain-language explanations and transparent assumptions.</p>
          <p>Every tool starts with your priorities. We organize budgets, credit habits, investment education, retirement milestones, and tax planning into one connected experience—without selling your data or steering you toward a product.</p>
        </div>
        <a class="text-link reveal reveal-delay-2" href="#budgeting">See how it works <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
      </div>
    </section>

    <section class="section goal-section" id="budgeting">
      <div class="container">
        <div class="centered-heading reveal">
          <span class="eyebrow">Start where you are</span>
          <h2 class="section-title">One life. <em>One connected money plan.</em></h2>
          <p class="section-intro">Choose the area that feels most urgent, or start with a complete financial snapshot. LumaLedger helps you connect each decision to the goals that matter most.</p>
        </div>

        <div class="goal-grid">
          <article class="goal-card reveal">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-wallet"></use></svg></span>
            <h3>Budgeting</h3>
            <p>See where your money actually goes, separate needs from wants, and give every dollar a job. A flexible plan makes tradeoffs visible before they become stressful.</p>
            <a class="text-link" href="#planner">Start a budget <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>

          <article class="goal-card reveal reveal-delay-1">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-shield"></use></svg></span>
            <h3>Emergency Fund</h3>
            <p>Turn unexpected expenses from a crisis into a manageable inconvenience. Learn how to size a cash reserve and build it in steady, achievable increments.</p>
            <a class="text-link" href="#credit">Build your safety net <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>

          <article class="goal-card reveal reveal-delay-2">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-card"></use></svg></span>
            <h3>Credit Improvement</h3>
            <p>Understand how payment history, credit utilization, and account age influence your credit score. Make focused changes that can strengthen your borrowing profile over time.</p>
            <a class="text-link" href="#credit">Improve your credit <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>

          <article class="goal-card reveal">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-chart"></use></svg></span>
            <h3>Thoughtful Investing</h3>
            <p>Explore asset allocation, diversification, and risk tolerance without the jargon. Build an investment framework based on your time horizon—not market headlines.</p>
            <a class="text-link" href="#investment">Learn to invest <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>

          <article class="goal-card reveal reveal-delay-1">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-umbrella"></use></svg></span>
            <h3>Retirement by Design</h3>
            <p>Set milestones, estimate your future savings, and understand how contributions compound. A flexible plan makes the long horizon easier to stay committed to.</p>
            <a class="text-link" href="#retirement">Plan your retirement <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>

          <article class="goal-card reveal reveal-delay-2">
            <span class="goal-icon"><svg class="icon" aria-hidden="true"><use href="#icon-receipt"></use></svg></span>
            <h3>Tax-Smarter Planning</h3>
            <p>Organize deductions, withholding, and estimated payments throughout the year. Learn which planning conversations to have before tax season arrives.</p>
            <a class="text-link" href="#tax-planning">Explore tax planning <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </article>
        </div>
      </div>
    </section>

    <section class="section planner-section" id="planner">
      <div class="container planner-layout">
        <div class="planner-copy reveal">
          <span class="eyebrow eyebrow-light">Interactive budget planner</span>
          <h2>Your plan should fit <em>your real life.</em></h2>
          <p>The popular 50/30/20 budget is a useful starting point, but your percentages should reflect your income, obligations, and priorities. This planner gives you a flexible snapshot you can adjust as life changes.</p>
          <p>Enter four monthly numbers to see how much room remains for savings, debt reduction, and future goals. Nothing is uploaded, and the tool is ready to use in under a minute.</p>
          <ul class="planner-checks">
            <li><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>Calculates your monthly remainder instantly</li>
            <li><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>Shows needs, wants, debt, and goals at a glance</li>
            <li><svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>Saves your plan privately on this device</li>
          </ul>
        </div>

        <div class="calculator reveal reveal-delay-2" id="budget-calculator">
          <div class="calculator-header">
            <div>
              <h3>Build your monthly snapshot</h3>
              <p>Use take-home pay—the amount after taxes and deductions.</p>
            </div>
            <span class="calculator-badge"><svg class="icon" aria-hidden="true"><use href="#icon-lock"></use></svg>Private</span>
          </div>

          <div class="calc-fields">
            <div class="range-field">
              <div class="field-top">
                <label for="budget-income">Monthly take-home pay</label>
                <output id="budget-income-value" for="budget-income">$6,400</output>
              </div>
              <input id="budget-income" type="range" min="2500" max="15000" step="100" value="6400">
              <div class="range-scale"><span>$2.5k</span><span>$15k</span></div>
            </div>

            <div class="range-field">
              <div class="field-top">
                <label for="budget-essentials">Housing &amp; essentials</label>
                <output id="budget-essentials-value" for="budget-essentials">$2,450</output>
              </div>
              <input id="budget-essentials" type="range" min="500" max="12000" step="50" value="2450">
              <div class="range-scale"><span>$500</span><span>$12k</span></div>
            </div>

            <div class="range-field">
              <div class="field-top">
                <label for="budget-lifestyle">Lifestyle &amp; flexible spending</label>
                <output id="budget-lifestyle-value" for="budget-lifestyle">$1,700</output>
              </div>
              <input id="budget-lifestyle" type="range" min="0" max="7000" step="50" value="1700">
              <div class="range-scale"><span>$0</span><span>$7k</span></div>
            </div>

            <div class="range-field">
              <div class="field-top">
                <label for="budget-debt">Debt payments</label>
                <output id="budget-debt-value" for="budget-debt">$550</output>
              </div>
              <input id="budget-debt" type="range" min="0" max="5000" step="25" value="550">
              <div class="range-scale"><span>$0</span><span>$5k</span></div>
            </div>
          </div>

          <div class="plan-result" id="plan-result" aria-live="polite">
            <div class="result-heading">
              <span id="budget-result-label">Available for your goals</span>
              <div class="result-value">
                <strong id="budget-remaining">$1,700</strong>
                <small>per month</small>
              </div>
            </div>

            <div class="allocation-bar" aria-hidden="true">
              <span class="allocation-segment essentials" id="budget-bar-essentials"></span>
              <span class="allocation-segment lifestyle" id="budget-bar-lifestyle"></span>
              <span class="allocation-segment debt" id="budget-bar-debt"></span>
              <span class="allocation-segment goals" id="budget-bar-goals"></span>
            </div>

            <div class="allocation-legend">
              <span class="legend-item"><span class="legend-dot" style="background:var(--forest-700)"></span>Essentials <strong id="budget-pct-essentials">38%</strong></span>
              <span class="legend-item"><span class="legend-dot" style="background:#7eaa9a"></span>Lifestyle <strong id="budget-pct-lifestyle">27%</strong></span>
              <span class="legend-item"><span class="legend-dot" style="background:var(--gold)"></span>Debt <strong id="budget-pct-debt">9%</strong></span>
              <span class="legend-item"><span class="legend-dot" style="background:var(--coral)"></span>Goals <strong id="budget-pct-goals">27%</strong></span>
            </div>

            <p class="plan-message" id="budget-message">You have room to cover current obligations and still make meaningful progress toward your future goals.</p>
          </div>

          <div class="calc-actions">
            <button class="button button-primary button-small" id="save-budget" type="button">Save this plan</button>
            <button class="button button-light button-small" id="reset-budget" type="button">Reset numbers</button>
          </div>
          <p class="calculator-footnote"><svg class="icon" aria-hidden="true"><use href="#icon-lock"></use></svg>Your numbers stay in your browser. This educational tool does not provide personalized financial advice.</p>
        </div>
      </div>
    </section>

    <section class="section" id="credit">
      <div class="container foundation-layout">
        <div class="foundation-visual reveal">
          <img class="foundation-image" src="https://placehold.co/720x900/e9f0eb/153a32?text=Build+your+financial+foundation&amp;font=lora" width="720" height="900" alt="Illustration representing a strong personal financial foundation" loading="lazy">
          <div class="foundation-score">
            <div class="foundation-score-top">
              <span>Foundation score</span>
              <svg class="icon" aria-hidden="true" style="color:var(--coral)"><use href="#icon-target"></use></svg>
            </div>
            <strong>82 / 100</strong>
            <p>Your next best step: increase your cash reserve by $1,600.</p>
          </div>
        </div>

        <div class="foundation-content">
          <div class="reveal">
            <span class="eyebrow">The financial foundation</span>
            <h2 class="section-title">Strong money starts with <em>the basics.</em></h2>
            <p>Before optimizing investments or chasing a higher return, protect the essentials: enough liquidity to handle surprises, a healthy credit profile, and a tax strategy that leaves room for the year ahead.</p>
            <p>These three systems reinforce one another. Good cash management can reduce reliance on credit, consistent payments can improve borrowing terms, and a proactive tax plan can preserve more of the income you earn.</p>
          </div>

          <div class="foundation-steps">
            <article class="foundation-step reveal" id="emergency-fund">
              <span class="step-number">1</span>
              <div>
                <h3>Build an emergency fund that fits your life</h3>
                <p>Start with your essential monthly costs, then aim for three to six months of those expenses. If your income is variable or your household has only one earner, a larger target may be more appropriate.</p>
                <p>Keep the first portion of the reserve in a safe, liquid place you can access quickly. As the balance grows, you can consider how much of it should remain available versus being invested for longer-term goals.</p>
                <ul class="step-points" aria-label="Emergency fund considerations">
                  <li>3–6 months of essentials</li>
                  <li>High liquidity first</li>
                  <li>Automate contributions</li>
                </ul>
              </div>
            </article>

            <article class="foundation-step reveal">
              <span class="step-number">2</span>
              <div>
                <h3>Improve your credit score with consistent habits</h3>
                <p>Your credit score summarizes patterns in your credit history, but there is no single action that repairs everything overnight. Payment history and credit utilization are often among the most influential factors, followed by account age and the mix of credit types.</p>
                <p>Keep revolving balances well below your available limits, pay on time, and avoid closing an old account simply because it has a zero balance. Reviewing your reports for errors and approaching lenders only when you have a clear purpose can also protect your profile.</p>
                <ul class="step-points" aria-label="Credit score considerations">
                  <li>Pay on time</li>
                  <li>Keep utilization low</li>
                  <li>Check reports annually</li>
                </ul>
              </div>
            </article>

            <article class="foundation-step reveal" id="tax-planning">
              <span class="step-number">3</span>
              <div>
                <h3>Plan for taxes before the bill arrives</h3>
                <p>Tax planning is more than organizing receipts in April. Reviewing withholding, estimated payments, available deductions, and employer benefits throughout the year can help you avoid surprises and make more informed financial decisions.</p>
                <p>Possible planning conversations include retirement contribution limits, charitable giving, eligible education expenses, and the timing of income or deductions. Rules and personal circumstances vary, so confirm your strategy with a qualified tax professional before making a filing decision.</p>
                <ul class="step-points" aria-label="Tax planning considerations">
                  <li>Review withholding</li>
                  <li>Track deductions</li>
                  <li>Estimate quarterly</li>
                </ul>
              </div>
            </article>
          </div>

          <div class="inline-actions reveal">
            <a class="button button-primary" href="#planner">Build my budget <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
            <a class="button button-ghost" href="#resources">Browse the toolkit</a>
          </div>
        </div>
      </div>
    </section>

    <section class="section investment-section" id="investment">
      <div class="container investment-layout">
        <div class="investment-copy reveal">
          <span class="eyebrow eyebrow-light">Investment education</span>
          <h2>Invest with intention, <em>not impulse.</em></h2>
          <p>A sound investment plan starts with your time horizon, risk tolerance, and financial capacity—not the latest market headline. LumaLedger teaches you to think in asset allocation, costs, diversification, and behavior before you choose where to put money.</p>
          <p>Diversification means spreading exposure across different investments so that one company, sector, or region is less likely to determine your entire outcome. It cannot remove risk, but it can reduce concentration and make a portfolio more resilient across changing market conditions.</p>

          <div class="investment-principles">
            <div class="investment-principle">
              <svg class="icon" aria-hidden="true"><use href="#icon-compass"></use></svg>
              <h3>Risk tolerance</h3>
              <p>Balance your willingness to accept temporary losses with your ability to financially withstand them.</p>
            </div>
            <div class="investment-principle">
              <svg class="icon" aria-hidden="true"><use href="#icon-target"></use></svg>
              <h3>Time horizon</h3>
              <p>Longer timelines can help you stay invested through volatility, but each goal deserves its own plan.</p>
            </div>
            <div class="investment-principle">
              <svg class="icon" aria-hidden="true"><use href="#icon-chart"></use></svg>
              <h3>Asset allocation</h3>
              <p>Choose a mix of cash, fixed income, equities, and other assets that matches the role each investment plays.</p>
            </div>
          </div>

          <div class="inline-actions">
            <a class="button button-gold" href="#resources">Explore the investing library <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></a>
          </div>
        </div>

        <div class="investment-visual reveal reveal-delay-2">
          <img class="investment-image" src="https://placehold.co/760x680/285346/f8f4e8?text=Diversify+with+purpose&amp;font=montserrat" width="760" height="680" alt="Illustration representing a diversified investment approach" loading="lazy">
          <div class="portfolio-card">
            <div class="portfolio-card-header">
              <h3>Portfolio blueprint</h3>
              <span>Learning model</span>
            </div>
            <ul class="allocation-list">
              <li><span class="allocation-swatch" style="background:var(--gold)"></span><span>Cash &amp; stability</span><strong>Near-term needs</strong></li>
              <li><span class="allocation-swatch" style="background:var(--forest-700)"></span><span>Diversified core</span><strong>Broad exposure</strong></li>
              <li><span class="allocation-swatch" style="background:var(--coral)"></span><span>Long-term growth</span><strong>Time &amp; risk</strong></li>
            </ul>
            <p class="portfolio-note">Illustrative framework only—not a portfolio recommendation. Actual allocations depend on your goals, time horizon, and tolerance for risk.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section retirement-section" id="retirement">
      <div class="container retirement-layout">
        <div class="retirement-copy reveal">
          <span class="eyebrow">Retirement planning</span>
          <h2>Make the long horizon <em>feel closer.</em></h2>
          <p>Retirement is not one date or one account. It is a sequence of decisions: how much to save, which expenses may change, when to begin drawing income, and how much flexibility you want in the plan.</p>
          <p>Breaking the journey into phases makes it easier to focus on what you can control now. Review your assumptions annually as your income, family needs, and market environment change.</p>

          <ol class="phase-list">
            <li class="phase">
              <span>Phase one · Build</span>
              <h3>Your 20s and 30s: create momentum</h3>
              <p>Time is your strongest advantage. Automate contributions, capture employer matches, and build a diversified foundation before you optimize every detail.</p>
            </li>
            <li class="phase">
              <span>Phase two · Optimize</span>
              <h3>Your 40s and 50s: turn growth into readiness</h3>
              <p>Review savings rate, expected income needs, taxes, and sequence-of-returns risk. Increase contributions when possible and adjust the plan as priorities evolve.</p>
            </li>
            <li class="phase">
              <span>Phase three · Transition</span>
              <h3>Your 60s and beyond: turn assets into income</h3>
              <p>Coordinate withdrawals, Social Security, pensions, and taxes with a clear spending plan. Build a flexible income strategy rather than relying on a single withdrawal method.</p>
            </li>
          </ol>
        </div>

        <div class="estimator reveal reveal-delay-2" id="retirement-estimator">
          <div class="estimator-header">
            <div>
              <h3>Retirement savings snapshot</h3>
              <p>Adjust the numbers to see an illustrative projection.</p>
            </div>
            <span class="estimator-badge">Live estimate</span>
          </div>

          <div class="number-grid">
            <div class="number-field">
              <label for="ret-current-age">Current age</label>
              <div class="number-input-wrap">
                <input id="ret-current-age" type="number" min="18" max="80" value="34" inputmode="numeric">
              </div>
            </div>
            <div class="number-field">
              <label for="retirement-age">Target retirement age</label>
              <div class="number-input-wrap">
                <input id="retirement-age" type="number" min="40" max="90" value="65" inputmode="numeric">
              </div>
            </div>
            <div class="number-field">
              <label for="monthly-savings">Monthly contribution</label>
              <div class="number-input-wrap">
                <span>$</span>
                <input id="monthly-savings" type="number" min="0" max="50000" step="50" value="1200" inputmode="decimal">
              </div>
            </div>
            <div class="number-field">
              <label for="current-portfolio">Current portfolio</label>
              <div class="number-input-wrap">
                <span>$</span>
                <input id="current-portfolio" type="number" min="0" max="10000000" step="500" value="48000" inputmode="decimal">
              </div>
            </div>
          </div>

          <div class="projection-panel" aria-live="polite">
            <div class="projection-top">
              <span>Illustrative portfolio at retirement
                <strong id="retirement-years">31 years from now</strong>
              </span>
              <div>
                <span>Projected value</span>
                <strong id="retirement-value">$1,615,000</strong>
              </div>
            </div>
            <div class="projection-details">
              <div class="projection-detail">
                <span>Illustrative first-year draw at 4%</span>
                <strong id="retirement-annual-income">$64,600 / year</strong>
              </div>
              <div class="projection-detail">
                <span>Illustrative monthly amount</span>
                <strong id="retirement-monthly-income">$5,383 / month</strong>
              </div>
            </div>
            <p class="projection-assumption">This educational estimate assumes 6% annual nominal growth, monthly compounding, and no taxes, fees, inflation, or market volatility. Actual results will vary.</p>
          </div>

          <div class="estimate-actions">
            <button class="button button-primary button-small" id="save-estimate" type="button">Save estimate</button>
            <button class="button button-light button-small" type="button" data-guide="retirement">Get the checklist</button>
          </div>
        </div>
      </div>
    </section>

    <section class="section resources-section" id="resources">
      <div class="container">
        <div class="centered-heading reveal">
          <span class="eyebrow">The LumaLedger library</span>
          <h2 class="section-title">Practical guidance for <em>real financial decisions.</em></h2>
          <p class="section-intro">Clear, downloadable guides for the moments when a checklist, a framework, or a little plain-language context can make all the difference. New resources are added every month.</p>
        </div>

        <div class="resource-grid">
          <article class="resource-card reveal">
            <img class="resource-image" src="https://placehold.co/640x400/f2dfb0/153a32?text=Emergency+Fund+Field+Guide&amp;font=poppins" width="640" height="400" alt="Emergency Fund Field Guide cover" loading="lazy">
            <div class="resource-body">
              <span class="resource-tag">Free guide · 8 min read</span>
              <h3>The Emergency Fund Field Guide</h3>
              <p>Calculate a realistic reserve, choose where to hold it, and build contributions that fit your budget. Includes a one-page action checklist.</p>
              <button class="resource-button" type="button" data-guide="emergency">Download guide <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></button>
            </div>
          </article>

          <article class="resource-card reveal reveal-delay-1">
            <img class="resource-image" src="https://placehold.co/640x400/d9e8e3/153a32?text=Investing+Without+the+Jargon&amp;font=poppins" width="640" height="400" alt="Investing Without the Jargon guide cover" loading="lazy">
            <div class="resource-body">
              <span class="resource-tag">Guide · 11 min read</span>
              <h3>Investing Without the Jargon</h3>
              <p>Understand risk, diversification, fees, time horizon, and asset allocation through five practical questions every investor should consider.</p>
              <button class="resource-button" type="button" data-guide="investing">Download guide <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></button>
            </div>
          </article>

          <article class="resource-card reveal reveal-delay-2">
            <img class="resource-image" src="https://placehold.co/640x400/f4ded2/153a32?text=Credit+Confidence+Checklist&amp;font=poppins" width="640" height="400" alt="Credit Confidence Checklist cover" loading="lazy">
            <div class="resource-body">
              <span class="resource-tag">Checklist · 6 min read</span>
              <h3>The Credit Confidence Checklist</h3>
              <p>Review utilization, payments, account age, and report errors with a focused 30-day improvement plan you can complete at your own pace.</p>
              <button class="resource-button" type="button" data-guide="credit">Download guide <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></button>
            </div>
          </article>
        </div>

        <p class="resource-note reveal"><svg class="icon" aria-hidden="true"><use href="#icon-mail"></use></svg>Get every new guide in the Monday Money Note.</p>
      </div>
    </section>

    <section class="section stories-section" id="stories">
      <div class="container">
        <div class="centered-heading reveal">
          <span class="eyebrow">Member stories</span>
          <h2 class="section-title">Small steps. <em>Meaningful momentum.</em></h2>
          <p class="section-intro">Real progress often begins with one clear next step. These members share how a practical system helped them move from intention to action.</p>
        </div>

        <div class="story-grid">
          <article class="story-card reveal">
            <div class="story-stars" aria-label="Five out of five stars">★★★★★</div>
            <blockquote class="story-quote">“I used to check three banking apps just to understand what had happened. Now I open one monthly snapshot, adjust two things, and stop worrying for the rest of the month.”</blockquote>
            <div class="story-person">
              <img src="https://i.pravatar.cc/120?u=maya-chen" width="48" height="48" alt="Portrait of Maya Chen" loading="lazy">
              <div>
                <strong>Maya Chen</strong>
                <span>Product designer · 8 months with LumaLedger</span>
              </div>
            </div>
          </article>

          <article class="story-card reveal reveal-delay-1">
            <div class="story-stars" aria-label="Five out of five stars">★★★★★</div>
            <blockquote class="story-quote">“The emergency fund guide helped me stop treating a savings account like a place for leftovers. Automating $150 each month gave me $3,600 in six months—and a lot more breathing room.”</blockquote>
            <div class="story-person">
              <img src="https://i.pravatar.cc/120?u=andre-williams" width="48" height="48" alt="Portrait of Andre Williams" loading="lazy">
              <div>
                <strong>Andre Williams</strong>
                <span>Operations manager · 1 year with LumaLedger</span>
              </div>
            </div>
          </article>

          <article class="story-card reveal reveal-delay-2">
            <div class="story-stars" aria-label="Five out of five stars">★★★★★</div>
            <blockquote class="story-quote">“I finally understood that improving my credit was not about finding one magic trick. A lower card balance, automatic payments, and one annual report review were the whole plan.”</blockquote>
            <div class="story-person">
              <img src="https://i.pravatar.cc/120?u=sofia-patel" width="48" height="48" alt="Portrait of Sofia Patel" loading="lazy">
              <div>
                <strong>Sofia Patel</strong>
                <span>Small business owner · 14 months with LumaLedger</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="faq">
      <div class="container faq-layout">
        <div class="faq-intro reveal">
          <span class="eyebrow">Frequently asked</span>
          <h2 class="section-title">Good questions make <em>better plans.</em></h2>
          <p>Here are a few fundamentals that can help you make sense of the moving parts. For advice about your specific situation, speak with a qualified financial or tax professional.</p>
        </div>

        <div class="faq-list reveal reveal-delay-1">
          <details>
            <summary>Is LumaLedger a bank or investment company?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>No. LumaLedger is an educational personal finance platform. We provide planning tools, general information, and learning resources; we do not hold deposits, recommend individual securities, or manage assets on your behalf.</p>
            </div>
          </details>

          <details>
            <summary>What is the 50/30/20 budgeting rule?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>It is a simple starting point that assigns 50% of take-home income to needs, 30% to wants, and 20% to savings and debt reduction. High-cost locations, family obligations, variable income, and medical expenses can make those percentages unrealistic, so use the framework as a diagnostic rather than a hard rule.</p>
            </div>
          </details>

          <details>
            <summary>How much should I keep in an emergency fund?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>Many households start with three to six months of essential expenses. You may need more if your income is volatile, you support dependents, or your health and job risks are elevated. Calculate essential monthly costs first, then choose a target that protects your household without preventing you from save for other goals.</p>
            </div>
          </details>

          <details>
            <summary>What improves a credit score fastest?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>There is no guaranteed quick fix, but paying on time and keeping revolving credit utilization lower can have a meaningful effect. You can also review your reports for errors and ask your card issuer whether your account has a lower-fee or lower-rate balance-transfer option when appropriate.</p>
            </div>
          </details>

          <details>
            <summary>How much should I invest?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>Start by funding near-term goals and maintaining an adequate cash reserve. Then consider what you can contribute consistently after essentials, planned debt payments, and high-interest obligations. The right portfolio mix should reflect your time horizon, loss tolerance, and diversification needs.</p>
            </div>
          </details>

          <details>
            <summary>When should I start planning for retirement?<span class="faq-plus" aria-hidden="true"></span></summary>
            <div class="faq-answer">
              <p>Earlier contributions benefit from more years of compounding, but a focused plan at any stage can still improve your trajectory. A useful first step is to estimate your retirement spending, identify reliable income sources, and calculate the savings gap you need to close.</p>
            </div>
          </details>
        </div>
      </div>
    </section>

    <section class="newsletter-section" id="newsletter">
      <div class="container">
        <div class="newsletter-panel reveal">
          <div>
            <span class="eyebrow eyebrow-light">The Monday Money Note</span>
            <h2>Your next money decision can be the clearest one yet.</h2>
            <p>One useful idea, one practical tool, and one small action to take this week—written for real life and delivered every Monday morning.</p>
          </div>
          <div>
            <form class="newsletter-form" id="newsletter-form">
              <label class="sr-only" for="newsletter-email">Email address</label>
              <input id="newsletter-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required>
              <button class="button button-gold" type="submit">Send me the note</button>
            </form>
            <p class="newsletter-note">No spam. No product pitches. Unsubscribe whenever you like.</p>
            <p class="newsletter-message" id="newsletter-message" role="status"></p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="brand" href="#main-content" aria-label="LumaLedger home">
            <img src="https://placehold.co/96x96/153a32/f7cf6b?text=LL&amp;font=poppins" width="48" height="48" alt="LumaLedger logo" loading="lazy">
            <span class="brand-copy">
              <span class="brand-name">LumaLedger</span>
              <span class="brand-tagline">Make every money move with clarity.</span>
            </span>
          </a>
          <p>Personal finance guidance, practical tools, and a calmer way to make progress toward the life you want.</p>
          <div class="social-links" aria-label="Social media links">
            <a class="social-link" href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer"><span aria-hidden="true">in</span><span class="sr-only">LumaLedger on LinkedIn</span></a>
            <a class="social-link" href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"><span aria-hidden="true">ig</span><span class="sr-only">LumaLedger on Instagram</span></a>
            <a class="social-link" href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer"><span aria-hidden="true">yt</span><span class="sr-only">LumaLedger on YouTube</span></a>
          </div>
        </div>

        <div class="footer-column">
          <h3>Explore</h3>
          <ul class="footer-links">
            <li><a href="#budgeting">Budgeting</a></li>
            <li><a href="#credit">Credit</a></li>
            <li><a href="#investment">Investment</a></li>
            <li><a href="#retirement">Retirement</a></li>
            <li><a href="#tax-planning">Tax Planning</a></li>
          </ul>
        </div>

        <div class="footer-column">
          <h3>Company</h3>
          <ul class="footer-links">
            <li><a href="#about">About</a></li>
            <li><a href="#stories">Member Stories</a></li>
            <li><a href="#resources">Resource Library</a></li>
            <li><a href="#newsletter">Newsletter</a></li>
            <li><a href="#faq">Help Center</a></li>
          </ul>
        </div>

        <div class="footer-column">
          <h3>Contact</h3>
          <ul class="footer-contact">
            <li>
              <svg class="icon" aria-hidden="true"><use href="#icon-mail"></use></svg>
              <a href="mailto:hello@lumaledger.com">hello@lumaledger.com</a>
            </li>
            <li>
              <svg class="icon" aria-hidden="true"><use href="#icon-phone"></use></svg>
              <a href="tel:+18885550148">+1 (888) 555-0148</a>
            </li>
            <li>
              <svg class="icon" aria-hidden="true"><use href="#icon-pin"></use></svg>
              <address>85 Mercer Street, Suite 420<br>New York, NY 10012</address>
            </li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <p>© <span id="current-year">2025</span> LumaLedger Financial, LLC. All rights reserved.</p>
        <div class="legal-links">
          <a href="#privacy" data-legal="privacy">Privacy</a>
          <a href="#terms" data-legal="terms">Terms</a>
          <a href="#accessibility" data-legal="accessibility">Accessibility</a>
          <a href="#editorial" data-legal="editorial">Editorial Standards</a>
        </div>
      </div>

      <div class="footer-disclaimer">
        <p>LumaLedger provides educational information and illustrative planning tools only. We are not a bank, broker-dealer, registered investment adviser, tax adviser, or fiduciary. Investing involves risk, including possible loss of principal. Calculations depend on the assumptions shown and may not reflect your actual circumstances. Consider consulting a qualified professional before making financial or tax decisions.</p>
      </div>
    </div>
  </footer>

  <div class="modal" id="guide-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
    <div class="modal-backdrop" data-modal-close></div>
    <div class="modal-card">
      <button class="modal-close" type="button" data-modal-close aria-label="Close dialog">
        <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
      </button>
      <p class="modal-kicker" id="modal-kicker">Free guide</p>
      <h2 class="modal-title" id="modal-title">Guide preview</h2>
      <div id="modal-content"></div>
      <div class="modal-actions" id="modal-actions">
        <button class="button button-primary" id="download-guide" type="button">Download the guide <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg></button>
        <button class="button button-light" type="button" data-modal-close>Close</button>
      </div>
    </div>
  </div>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "LumaLedger",
    "url": "https://www.lumaledger.com/",
    "logo": "https://placehold.co/96x96/153a32/f7cf6b?text=LL&font=poppins",
    "description": "Personal finance education and planning tools for budgeting, credit, investing, retirement, and tax planning.",
    "email": "hello@lumaledger.com",
    "telephone": "+1-888-555-0148",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "85 Mercer Street, Suite 420",
      "addressLocality": "New York",
      "addressRegion": "NY",
      "postalCode": "10012",
      "addressCountry": "US"
    }
  }
  </script>

  <script>
    (() => {
      "use strict";

      const currency = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0
      });

      const compactCurrency = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        notation: "compact",
        maximumFractionDigits: 1
      });

      document.querySelectorAll("[data-current-year], #current-year").forEach((element) => {
        element.textContent = new Date().getFullYear();
      });

      const header = document.getElementById("site-header");
      const navToggle = document.getElementById("nav-toggle");
      const primaryNav = document.getElementById("primary-nav");

      const setNavigation = (open) => {
        primaryNav.classList.toggle("is-open", open);
        navToggle.setAttribute("aria-expanded", String(open));
        navToggle.setAttribute("aria-label", open ? "Close navigation" : "Open navigation");
        navToggle.querySelector("use").setAttribute("href", open ? "#icon-close" : "#icon-menu");
      };

      navToggle.addEventListener("click", () => {
        setNavigation(!primaryNav.classList.contains("is-open"));
      });

      primaryNav.querySelectorAll("a").forEach((link) => {
        link.addEventListener("click", () => setNavigation(false));
      });

      document.addEventListener("click", (event) => {
        if (primaryNav.classList.contains("is-open") && !header.contains(event.target)) {
          setNavigation(false);
        }
      });

      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && primaryNav.classList.contains("is-open")) {
          setNavigation(false);
          navToggle.focus();
        }
      });

      const budgetDefaults = {
        income: 6400,
        essentials: 2450,
        lifestyle: 1700,
        debt: 550
      };

      const budgetInputs = {
        income: document.getElementById("budget-income"),
        essentials: document.getElementById("budget-essentials"),
        lifestyle: document.getElementById("budget-lifestyle"),
        debt: document.getElementById("budget-debt")
      };

      const budgetOutputs = {
        income: document.getElementById("budget-income-value"),
        essentials: document.getElementById("budget-essentials-value"),
        lifestyle: document.getElementById("budget-lifestyle-value"),
        debt: document.getElementById("budget-debt-value")
      };

      const budgetResult = document.getElementById("plan-result");
      const budgetRemaining = document.getElementById("budget-remaining");
      const budgetResultLabel = document.getElementById("budget-result-label");
      const budgetMessage = document.getElementById("budget-message");
      const budgetBars = {
        essentials: document.getElementById("budget-bar-essentials"),
        lifestyle: document.getElementById("budget-bar-lifestyle"),
        debt: document.getElementById("budget-bar-debt"),
        goals: document.getElementById("budget-bar-goals")
      };

      const budgetPercentages = {
        essentials: document.getElementById("budget-pct-essentials"),
        lifestyle: document.getElementById("budget-pct-lifestyle"),
        debt: document.getElementById("budget-pct-debt"),
        goals: document.getElementById("budget-pct-goals")
      };

      const updateRangeAppearance = (input) => {
        const min = Number(input.min);
        const max = Number(input.max);
        const value = Number(input.value);
        const progress = ((value - min) / (max - min)) * 100;
        input.style.setProperty("--range-progress", `${progress}%`);
      };

      const updateBudget = () => {
        const values = {
          income: Number(budgetInputs.income.value),
          essentials: Number(budgetInputs.essentials.value),
          lifestyle: Number(budgetInputs.lifestyle.value),
          debt: Number(budgetInputs.debt.value)
        };

        Object.entries(values).forEach(([key, value]) => {
          budgetOutputs[key].textContent = currency.format(value);
          updateRangeAppearance(budgetInputs[key]);
        });

        const assigned = values.essentials + values.lifestyle + values.debt;
        const remaining = values.income - assigned;
        const isOver = remaining < 0;
        const normalizedScale = isOver ? values.income / assigned : 1;

        budgetBars.essentials.style.width = `${Math.max(0, (values.essentials * normalizedScale / values.income) * 100)}%`;
        budgetBars.lifestyle.style.width = `${Math.max(0, (values.lifestyle * normalizedScale / values.income) * 100)}%`;
        budgetBars.debt.style.width = `${Math.max(0, (values.debt * normalizedScale / values.income) * 100)}%`;
        budgetBars.goals.style.width = `${isOver ? 0 : (remaining / values.income) * 100}%`;

        budgetPercentages.essentials.textContent = `${Math.round((values.essentials / values.income) * 100)}%`;
        budgetPercentages.lifestyle.textContent = `${Math.round((values.lifestyle / values.income) * 100)}%`;
        budgetPercentages.debt.textContent = `${Math.round((values.debt / values.income) * 100)}%`;
        budgetPercentages.goals.textContent = `${Math.max(0, Math.round((remaining / values.income) * 100))}%`;

        budgetResult.classList.toggle("is-over", isOver);
        budgetResultLabel.textContent = isOver ? "Monthly shortfall" : "Available for your goals";
        budgetRemaining.textContent = currency.format(Math.abs(remaining));

        if (isOver) {
          budgetMessage.textContent = `Your planned spending is ${currency.format(Math.abs(remaining))} above take-home pay. Look for flexible lifestyle costs or a realistic timeline for reducing debt before assigning more to goals.`;
        } else if (remaining < values.income * 0.05) {
          budgetMessage.textContent = `Only ${Math.round((remaining / values.income) * 100)}% remains after your current plan. A small adjustment to flexible spending could create more room for an emergency fund or long-term goals.`;
        } else {
          budgetMessage.textContent = `You have ${currency.format(remaining)}—about ${Math.round((remaining / values.income) * 100)}% of take-home pay—for an emergency fund, investments, or other goals.`;
        }
      };

      Object.values(budgetInputs).forEach((input) => input.addEventListener("input", updateBudget));

      document.getElementById("reset-budget").addEventListener("click", () => {
        Object.entries(budgetDefaults).forEach(([key, value]) => {
          budgetInputs[key].value = value;
        });
        updateBudget();
      });

      document.getElementById("save-budget").addEventListener("click", (event) => {
        const button = event.currentTarget;
        const payload = {
          income: Number(budgetInputs.income.value),
          essentials: Number(budgetInputs.essentials.value),
          lifestyle: Number(budgetInputs.lifestyle.value),
          debt: Number(budgetInputs.debt.value),
          savedAt: new Date().toISOString()
        };

        try {
          localStorage.setItem("lumaledger-budget-plan", JSON.stringify(payload));
          button.textContent = "Plan saved ✓";
          setTimeout(() => {
            button.textContent = "Save this plan";
          }, 2200);
        } catch (error) {
          button.textContent = "Unable to save locally";
          setTimeout(() => {
            button.textContent = "Save this plan";
          }, 2200);
        }
      });

      updateBudget();

      const retirementInputs = {
        currentAge: document.getElementById("ret-current-age"),
        retirementAge: document.getElementById("retirement-age"),
        monthly: document.getElementById("monthly-savings"),
        portfolio: document.getElementById("current-portfolio")
      };

      const retirementValue = document.getElementById("retirement-value");
      const retirementAnnualIncome = document.getElementById("retirement-annual-income");
      const retirementMonthlyIncome = document.getElementById("retirement-monthly-income");
      const retirementYears = document.getElementById("retirement-years");

      const updateRetirement = () => {
        const currentAge = Math.max(18, Math.min(80, Number(retirementInputs.currentAge.value) || 18));
        const retirementAge = Math.max(currentAge, Math.min(90, Number(retirementInputs.retirementAge.value) || currentAge));
        const monthlyContribution = Math.max(0, Number(retirementInputs.monthly.value) || 0);
        const currentPortfolio = Math.max(0, Number(retirementInputs.portfolio.value) || 0);
        const years = retirementAge - currentAge;
        const months = years * 12;
        const monthlyRate = 0.06 / 12;
        const growthFactor = Math.pow(1 + monthlyRate, months);
        const futureValue = currentPortfolio * growthFactor + (monthlyRate === 0 ? 0 : monthlyContribution * ((growthFactor - 1) / monthlyRate));
        const annualIncome = futureValue * 0.04;
        const monthlyIncome = annualIncome / 12;

        retirementYears.textContent = `${years} ${years === 1 ? "year" : "years"} from now`;
        retirementValue.textContent = compactCurrency.format(futureValue);
        retirementAnnualIncome.textContent = `${currency.format(annualIncome)} / year`;
        retirementMonthlyIncome.textContent = `${currency.format(monthlyIncome)} / month`;
      };

      Object.values(retirementInputs).forEach((input) => input.addEventListener("input", updateRetirement));

      document.getElementById("save-estimate").addEventListener("click", (event) => {
        const button = event.currentTarget;
        const payload = {
          currentAge: Number(retirementInputs.currentAge.value),
          retirementAge: Number(retirementInputs.retirementAge.value),
          monthly: Number(retirementInputs.monthly.value),
          portfolio: Number(retirementInputs.portfolio.value),
          savedAt: new Date().toISOString()
        };

        try {
          localStorage.setItem("lumaledger-retirement-estimate", JSON.stringify(payload));
          button.textContent = "Estimate saved ✓";
          setTimeout(() => {
            button.textContent = "Save estimate";
          }, 2200);
        } catch (error) {
          button.textContent = "Unable to save locally";
          setTimeout(() => {
            button.textContent = "Save estimate";
          }, 2200);
        }
      });

      updateRetirement();

      const guideData = {
        emergency: {
          kicker: "Free guide · 8-minute read",
          title: "The Emergency Fund Field Guide",
          intro: "A resilient cash reserve starts with the right number—not a round number you have seen online. Use this guide to calculate a target that reflects your actual essential expenses and build it one automatic transfer at a time.",
          sections: [
            {
              heading: "Calculate your real target",
              items: [
                "List recurring essentials such as housing, utilities, insurance, groceries, transportation, and minimum debt payments.",
                "Multiply your essential monthly total by three for a starting target, then consider six months or more if your income is variable or your household has a single earner.",
                "Exclude planned, one-time spending and nonessential lifestyle costs from the first calculation."
              ]
            },
            {
              heading: "Choose the right home for the money",
              items: [
                "Keep the first portion of your reserve somewhere safe, liquid, and easy to access.",
                "Do not confuse a long-term investment account with an emergency cash account; market declines can make short-term withdrawals more difficult.",
                "As your reserve grows, decide how much must remain available and how much can support a separate long-term goal."
              ]
            },
            {
              heading: "Build the habit",
              items: [
                "Automate a contribution you can sustain, then increase it after each raise or major life change.",
                "Direct windfalls and irregular income toward the reserve until it reaches your target.",
                "Replenish the fund after every use so the next emergency does not start from zero."
              ]
            }
          ]
        },
        investing: {
          kicker: "Educational guide · 11-minute read",
          title: "Investing Without the Jargon",
          intro: "You do not need to predict the market to build a sensible investment plan. Start by defining the job of each investment, then consider time horizon, risk tolerance, diversification, fees, and the behavior you can sustain.",
          sections: [
            {
              heading: "Define the job of the money",
              items: [
                "Separate near-term spending, emergency reserves, medium-term goals, and long-term growth into distinct buckets.",
                "Match the investment time horizon to the date you expect to need the money; a volatile asset may not be suitable for a near-term goal.",
                "Use an appropriate mix of broad, diversified investments rather than relying on one company or theme."
              ]
            },
            {
              heading: "Understand your risk tolerance",
              items: [
                "Risk tolerance combines your emotional comfort with temporary losses and your financial ability to absorb them.",
                "A suitable portfolio is one you can continue holding through ordinary market volatility, especially when your time horizon is long.",
                "Revisit the allocation when your time horizon, income, goals, or ability to accept losses changes."
              ]
            },
            {
              heading: "Pay attention to costs and behavior",
              items: [
                "Compare expense ratios, trading costs, taxes, and account fees because they directly affect long-term results.",
                "Avoid changing a long-term plan because of short-term news, headlines, or fear of missing out.",
                "Rebalance according to a written schedule, and consider the tax and transaction costs of doing so."
              ]
            }
          ]
        },
        credit: {
          kicker: "Action checklist · 6-minute read",
          title: "The Credit Confidence Checklist",
          intro: "A stronger credit profile comes from a few repeatable habits, not a collection of quick fixes. Use this checklist to review your reports, reduce unnecessary balances, and make on-time payments easier to maintain.",
          sections: [
            {
              heading: "Review the full picture",
              items: [
                "Obtain and review your credit reports from the three nationwide credit bureaus.",
                "Look for inaccurate personal information, unfamiliar accounts, duplicate balances, and incorrect negative information.",
                "Follow the bureau's process to dispute errors and document any corrections."
              ]
            },
            {
              heading: "Manage balances with intention",
              items: [
                "Keep revolving credit utilization below the level where it may pressure your score; lower is generally better.",
                "Pay more than the minimum when possible and prioritize the balances with the highest interest cost.",
                "Avoid opening several new accounts in a short period solely to increase available credit."
              ]
            },
            {
              heading: "Protect consistency",
              items: [
                "Automate at least the minimum payment on every account and set calendar reminders for the remainder.",
                "Keep the oldest dependable accounts open when appropriate, because account age can influence your credit profile.",
                "Request a small limit increase only when you have a reason to use it and can keep the new utilization low."
              ]
            }
          ]
        },
        retirement: {
          kicker: "Planning checklist · 7-minute read",
          title: "The Retirement Readiness Checklist",
          intro: "A retirement plan is more useful when it accounts for both the money you will need and the income you expect to receive. Work through these steps once, then review the plan at least annually.",
          sections: [
            {
              heading: "Estimate your future spending",
              items: [
                "List essential expenses, lifestyle spending, travel, healthcare, housing, and likely one-time purchases.",
                "Test your plan against a lean year and a comfortable year instead of relying on a single estimate.",
                "Identify which expenses are flexible and could change if markets or your needs shift."
              ]
            },
            {
              heading: "Inventory your income sources",
              items: [
                "Estimate employer pension, Social Security, annuity, rental, and other reliable income sources.",
                "Compare your expected retirement income with your estimated annual spending.",
                "Use conservative assumptions where the outcome is uncertain and track how your savings gap changes."
              ]
            },
            {
              heading: "Build a flexible withdrawal plan",
              items: [
                "Coordinate the timing and tax treatment of withdrawals with the income sources you will receive.",
                "Plan how you will respond to a weak market year without making an emotional, irreversible decision.",
                "Review beneficiaries, account locations, required minimum distributions, and estate documents as part of the same plan."
              ]
            }
          ]
        }
      };

      const legalData = {
        privacy: {
          kicker: "LumaLedger policy",
          title: "Privacy Policy",
          body: `
            <h3>Information we collect</h3>
            <p>We may collect information you provide directly, such as an email address when you request a newsletter or contact our team. We may also collect limited technical information such as browser type, device type, approximate location, and pages visited to improve the reliability and security of our services.</p>
            <h3>How we use information</h3>
            <p>We use information to provide requested resources, respond to inquiries, improve our educational content, prevent misuse, and understand aggregate site performance. We do not sell personal information, and we do not share it for third-party advertising purposes.</p>
            <h3>Your choices</h3>
            <p>You may unsubscribe from email at any time using the link in the message. Depending on where you live, you may have rights to access, correct, delete, or restrict the use of personal information. Contact us to make a request.</p>
            <h3>Contact</h3>
            <p>Questions about this policy can be sent to <a href="mailto:privacy@lumaledger.com">privacy@lumaledger.com</a> or mailed to LumaLedger Financial, LLC, 85 Mercer Street, Suite 420, New York, NY 10012.</p>
          `
        },
        terms: {
          kicker: "LumaLedger terms",
          title: "Terms of Use",
          body: `
            <h3>Educational information</h3>
            <p>LumaLedger provides general financial education, illustrative calculations, and planning tools. Nothing on this website is individualized investment, tax, legal, accounting, or financial advice. You should consult a qualified professional regarding your individual circumstances.</p>
            <h3>No guarantee</h3>
            <p>Investing involves risk, including possible loss of principal. Projections, estimates, score examples, and educational scenarios are based on stated assumptions and may differ materially from actual outcomes. We do not guarantee any result, return, savings amount, or credit action.</p>
            <h3>Acceptable use</h3>
            <p>You may use our materials for personal and educational purposes. You may not misuse the site, interfere with its operation, attempt unauthorized access, reproduce content in a misleading way, or use our tools to make decisions on behalf of another person without appropriate authority.</p>
            <h3>Intellectual property</h3>
            <p>Unless otherwise stated, LumaLedger owns the site design, written materials, and original educational content. You may link to public pages and download available guides for personal use, but you may not republish or sell substantial portions without written permission.</p>
          `
        },
        accessibility: {
          kicker: "Our commitment",
          title: "Accessibility Statement",
          body: `
            <h3>Our goal</h3>
            <p>LumaLedger is committed to making our education, calculators, and resources usable by as many people as possible. We work toward WCAG 2.2 Level AA guidance and include semantic structure, keyboard access, visible focus states, descriptive labels, and readable contrast throughout the site.</p>
            <h3>Ongoing review</h3>
            <p>Accessibility is an ongoing practice. We periodically review new features, test common screen readers and keyboard navigation, and improve issues as we identify them. Third-party content or links may not always meet the same standard, so we review them when possible.</p>
            <h3>Request assistance</h3>
            <p>If you experience a barrier, please contact <a href="mailto:access@lumaledger.com">access@lumaledger.com</a> or call +1 (888) 555-0148. Tell us the page, device, browser, and assistive technology involved so we can respond with an accessible alternative.</p>
          `
        },
        editorial: {
          kicker: "How we work",
          title: "Editorial Standards",
          body: `
            <h3>Accuracy and clarity</h3>
            <p>Our editors review educational content for factual accuracy, plain language, appropriate context, and clear separation between education and personalized advice. Material may be updated when laws, product terms, market conditions, or editorial guidance change.</p>
            <h3>Sources and assumptions</h3>
            <p>When a guide relies on an assumption, we identify it directly. Examples use illustrative amounts and do not represent guaranteed outcomes. We aim to reference reliable public information and established financial concepts, but we do not control every external source linked from our site.</p>
            <h3>Independence</h3>
            <p>LumaLedger does not accept payment to include favorable investment, insurance, lending, or tax product recommendations. Compensation to contributors is never based on the products or services they discuss.</p>
            <h3>Corrections</h3>
            <p>If you spot an error, contact <a href="mailto:editorial@lumaledger.com">editorial@lumaledger.com</a>. We review factual concerns promptly and update material when clarification is needed.</p>
          `
        }
      };

      const modal = document.getElementById("guide-modal");
      const modalKicker = document.getElementById("modal-kicker");
      const modalTitle = document.getElementById("modal-title");
      const modalContent = document.getElementById("modal-content");
      const modalActions = document.getElementById("modal-actions");
      const downloadButton = document.getElementById("download-guide");
      let lastFocusedElement = null;
      let activeDownloadHandler = null;

      const openModal = (kicker, title, content, downloadHandler = null) => {
        lastFocusedElement = document.activeElement;
        modalKicker.textContent = kicker;
        modalTitle.textContent = title;
        modalContent.innerHTML = content;
        activeDownloadHandler = downloadHandler;
        downloadButton.hidden = !downloadHandler;
        modal.hidden = false;
        document.body.classList.add("modal-open");
        requestAnimationFrame(() => modal.classList.add("is-visible"));
        setTimeout(() => modal.querySelector("[data-modal-close]").focus(), 30);
      };

      const closeModal = () => {
        modal.classList.remove("is-visible");
        document.body.classList.remove("modal-open");
        setTimeout(() => {
          modal.hidden = true;
          if (lastFocusedElement && typeof lastFocusedElement.focus === "function") {
            lastFocusedElement.focus();
          }
        }, 190);
      };

      const downloadTextFile = (filename, content) => {
        const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        link.remove();
        setTimeout(() => URL.revokeObjectURL(url), 1000);
      };

      document.querySelectorAll("[data-guide]").forEach((button) => {
        button.addEventListener("click", () => {
          const guide = guideData[button.dataset.guide];
          if (!guide) return;

          const content = `
            <p class="modal-intro">${guide.intro}</p>
            ${guide.sections.map((section) => `
              <section class="guide-section">
                <h3>${section.heading}</h3>
                <ul>${section.items.map((item) => `<li>${item}</li>`).join("")}</ul>
              </section>
            `).join("")}
          `;

          const plainText = [
            guide.title,
            "=".repeat(guide.title.length),
            "",
            guide.intro,
            ...guide.sections.flatMap((section) => [
              "",
              section.heading,
              "-".repeat(section.heading.length),
              ...section.items.map((item, index) => `${index + 1}. ${item}`)
            ]),
            "",
            "Educational information only. This guide is not individualized financial, investment, tax, or legal advice."
          ].join("\n");

          openModal(guide.kicker, guide.title, content, () => {
            downloadTextFile(`lumaledger-${button.dataset.guide}-guide.txt`, plainText);
            downloadButton.textContent = "Downloaded ✓";
            setTimeout(() => {
              downloadButton.innerHTML = 'Download the guide <svg class="icon" aria-hidden="true"><use href="#icon-arrow-right"></use></svg>';
            }, 1800);
          });
        });
      });

      document.querySelectorAll("[data-legal]").forEach((link) => {
        link.addEventListener("click", (event) => {
          event.preventDefault();
          const policy = legalData[link.dataset.legal];
          if (!policy) return;
          openModal(policy.kicker, policy.title, `<div class="legal-body">${policy.body}</div>`);
        });
      });

      downloadButton.addEventListener("click", () => {
        if (activeDownloadHandler) activeDownloadHandler();
      });

      modal.querySelectorAll("[data-modal-close]").forEach((element) => {
        element.addEventListener("click", closeModal);
      });

      modal.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
          closeModal();
          return;
        }

        if (event.key !== "Tab") return;

        const focusable = [...modal.querySelectorAll('button:not([hidden]), a[href], input:not([hidden]), [tabindex]:not([tabindex="-1"])')]
          .filter((element) => element.offsetParent !== null);
        if (!focusable.length) return;

        const first = focusable[0];
        const last = focusable[focusable.length - 1];

        if (event.shiftKey && document.activeElement === first) {
          event.preventDefault();
          last.focus();
        } else if (!event.shiftKey && document.activeElement === last) {
          event.preventDefault();
          first.focus();
        }
      });

      const newsletterForm = document.getElementById("newsletter-form");
      const newsletterMessage = document.getElementById("newsletter-message");

      newsletterForm.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!newsletterForm.checkValidity()) {
          newsletterForm.reportValidity();
          return;
        }

        const email = document.getElementById("newsletter-email").value.trim();
        newsletterMessage.textContent = `Thanks—your Monday Money Note request is ready for ${email}.`;
        newsletterForm.reset();
      });

      const revealElements = document.querySelectorAll(".reveal");
      if ("IntersectionObserver" in window) {
        const revealObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("is-visible");
              observer.unobserve(entry.target);
            }
          });
        }, { threshold: 0.12, rootMargin: "0px 0px -30px" });

        revealElements.forEach((element) => revealObserver.observe(element));
      } else {
        revealElements.forEach((element) => element.classList.add("is-visible"));
      }

      const navLinks = [...document.querySelectorAll(".nav-link")];
      const navSections = navLinks
        .map((link) => document.querySelector(link.getAttribute("href")))
        .filter(Boolean);

      if ("IntersectionObserver" in window) {
        const sectionObserver = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            navLinks.forEach((link) => {
              const active = link.getAttribute("href") === `#${entry.target.id}`;
              if (active) {
                link.setAttribute("aria-current", "page");
              } else {
                link.removeAttribute("aria-current");
              }
            });
          });
        }, { rootMargin: "-32% 0px -58%", threshold: 0 });

        navSections.forEach((section) => sectionObserver.observe(section));
      }
    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:10:53.520Z",
  "url": "https://benchmark.aimac.invalid/eb589cf7e9fd69cef692ddee3f9f32cde1ff016e152b5665202873677460d699.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#main-content\" aria-label=\"LumaLedger home\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#main-content\" aria-label=\"LumaLedger home\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<p class=\"newsletter-message\" id=\"newsletter-message\" role=\"status\"></p>",
          "target": [
            "#newsletter-message"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<svg width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\" style=\"position:absolute;overflow:hidden\">",
          "target": [
            "svg[width=\"0\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#main-content\" aria-label=\"LumaLedger home\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"newsletter-message\" id=\"newsletter-message\" role=\"status\"></p>",
          "target": [
            "#newsletter-message"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<p class=\"newsletter-message\" id=\"newsletter-message\" role=\"status\"></p>",
          "target": [
            "#newsletter-message"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#main-content\" aria-label=\"LumaLedger home\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#main-content\" aria-label=\"LumaLedger home\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"]"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"newsletter-email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required=\"\">",
          "target": [
            "#newsletter-email"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"button button-primary button-small\" id=\"save-budget\" type=\"button\">Save this plan</button>",
          "target": [
            "#save-budget"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>A clearer plan for your money. <em>A more confident life.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Guidance you can use. Tools you can trust.</h2>",
                  "target": [
                    ".approach-grid > .reveal:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">One life. <em>One connected money plan.</em></h2>",
                  "target": [
                    "#budgeting > .container > .centered-heading.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h3>Budgeting</h3>",
                  "target": [
                    ".goal-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Emergency Fund</h3>",
                  "target": [
                    ".goal-card.reveal-delay-1:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Credit Improvement</h3>",
                  "target": [
                    ".goal-card.reveal-delay-2:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Thoughtful Investing</h3>",
                  "target": [
                    ".goal-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Retirement by Design</h3>",
                  "target": [
                    ".goal-card.reveal-delay-1:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h3>Tax-Smarter Planning</h3>",
                  "target": [
                    ".goal-card.reveal-delay-2:nth-child(6) > h3"
                  ]
                },
                {
                  "html": "<h2>Your plan should fit <em>your real life.</em></h2>",
                  "target": [
                    ".planner-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Build your monthly snapshot</h3>",
                  "target": [
                    ".calculator-header > div > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Strong money starts with <em>the basics.</em></h2>",
                  "target": [
                    ".foundation-content > .reveal:nth-child(1) > .section-title"
                  ]
                },
                {
                  "html": "<h3>Build an emergency fund that fits your life</h3>",
                  "target": [
                    "#emergency-fund > div > h3"
                  ]
                },
                {
                  "html": "<h3>Improve your credit score with consistent habits</h3>",
                  "target": [
                    ".foundation-step:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Plan for taxes before the bill arrives</h3>",
                  "target": [
                    "#tax-planning > div > h3"
                  ]
                },
                {
                  "html": "<h2>Invest with intention, <em>not impulse.</em></h2>",
                  "target": [
                    ".investment-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Risk tolerance</h3>",
                  "target": [
                    ".investment-principle:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Time horizon</h3>",
                  "target": [
                    ".investment-principle:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Asset allocation</h3>",
                  "target": [
                    ".investment-principle:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Portfolio blueprint</h3>",
                  "target": [
                    ".portfolio-card-header > h3"
                  ]
                },
                {
                  "html": "<h2>Make the long horizon <em>feel closer.</em></h2>",
                  "target": [
                    ".retirement-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Your 20s and 30s: create momentum</h3>",
                  "target": [
                    ".phase:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Your 40s and 50s: turn growth into readiness</h3>",
                  "target": [
                    ".phase:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Your 60s and beyond: turn assets into income</h3>",
                  "target": [
                    ".phase:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Retirement savings snapshot</h3>",
                  "target": [
                    ".estimator-header > div > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Practical guidance for <em>real financial decisions.</em></h2>",
                  "target": [
                    "#resources > .container > .centered-heading.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h3>The Emergency Fund Field Guide</h3>",
                  "target": [
                    ".resource-card:nth-child(1) > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h3>Investing Without the Jargon</h3>",
                  "target": [
                    ".resource-card.reveal-delay-1 > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h3>The Credit Confidence Checklist</h3>",
                  "target": [
                    ".resource-card.reveal-delay-2 > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Small steps. <em>Meaningful momentum.</em></h2>",
                  "target": [
                    "#stories > .container > .centered-heading.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Good questions make <em>better plans.</em></h2>",
                  "target": [
                    ".faq-intro > .section-title"
                  ]
                },
                {
                  "html": "<h2>Your next money decision can be the clearest one yet.</h2>",
                  "target": [
                    ".newsletter-panel > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-column:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Company</h3>",
                  "target": [
                    ".footer-column:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Contact</h3>",
                  "target": [
                    ".footer-column:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main-content\">",
                  "target": [
                    "#main-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js reveal-ready\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d3d8d7",
                "bgColor": "#0c2823",
                "contrastRatio": 10.84,
                "fontSize": "9.7pt (12.96px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 10.84"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announcement\">\n    New: Your monthly Money Reset is ready.\n    <a href=\"#planner\">Build your plan <svg class=\"icon\" aria-hidden=\"true\"><use href=\"#icon-arrow-right\"></use></svg></a>\n  </div>",
          "target": [
            ".announcement"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js reveal-ready\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"budget-income\">Monthly take-home pay</label>",
                  "target": [
                    "label[for=\"budget-income\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"budget-income\" type=\"range\" min=\"2500\" max=\"15000\" step=\"100\" value=\"6400\" style=\"--range-progress: 31.2%;\">",
          "target": [
            "#budget-income"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js reveal-ready\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js reveal-ready\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/153a32/f7cf6b?text=LL&amp;font=poppins\" width=\"48\" height=\"48\" alt=\"LumaLedger logo\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"] > img[alt=\"LumaLedger logo\"][width=\"48\"][height=\"48\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"budget-income\">Monthly take-home pay</label>",
                  "target": [
                    "label[for=\"budget-income\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"budget-income\" type=\"range\" min=\"2500\" max=\"15000\" step=\"100\" value=\"6400\" style=\"--range-progress: 31.2%;\">",
          "target": [
            "#budget-income"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"announcement\">\n    New: Your monthly Money Reset is ready.\n    <a href=\"#planner\">Build your plan <svg class=\"icon\" aria-hidden=\"true\"><use href=\"#icon-arrow-right\"></use></svg></a>\n  </div>",
                  "target": [
                    ".announcement"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#planner\">Build your plan <svg class=\"icon\" aria-hidden=\"true\"><use href=\"#icon-arrow-right\"></use></svg></a>",
          "target": [
            ".announcement > a[href$=\"#planner\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"planner-checks\">",
          "target": [
            ".planner-checks"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#icon-check\"></use></svg>Calculates your monthly remainder instantly</li>",
          "target": [
            ".planner-checks > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/153a32/f7cf6b?text=LL&amp;font=poppins\" width=\"48\" height=\"48\" alt=\"LumaLedger logo\">",
          "target": [
            ".header-inner > .brand[aria-label=\"LumaLedger home\"][href$=\"#main-content\"] > img[alt=\"LumaLedger logo\"][width=\"48\"][height=\"48\"]"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>Is LumaLedger a bank or investment company?<span class=\"faq-plus\" aria-hidden=\"true\"></span></summary>",
          "target": [
            "details:nth-child(1) > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 189.9,
                "height": 50.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (189.9px by 50.4px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"hero-proof\" aria-label=\"Platform benefits\">",
          "target": [
            ".hero-proof"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.1pt (12.16px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"dashboard\">",
                  "target": [
                    "#dashboard"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Personal finance, personalized</span>",
          "target": [
            ".hero-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#72827f",
                "bgColor": "#0c2823",
                "contrastRatio": 3.88,
                "fontSize": "8.3pt (11.04px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.88 (foreground color: #72827f, background color: #0c2823, font size: 8.3pt (11.04px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\u00a9 <span id=\"current-year\">2026</span> LumaLedger Financial, LLC. All rights reserved.</p>",
          "target": [
            ".footer-bottom > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.88 (foreground color: #72827f, background color: #0c2823, font size: 8.3pt (11.04px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#72827f",
                "bgColor": "#0c2823",
                "contrastRatio": 3.88,
                "fontSize": "8.3pt (11.04px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.88 (foreground color: #72827f, background color: #0c2823, font size: 8.3pt (11.04px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span id=\"current-year\">2026</span>",
          "target": [
            "#current-year"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.88 (foreground color: #72827f, background color: #0c2823, font size: 8.3pt (11.04px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5f716e",
                "bgColor": "#0c2823",
                "contrastRatio": 3.03,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #5f716e, background color: #0c2823, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>",
          "target": [
            ".footer-disclaimer > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #5f716e, background color: #0c2823, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$2.5k</span>",
          "target": [
            ".range-field:nth-child(1) > .range-scale > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$15k</span>",
          "target": [
            ".range-field:nth-child(1) > .range-scale > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$500</span>",
          "target": [
            ".range-field:nth-child(2) > .range-scale > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$12k</span>",
          "target": [
            ".range-field:nth-child(2) > .range-scale > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$0</span>",
          "target": [
            ".range-field:nth-child(3) > .range-scale > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$7k</span>",
          "target": [
            ".range-field:nth-child(3) > .range-scale > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$0</span>",
          "target": [
            ".range-field:nth-child(4) > .range-scale > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#91a09b",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.68,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>$5k</span>",
          "target": [
            ".range-field:nth-child(4) > .range-scale > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #91a09b, background color: #fffdf8, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d8d87",
                "bgColor": "#fffdf8",
                "contrastRatio": 3.42,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator reveal reveal-delay-2 is-visible\" id=\"budget-calculator\">",
                  "target": [
                    "#budget-calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.42 (foreground color: #7d8d87, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"calculator-footnote\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#icon-lock\"></use></svg>Your numbers stay in your browser. This educational tool does not provide personalized financial advice.</p>",
          "target": [
            ".calculator-footnote"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #7d8d87, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#f8f5ed",
                "contrastRatio": 2.63,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>the basics.</em>",
          "target": [
            ".foundation-content > .is-visible.reveal > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#f8f5ed",
                "contrastRatio": 2.63,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>the basics.</em>",
          "target": [
            ".foundation-content > .is-visible.reveal:nth-child(1) > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#81908b",
                "bgColor": "#fffdf8",
                "contrastRatio": 3.28,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"portfolio-card\">",
                  "target": [
                    ".portfolio-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.28 (foreground color: #81908b, background color: #fffdf8, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"portfolio-note\">Illustrative framework only\u2014not a portfolio recommendation. Actual allocations depend on your goals, time horizon, and tolerance for risk.</p>",
          "target": [
            ".portfolio-note"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.28 (foreground color: #81908b, background color: #fffdf8, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#899b97",
                "bgColor": "#12372f",
                "contrastRatio": 4.46,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"projection-panel\" aria-live=\"polite\">",
                  "target": [
                    ".projection-panel"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.46 (foreground color: #899b97, background color: #12372f, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"projection-assumption\">This educational estimate assumes 6% annual nominal growth, monthly compounding, and no taxes, fees, inflation, or market volatility. Actual results will vary.</p>",
          "target": [
            ".projection-assumption"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.46 (foreground color: #899b97, background color: #12372f, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.82,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section resources-section\" id=\"resources\">",
                  "target": [
                    "#resources"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.82 (foreground color: #e97950, background color: #fffdf8, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>real financial decisions.</em>",
          "target": [
            "#resources > .container > .centered-heading.is-visible.reveal > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.82 (foreground color: #e97950, background color: #fffdf8, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#eef5f1",
                "contrastRatio": 2.59,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section stories-section\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.59 (foreground color: #e97950, background color: #eef5f1, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>Meaningful momentum.</em>",
          "target": [
            "#stories > .container > .centered-heading.is-visible.reveal > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.59 (foreground color: #e97950, background color: #eef5f1, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#f8f5ed",
                "contrastRatio": 2.63,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>better plans.</em>",
          "target": [
            ".faq-intro > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#f8f5ed",
                "contrastRatio": 2.63,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>the basics.</em>",
          "target": [
            ".foundation-content > .reveal.is-visible:nth-child(1) > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.63 (foreground color: #e97950, background color: #f8f5ed, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#fffdf8",
                "contrastRatio": 2.82,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section resources-section\" id=\"resources\">",
                  "target": [
                    "#resources"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.82 (foreground color: #e97950, background color: #fffdf8, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>real financial decisions.</em>",
          "target": [
            "#resources > .container > .centered-heading.reveal.is-visible > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.82 (foreground color: #e97950, background color: #fffdf8, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e97950",
                "bgColor": "#eef5f1",
                "contrastRatio": 2.59,
                "fontSize": "44.2pt (58.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section stories-section\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.59 (foreground color: #e97950, background color: #eef5f1, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>Meaningful momentum.</em>",
          "target": [
            "#stories > .container > .centered-heading.reveal.is-visible > .section-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.59 (foreground color: #e97950, background color: #eef5f1, font size: 44.2pt (58.88px), font weight: normal). Expected contrast ratio of 3:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 11448
      },
      {
        "y": 576,
        "height": 11448
      },
      {
        "y": 1152,
        "height": 11448
      },
      {
        "y": 1728,
        "height": 11448
      },
      {
        "y": 2304,
        "height": 11448
      },
      {
        "y": 2880,
        "height": 11448
      },
      {
        "y": 3456,
        "height": 11448
      },
      {
        "y": 4032,
        "height": 11448
      },
      {
        "y": 4608,
        "height": 11448
      },
      {
        "y": 5184,
        "height": 11448
      },
      {
        "y": 5760,
        "height": 11448
      },
      {
        "y": 6336,
        "height": 11448
      },
      {
        "y": 6912,
        "height": 11448
      },
      {
        "y": 7488,
        "height": 11448
      },
      {
        "y": 8064,
        "height": 11448
      },
      {
        "y": 8640,
        "height": 11448
      },
      {
        "y": 9216,
        "height": 11448
      },
      {
        "y": 9792,
        "height": 11448
      },
      {
        "y": 10368,
        "height": 11448
      },
      {
        "y": 10728,
        "height": 11448
      }
    ],
    "scans": 21,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Personal Finance" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Personal Finance"
- Description: Banking, investing, budgeting, savings, credit, and personal money management resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Personal Finance" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Investment", "Resources", "Retirement".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Personal Finance" category. Consider themes similar to: "Emergency Fund", "Credit Improvement", "Tax Planning".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "diversification", "risk tolerance", "credit score".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Download Guide", "Learn More", "Apply Now".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Personal Finance" sector. Ideas similar but not limited to: "budget planner".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "rate comparisons", "market updates", "success stories".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.