MiniMax MiniMax M3.1 Flash – Law Government and Politics

via Minimax · Generated

  • AIMAC Debt 9.60
  • Cost $0.023
  • Total Violations 46
  • HTML Size 108 KB
  • Em Dashes 8

Screenshot

View MiniMax MiniMax M3.1 Flash Law Government and Politics page View Live Page

Accessibility Issues Found

46 Serious

  • aria-prohibited-attr serious 1 instance

    Elements must only use permitted ARIA attributes

    Example HTML <div class="progress-bar" aria-label="78 percent of signature goal reached"><span></span></div>
  • color-contrast serious 44 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a class="btn btn--primary" href="#briefings"> Explore the latest brief <svg viewBox="0 0 24 24" fill="none" stroke="cu...
  • target-size serious 1 instance

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <summary>Can my organization request a briefing or training?</summary>

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="description" content="Civic Ledger delivers independent policy analysis, civil-liberties guidance, civic resources, and practical tools for informed participation in government.">
  <meta name="theme-color" content="#173f3a">
  <meta property="og:title" content="Civic Ledger — Clarity in law. Confidence in civic action.">
  <meta property="og:description" content="Independent legal information, public-policy analysis, and practical resources for citizens, organizers, and public leaders.">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://placehold.co/1200x630/173f3a/f7f1e3?text=Civic+Ledger&font=lora">
  <link rel="icon" type="image/png" href="https://placehold.co/64x64/173f3a/f7f1e3?text=CL&font=lora">
  <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=Lora:ital,wght@0,500;0,600;0,700;1,600&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

  <title>Civic Ledger | Law, Policy & Civic Action</title>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Civic Ledger",
    "url": "https://www.civicledger.org",
    "logo": "https://placehold.co/96x96/173f3a/f7f1e3?text=CL&font=lora",
    "description": "Independent legal information, policy analysis, and civic engagement resources.",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "1420 Meridian Avenue, Suite 300",
      "addressLocality": "Washington",
      "addressRegion": "DC",
      "postalCode": "20005",
      "addressCountry": "US"
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "+1-202-555-0147",
      "email": "hello@civicledger.org",
      "contactType": "customer service"
    }
  }
  </script>

  <style>
    :root {
      --ink: #173f3a;
      --ink-deep: #0e2926;
      --ink-soft: #345b54;
      --paper: #f6f1e8;
      --paper-deep: #ece5d8;
      --white: #fffdf8;
      --clay: #c95036;
      --clay-dark: #a63e28;
      --gold: #d6a545;
      --sage: #b9cbbd;
      --sage-light: #dce6dd;
      --text: #1d2926;
      --muted: #64716d;
      --line: #d9ddd6;
      --line-dark: rgba(255, 255, 255, 0.17);
      --shadow-sm: 0 10px 30px rgba(19, 48, 43, 0.08);
      --shadow-lg: 0 30px 70px rgba(13, 43, 38, 0.18);
      --radius-sm: 10px;
      --radius: 18px;
      --radius-lg: 30px;
      --serif: "Lora", Georgia, serif;
      --sans: "Noto Sans", Arial, sans-serif;
      --container: 1180px;
    }

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

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

    body {
      margin: 0;
      background: var(--paper);
      color: var(--text);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    body.nav-open {
      overflow: hidden;
    }

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

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

    button,
    input,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    h1,
    h2,
    h3 {
      color: var(--ink-deep);
      font-family: var(--serif);
      line-height: 1.1;
    }

    h2 {
      margin-bottom: 22px;
      font-size: clamp(2.25rem, 4.4vw, 4rem);
      letter-spacing: -0.035em;
    }

    h3 {
      font-size: clamp(1.35rem, 2.2vw, 1.8rem);
      letter-spacing: -0.02em;
    }

    ::selection {
      background: var(--gold);
      color: var(--ink-deep);
    }

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

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

    .section {
      padding: 104px 0;
    }

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

    .section--soft {
      background: #edf1eb;
    }

    .skip-link {
      position: fixed;
      z-index: 1000;
      top: 12px;
      left: 12px;
      padding: 12px 18px;
      border-radius: 8px;
      background: var(--white);
      color: var(--ink-deep);
      font-weight: 700;
      transform: translateY(-150%);
      transition: transform 0.2s ease;
    }

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

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

    .eyebrow::before {
      width: 26px;
      height: 2px;
      background: currentColor;
      content: "";
    }

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

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
      gap: 70px;
      align-items: end;
      margin-bottom: 52px;
    }

    .section-heading p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .btn {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 0.92rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

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

    .btn svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    .btn--primary {
      background: var(--clay);
      color: var(--white);
      box-shadow: 0 10px 24px rgba(201, 80, 54, 0.22);
    }

    .btn--primary:hover {
      background: var(--clay-dark);
    }

    .btn--dark {
      background: var(--ink);
      color: var(--white);
    }

    .btn--dark:hover {
      background: var(--ink-deep);
    }

    .btn--light {
      background: var(--white);
      color: var(--ink-deep);
    }

    .btn--outline {
      border-color: rgba(23, 63, 58, 0.28);
      background: transparent;
      color: var(--ink);
    }

    .btn--outline:hover {
      border-color: var(--ink);
      background: rgba(23, 63, 58, 0.05);
    }

    .btn--outline-light {
      border-color: rgba(255, 255, 255, 0.34);
      color: var(--white);
    }

    .btn--outline-light:hover {
      border-color: var(--white);
      background: rgba(255, 255, 255, 0.08);
    }

    .btn--small {
      min-height: 40px;
      padding: 10px 17px;
      font-size: 0.84rem;
    }

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

    .text-link svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

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

    .text-link--light {
      color: var(--gold);
    }

    .announcement {
      position: relative;
      z-index: 60;
      background: var(--ink-deep);
      color: rgba(255, 255, 255, 0.76);
      font-size: 0.78rem;
    }

    .announcement__inner {
      display: flex;
      min-height: 38px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .announcement__message,
    .announcement__link {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
    }

    .announcement__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(214, 165, 69, 0.12);
    }

    .announcement__link {
      color: var(--white);
      font-weight: 600;
    }

    .announcement__link:hover {
      color: var(--gold);
    }

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

    .site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      border-bottom: 1px solid transparent;
      background: rgba(246, 241, 232, 0.96);
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .site-header.is-scrolled {
      border-color: var(--line);
      box-shadow: 0 8px 30px rgba(16, 43, 38, 0.08);
    }

    .nav-wrap {
      display: flex;
      min-height: 82px;
      align-items: center;
      gap: 28px;
    }

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

    .brand__mark {
      width: 48px;
      height: 48px;
      border-radius: 13px;
      box-shadow: 0 7px 16px rgba(23, 63, 58, 0.15);
    }

    .brand__name {
      display: block;
      color: var(--ink-deep);
      font-family: var(--serif);
      font-size: 1.22rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }

    .brand__tagline {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.055em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: clamp(16px, 2vw, 30px);
      margin-left: auto;
    }

    .site-nav a {
      position: relative;
      padding: 29px 0 27px;
      color: #43514d;
      font-size: 0.86rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .site-nav a::after {
      position: absolute;
      right: 0;
      bottom: 20px;
      left: 0;
      height: 2px;
      background: var(--clay);
      content: "";
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.2s ease;
    }

    .site-nav a:hover,
    .site-nav a.is-active {
      color: var(--ink-deep);
    }

    .site-nav a:hover::after,
    .site-nav a.is-active::after {
      transform: scaleX(1);
      transform-origin: left;
    }

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

    .nav-toggle span {
      position: absolute;
      width: 19px;
      height: 2px;
      background: var(--ink-deep);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-toggle span:nth-child(1) {
      transform: translateY(-6px);
    }

    .nav-toggle span:nth-child(2) {
      transform: translateY(0);
    }

    .nav-toggle span:nth-child(3) {
      transform: translateY(6px);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
      transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
      transform: rotate(-45deg);
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 0;
      background:
        radial-gradient(circle at 9% 10%, rgba(214, 165, 69, 0.16), transparent 29%),
        radial-gradient(circle at 92% 74%, rgba(185, 203, 189, 0.5), transparent 32%),
        var(--paper);
    }

    .hero::before {
      position: absolute;
      top: 20px;
      right: -95px;
      width: 310px;
      height: 310px;
      border: 1px solid rgba(23, 63, 58, 0.12);
      border-radius: 50%;
      content: "";
    }

    .hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
      gap: clamp(48px, 7vw, 100px);
      align-items: center;
    }

    .hero h1 {
      max-width: 730px;
      margin-bottom: 28px;
      font-size: clamp(3.25rem, 6.4vw, 5.7rem);
      letter-spacing: -0.055em;
    }

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

    .hero h1 em::after {
      position: absolute;
      right: 2px;
      bottom: -5px;
      left: 3px;
      height: 7px;
      border-radius: 50%;
      background: rgba(214, 165, 69, 0.38);
      content: "";
      transform: rotate(-1deg);
    }

    .hero__lede {
      max-width: 630px;
      margin-bottom: 34px;
      color: #4d5c58;
      font-size: clamp(1.05rem, 1.6vw, 1.22rem);
      line-height: 1.75;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 34px;
    }

    .hero__proof {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .hero__avatars {
      display: flex;
      padding-left: 8px;
    }

    .hero__avatars img {
      width: 38px;
      height: 38px;
      margin-left: -8px;
      border: 3px solid var(--paper);
      border-radius: 50%;
    }

    .hero__proof p {
      margin: 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .hero__proof strong {
      display: block;
      color: var(--ink-deep);
      font-size: 0.84rem;
    }

    .hero__visual {
      position: relative;
      padding: 0 0 45px 28px;
    }

    .hero__visual::before {
      position: absolute;
      top: 28px;
      bottom: 0;
      left: 0;
      width: 62%;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
      background: var(--sage);
      content: "";
    }

    .hero__image-wrap {
      position: relative;
      overflow: hidden;
      min-height: 540px;
      border: 8px solid rgba(255, 253, 248, 0.7);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }

    .hero__image {
      width: 100%;
      height: 100%;
      min-height: 540px;
      object-fit: cover;
    }

    .hero__image-wrap::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(8, 36, 32, 0.36));
      content: "";
      pointer-events: none;
    }

    .hero__docket {
      position: absolute;
      z-index: 2;
      right: -18px;
      bottom: 4px;
      width: min(315px, 82%);
      padding: 21px;
      border: 1px solid rgba(23, 63, 58, 0.1);
      border-radius: 16px;
      background: rgba(255, 253, 248, 0.96);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(10px);
    }

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

    .hero__docket-label {
      color: var(--clay);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .live-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--ink-soft);
      font-size: 0.7rem;
      font-weight: 600;
    }

    .live-label::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4b966d;
      content: "";
    }

    .hero__docket h3 {
      margin-bottom: 7px;
      font-size: 1.12rem;
    }

    .hero__docket p {
      margin-bottom: 13px;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.55;
    }

    .hero__docket a {
      color: var(--ink);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .hero__stats {
      position: relative;
      z-index: 2;
      margin-top: 78px;
      border-top: 1px solid rgba(23, 63, 58, 0.15);
    }

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

    .hero__stat {
      padding: 30px 32px 33px 0;
    }

    .hero__stat + .hero__stat {
      padding-left: 32px;
      border-left: 1px solid rgba(23, 63, 58, 0.15);
    }

    .hero__stat strong {
      display: block;
      margin-bottom: 3px;
      color: var(--ink-deep);
      font-family: var(--serif);
      font-size: 1.65rem;
      line-height: 1.2;
    }

    .hero__stat span {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .topic-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .topic-card {
      position: relative;
      overflow: hidden;
      min-height: 425px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: 0 0 0 rgba(23, 63, 58, 0);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .topic-card::after {
      position: absolute;
      right: -50px;
      bottom: -70px;
      width: 175px;
      height: 175px;
      border: 1px solid rgba(23, 63, 58, 0.1);
      border-radius: 50%;
      content: "";
      transition: transform 0.35s ease;
    }

    .topic-card:hover {
      border-color: transparent;
      box-shadow: var(--shadow-sm);
      transform: translateY(-6px);
    }

    .topic-card:hover::after {
      transform: scale(1.25);
    }

    .topic-card__number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 44px;
    }

    .topic-card__number span:first-child {
      color: var(--clay);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.13em;
    }

    .topic-icon {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border-radius: 15px;
      background: var(--sage-light);
      color: var(--ink);
    }

    .topic-icon svg {
      width: 25px;
      height: 25px;
    }

    .topic-card h3 {
      margin-bottom: 15px;
    }

    .topic-card p {
      margin-bottom: 22px;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.7;
    }

    .topic-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 25px;
    }

    .topic-card__tags span {
      padding: 5px 9px;
      border-radius: 999px;
      background: #f1f0ea;
      color: var(--ink-soft);
      font-size: 0.68rem;
      font-weight: 600;
    }

    .briefing-feature {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow-sm);
    }

    .briefing-feature__image {
      position: relative;
      min-height: 560px;
    }

    .briefing-feature__image img {
      width: 100%;
      height: 100%;
      min-height: 560px;
      object-fit: cover;
    }

    .briefing-feature__image::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(10, 42, 37, 0.62));
      content: "";
    }

    .briefing-feature__caption {
      position: absolute;
      z-index: 2;
      right: 30px;
      bottom: 25px;
      left: 30px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.75rem;
      font-weight: 500;
    }

    .briefing-feature__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(35px, 5vw, 62px);
    }

    .briefing-feature__body h3 {
      margin-bottom: 20px;
      font-size: clamp(1.9rem, 3vw, 2.6rem);
    }

    .briefing-feature__body > p {
      color: var(--muted);
      font-size: 0.95rem;
    }

    .briefing-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin: 8px 0 25px;
      color: var(--muted);
      font-size: 0.75rem;
    }

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

    .briefing-meta svg {
      width: 14px;
      height: 14px;
    }

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

    .record-item {
      padding: 25px 0;
      border-bottom: 1px solid var(--line);
    }

    .record-item__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .record-item__type {
      color: var(--clay);
    }

    .record-item h4 {
      margin: 0 0 8px;
      color: var(--ink-deep);
      font-family: var(--serif);
      font-size: 1.14rem;
      line-height: 1.35;
    }

    .record-item p {
      margin: 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.6;
    }

    .process-strip {
      display: grid;
      grid-template-columns: 0.8fr repeat(4, 1fr);
      gap: 0;
      margin-top: 28px;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--ink);
      color: var(--white);
    }

    .process-strip__intro,
    .process-step {
      padding: 30px;
    }

    .process-strip__intro {
      background: var(--clay);
    }

    .process-strip__intro span {
      color: rgba(255, 255, 255, 0.68);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .process-strip__intro h3 {
      margin: 10px 0 0;
      color: var(--white);
      font-size: 1.38rem;
    }

    .process-step {
      border-left: 1px solid rgba(255, 255, 255, 0.13);
    }

    .process-step strong {
      display: block;
      margin-bottom: 7px;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 1.15rem;
    }

    .process-step p {
      margin: 0;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .resources {
      position: relative;
      overflow: hidden;
      background: var(--ink-deep);
      color: var(--white);
    }

    .resources::before {
      position: absolute;
      top: -180px;
      right: -160px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      content: "";
    }

    .resources__grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
      gap: clamp(55px, 8vw, 100px);
      align-items: center;
    }

    .resources h2 {
      color: var(--white);
    }

    .resources__intro p {
      color: rgba(255, 255, 255, 0.7);
      font-size: 1rem;
    }

    .resource-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 34px 0;
    }

    .resource-link {
      display: flex;
      min-height: 92px;
      align-items: center;
      gap: 15px;
      padding: 17px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 13px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .resource-link:hover {
      border-color: rgba(214, 165, 69, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .resource-link__icon {
      display: grid;
      width: 43px;
      height: 43px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 11px;
      background: rgba(214, 165, 69, 0.14);
      color: var(--gold);
    }

    .resource-link__icon svg {
      width: 21px;
      height: 21px;
    }

    .resource-link strong {
      display: block;
      margin-bottom: 3px;
      color: var(--white);
      font-size: 0.87rem;
    }

    .resource-link span {
      display: block;
      color: rgba(255, 255, 255, 0.56);
      font-size: 0.7rem;
      line-height: 1.4;
    }

    .resources__visual {
      position: relative;
      min-height: 590px;
    }

    .resources__image {
      width: 86%;
      height: 530px;
      margin-left: auto;
      border: 7px solid rgba(255, 255, 255, 0.11);
      border-radius: 190px 190px 22px 22px;
      object-fit: cover;
      box-shadow: var(--shadow-lg);
    }

    .resource-card {
      position: absolute;
      bottom: 0;
      left: 0;
      width: min(315px, 78%);
      padding: 28px;
      border-radius: 18px;
      background: var(--white);
      box-shadow: var(--shadow-lg);
      color: var(--text);
    }

    .resource-card__number {
      display: block;
      margin-bottom: 16px;
      color: var(--clay);
      font-family: var(--serif);
      font-size: 0.8rem;
      font-weight: 700;
    }

    .resource-card h3 {
      margin-bottom: 11px;
      font-size: 1.4rem;
    }

    .resource-card p {
      margin-bottom: 16px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .finder {
      position: relative;
    }

    .finder__grid {
      display: grid;
      grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.22fr);
      overflow: hidden;
      border: 1px solid #d5ddd5;
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow-sm);
    }

    .finder__form {
      padding: clamp(30px, 4vw, 48px);
      border-right: 1px solid var(--line);
      background: #f8f7f2;
    }

    .finder__form h3 {
      margin-bottom: 12px;
      font-size: 1.6rem;
    }

    .finder__form > p {
      margin-bottom: 28px;
      color: var(--muted);
      font-size: 0.88rem;
    }

    .form-field {
      margin-bottom: 19px;
    }

    .form-field label {
      display: block;
      margin-bottom: 7px;
      color: var(--ink-deep);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .form-field input,
    .form-field select {
      width: 100%;
      height: 50px;
      padding: 0 14px;
      border: 1px solid #cdd5ce;
      border-radius: 10px;
      background: var(--white);
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-field input:focus,
    .form-field select:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(23, 63, 58, 0.1);
    }

    .form-field input::placeholder {
      color: #98a19e;
    }

    .finder__privacy {
      display: flex;
      gap: 9px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.5;
    }

    .finder__privacy svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      margin-top: 2px;
    }

    .finder__result {
      min-height: 580px;
      padding: clamp(30px, 4vw, 48px);
    }

    .finder__placeholder {
      display: flex;
      min-height: 480px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .finder__placeholder-icon {
      display: grid;
      width: 82px;
      height: 82px;
      margin-bottom: 24px;
      place-items: center;
      border-radius: 50%;
      background: var(--sage-light);
      color: var(--ink);
    }

    .finder__placeholder-icon svg {
      width: 35px;
      height: 35px;
    }

    .finder__placeholder h3 {
      margin-bottom: 10px;
    }

    .finder__placeholder p {
      max-width: 450px;
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

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

    .result-header h3 {
      margin: 7px 0 7px;
      font-size: 1.85rem;
    }

    .result-header p {
      max-width: 530px;
      margin: 0;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .result-badge {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border-radius: 999px;
      background: #e5f1e8;
      color: #347050;
      font-size: 0.68rem;
      font-weight: 700;
    }

    .result-badge::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4b966d;
      content: "";
    }

    .official-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 25px;
    }

    .official-card {
      position: relative;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fbfaf6;
    }

    .official-card__label {
      display: block;
      margin-bottom: 5px;
      color: var(--clay);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .official-card h4 {
      margin: 0 0 7px;
      color: var(--ink-deep);
      font-family: var(--serif);
      font-size: 1.02rem;
    }

    .official-card p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 0.73rem;
      line-height: 1.55;
    }

    .official-card a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink);
      font-size: 0.73rem;
      font-weight: 700;
    }

    .official-card a svg {
      width: 13px;
      height: 13px;
    }

    .action-plan {
      padding: 22px;
      border-radius: 14px;
      background: var(--ink);
      color: var(--white);
    }

    .action-plan h4 {
      margin: 0 0 13px;
      color: var(--white);
      font-family: var(--serif);
      font-size: 1.12rem;
    }

    .action-plan ol {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: action;
    }

    .action-plan li {
      position: relative;
      padding-left: 31px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.72rem;
      line-height: 1.5;
      counter-increment: action;
    }

    .action-plan li::before {
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border-radius: 50%;
      background: var(--gold);
      color: var(--ink-deep);
      content: counter(action);
      font-size: 0.66rem;
      font-weight: 700;
    }

    .result-disclaimer {
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 0.67rem;
      line-height: 1.5;
    }

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

    .action-card {
      display: flex;
      min-height: 390px;
      flex-direction: column;
      padding: 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

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

    .action-card__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    .action-card__number {
      color: var(--clay);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.11em;
    }

    .action-card__symbol {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
    }

    .action-card__symbol svg {
      width: 22px;
      height: 22px;
    }

    .action-card h3 {
      margin-bottom: 14px;
    }

    .action-card p {
      margin-bottom: 24px;
      color: var(--muted);
      font-size: 0.9rem;
    }

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

    .petition-card {
      grid-column: span 3;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
      gap: 40px;
      align-items: center;
      padding: 38px 42px;
      border-radius: var(--radius);
      background: var(--ink);
      color: var(--white);
    }

    .petition-card h3 {
      margin-bottom: 10px;
      color: var(--white);
    }

    .petition-card p {
      margin-bottom: 0;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }

    .petition-progress__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.76rem;
    }

    .petition-progress__meta strong {
      color: var(--white);
    }

    .progress-bar {
      overflow: hidden;
      height: 8px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
    }

    .progress-bar span {
      display: block;
      width: 78%;
      height: 100%;
      border-radius: inherit;
      background: var(--gold);
    }

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

    .event-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

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

    .event-card__image {
      position: relative;
      height: 190px;
    }

    .event-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-card__date {
      position: absolute;
      right: 16px;
      bottom: 16px;
      display: grid;
      width: 62px;
      height: 67px;
      place-items: center;
      border-radius: 12px;
      background: var(--white);
      box-shadow: var(--shadow-sm);
      color: var(--ink-deep);
      text-align: center;
    }

    .event-card__date strong {
      display: block;
      margin-bottom: -7px;
      font-family: var(--serif);
      font-size: 1.35rem;
      line-height: 1;
    }

    .event-card__date span {
      color: var(--clay);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .event-card__body {
      padding: 26px;
    }

    .event-card__type {
      display: block;
      margin-bottom: 10px;
      color: var(--clay);
      font-size: 0.67rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .event-card h3 {
      margin-bottom: 11px;
      font-size: 1.3rem;
    }

    .event-card p {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .event-card__details {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 16px;
      margin-bottom: 19px;
      color: var(--muted);
      font-size: 0.72rem;
    }

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

    .event-card__details svg {
      width: 14px;
      height: 14px;
    }

    .about__grid {
      display: grid;
      grid-template-columns: minmax(370px, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(50px, 8vw, 100px);
      align-items: center;
    }

    .about__visual {
      position: relative;
    }

    .about__image {
      width: 100%;
      min-height: 600px;
      border-radius: 220px 220px 20px 20px;
      object-fit: cover;
    }

    .about__badge {
      position: absolute;
      right: -28px;
      bottom: 28px;
      width: 190px;
      padding: 24px;
      border-radius: 16px;
      background: var(--clay);
      box-shadow: var(--shadow-lg);
      color: var(--white);
    }

    .about__badge strong {
      display: block;
      margin-bottom: 5px;
      font-family: var(--serif);
      font-size: 2rem;
      line-height: 1;
    }

    .about__badge span {
      font-size: 0.72rem;
      line-height: 1.5;
    }

    .about__copy > p {
      color: var(--muted);
      font-size: 1rem;
    }

    .principles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 30px 0;
    }

    .principle {
      padding: 18px;
      border-left: 3px solid var(--gold);
      background: var(--paper);
    }

    .principle strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink-deep);
      font-family: var(--serif);
      font-size: 0.95rem;
    }

    .principle span {
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.5;
    }

    .testimonials {
      margin-top: 80px;
    }

    .testimonials__heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 34px;
    }

    .testimonials__heading h2 {
      max-width: 660px;
      margin-bottom: 0;
    }

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

    .testimonial-card {
      display: flex;
      min-height: 320px;
      flex-direction: column;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
    }

    .testimonial-card__quote {
      position: relative;
      margin-bottom: 28px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1.08rem;
      font-style: italic;
      line-height: 1.65;
    }

    .testimonial-card__quote::before {
      position: absolute;
      top: -17px;
      left: -3px;
      color: var(--gold);
      content: "“";
      font-family: Georgia, serif;
      font-size: 3.3rem;
      font-style: normal;
      line-height: 1;
    }

    .testimonial-card__person {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: auto;
    }

    .testimonial-card__person img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-card__person strong {
      display: block;
      color: var(--ink-deep);
      font-size: 0.82rem;
    }

    .testimonial-card__person span {
      display: block;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 0.65fr 1.35fr;
      gap: 70px;
      align-items: start;
    }

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

    .faq-intro p {
      color: var(--muted);
      font-size: 0.9rem;
    }

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

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

    .faq-item summary {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 25px 45px 25px 0;
      color: var(--ink-deep);
      cursor: pointer;
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 600;
      line-height: 1.4;
      list-style: none;
    }

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

    .faq-item summary::after {
      position: absolute;
      top: 50%;
      right: 5px;
      width: 28px;
      height: 28px;
      border: 1px solid #bdc6c0;
      border-radius: 50%;
      color: var(--ink);
      content: "+";
      font-family: var(--sans);
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 26px;
      text-align: center;
      transform: translateY(-50%);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .faq-item[open] summary::after {
      background: var(--ink);
      color: var(--white);
      content: "–";
      transform: translateY(-50%) rotate(180deg);
    }

    .faq-item__answer {
      max-width: 710px;
      padding: 0 45px 25px 0;
      color: var(--muted);
      font-size: 0.89rem;
    }

    .newsletter {
      position: relative;
      overflow: hidden;
      padding: 74px 0;
      background: var(--clay);
      color: var(--white);
    }

    .newsletter::before,
    .newsletter::after {
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 50%;
      content: "";
    }

    .newsletter::before {
      top: -150px;
      left: -90px;
      width: 350px;
      height: 350px;
    }

    .newsletter::after {
      right: -80px;
      bottom: -170px;
      width: 390px;
      height: 390px;
    }

    .newsletter__grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
      gap: 70px;
      align-items: center;
    }

    .newsletter h2 {
      margin-bottom: 12px;
      color: var(--white);
      font-size: clamp(2.2rem, 4vw, 3.5rem);
    }

    .newsletter p {
      max-width: 610px;
      margin: 0;
      color: rgba(255, 255, 255, 0.8);
    }

    .newsletter__form {
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
    }

    .newsletter__form-row {
      display: flex;
      gap: 10px;
    }

    .newsletter__form input {
      min-width: 0;
      flex: 1;
      height: 50px;
      padding: 0 15px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--white);
      color: var(--text);
      outline: none;
    }

    .newsletter__form input:focus {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);
    }

    .newsletter__form small {
      display: block;
      margin-top: 12px;
      color: rgba(255, 255, 255, 0.66);
      font-size: 0.67rem;
      line-height: 1.5;
    }

    .form-success {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 15px 17px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.14);
      color: var(--white);
      font-size: 0.82rem;
      font-weight: 600;
    }

    .form-success.is-visible {
      display: flex;
    }

    .form-success svg {
      width: 18px;
      height: 18px;
    }

    .site-footer {
      padding: 72px 0 26px;
      background: var(--ink-deep);
      color: rgba(255, 255, 255, 0.68);
    }

    .footer__grid {
      display: grid;
      grid-template-columns: 1.5fr 0.8fr 0.9fr 1.15fr;
      gap: 55px;
      padding-bottom: 50px;
    }

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

    .footer-brand .brand__tagline {
      color: rgba(255, 255, 255, 0.54);
    }

    .footer-brand > p {
      max-width: 340px;
      margin: 22px 0;
      font-size: 0.82rem;
    }

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

    .social-links a {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.8);
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .social-links a:hover {
      border-color: var(--gold);
      background: rgba(214, 165, 69, 0.1);
      color: var(--gold);
    }

    .social-links svg {
      width: 16px;
      height: 16px;
    }

    .footer-column h3 {
      margin-bottom: 20px;
      color: var(--white);
      font-family: var(--sans);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .footer-column ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-column li + li {
      margin-top: 11px;
    }

    .footer-column a {
      font-size: 0.8rem;
      transition: color 0.2s ease;
    }

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

    .footer-contact {
      font-style: normal;
      font-size: 0.8rem;
      line-height: 1.8;
    }

    .footer-contact a {
      display: block;
      margin-bottom: 5px;
    }

    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.48);
      font-size: 0.68rem;
    }

    .footer__legal {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
    }

    .footer__legal a:hover {
      color: var(--white);
    }

    .footer__disclaimer {
      max-width: 780px;
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.38);
      font-size: 0.64rem;
      line-height: 1.6;
    }

    dialog {
      width: min(calc(100% - 30px), 520px);
      padding: 0;
      border: 0;
      border-radius: 20px;
      background: var(--white);
      box-shadow: var(--shadow-lg);
      color: var(--text);
    }

    dialog::backdrop {
      background: rgba(6, 29, 25, 0.74);
      backdrop-filter: blur(5px);
    }

    .dialog__body {
      position: relative;
      padding: 38px;
    }

    .dialog__close {
      position: absolute;
      top: 17px;
      right: 17px;
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
    }

    .dialog__close svg {
      width: 16px;
      height: 16px;
    }

    .dialog__icon {
      display: grid;
      width: 52px;
      height: 52px;
      margin-bottom: 22px;
      place-items: center;
      border-radius: 15px;
      background: var(--sage-light);
      color: var(--ink);
    }

    .dialog__icon svg {
      width: 25px;
      height: 25px;
    }

    .dialog__body h2 {
      margin-bottom: 12px;
      font-size: 2rem;
    }

    .dialog__body > p {
      margin-bottom: 24px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .dialog__check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.72rem;
    }

    .dialog__check input {
      margin-top: 4px;
      accent-color: var(--clay);
    }

    .toast {
      position: fixed;
      z-index: 100;
      right: 20px;
      bottom: 20px;
      display: flex;
      max-width: 390px;
      align-items: center;
      gap: 11px;
      padding: 15px 18px;
      border-radius: 12px;
      background: var(--ink-deep);
      box-shadow: var(--shadow-lg);
      color: var(--white);
      font-size: 0.82rem;
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .toast svg {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
      color: var(--gold);
    }

    @media (max-width: 1100px) {
      .site-nav {
        gap: 16px;
      }

      .site-nav a {
        font-size: 0.8rem;
      }

      .header-cta {
        display: none;
      }

      .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(370px, 0.8fr);
        gap: 45px;
      }

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

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

      .process-strip__intro {
        grid-column: 1 / -1;
      }

      .resources__grid {
        gap: 50px;
      }

      .footer__grid {
        grid-template-columns: 1.3fr 0.7fr 0.9fr 1fr;
        gap: 35px;
      }
    }

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

      .nav-wrap {
        min-height: 72px;
      }

      .nav-toggle {
        position: relative;
        z-index: 3;
        display: flex;
        margin-left: auto;
      }

      .site-nav {
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 20px;
        overflow-y: auto;
        background: var(--paper);
      }

      .site-nav.is-open {
        display: flex;
      }

      .site-nav a {
        padding: 15px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink-deep);
        font-family: var(--serif);
        font-size: 1.15rem;
      }

      .site-nav a::after {
        display: none;
      }

      .hero {
        padding-top: 70px;
      }

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

      .hero__copy {
        max-width: 760px;
      }

      .hero__visual {
        max-width: 650px;
        margin-inline: auto;
      }

      .hero__image-wrap,
      .hero__image {
        min-height: 480px;
      }

      .topic-grid,
      .action-grid,
      .event-grid,
      .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .topic-card:last-child,
      .event-card:last-child,
      .testimonial-card:last-child {
        grid-column: 1 / -1;
      }

      .briefing-feature {
        grid-template-columns: 1fr;
      }

      .briefing-feature__image,
      .briefing-feature__image img {
        min-height: 400px;
      }

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

      .resources__copy {
        max-width: 760px;
      }

      .resources__visual {
        max-width: 680px;
        margin-inline: auto;
      }

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

      .finder__form {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .action-card:last-child {
        grid-column: auto;
      }

      .petition-card {
        grid-column: span 2;
      }

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

      .about__visual {
        max-width: 620px;
      }

      .about__image {
        min-height: 520px;
      }

      .faq-grid {
        grid-template-columns: 1fr;
        gap: 35px;
      }

      .faq-intro {
        position: static;
      }

      .newsletter__grid {
        grid-template-columns: 1fr;
        gap: 35px;
      }

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

    @media (max-width: 700px) {
      .container {
        width: min(calc(100% - 28px), var(--container));
      }

      .announcement__message {
        display: none;
      }

      .announcement__inner {
        justify-content: center;
      }

      .brand__tagline {
        display: none;
      }

      .section {
        padding: 68px 0;
      }

      .section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 38px;
      }

      .hero {
        padding-top: 54px;
      }

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

      .hero__lede {
        font-size: 1rem;
      }

      .hero__actions {
        align-items: stretch;
        flex-direction: column;
      }

      .hero__actions .btn {
        width: 100%;
      }

      .hero__visual {
        padding: 0 0 58px;
      }

      .hero__visual::before {
        display: none;
      }

      .hero__image-wrap,
      .hero__image {
        min-height: 420px;
      }

      .hero__docket {
        right: 12px;
        bottom: 0;
      }

      .hero__stats {
        margin-top: 55px;
      }

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

      .hero__stat {
        padding: 22px 15px 22px 0;
      }

      .hero__stat:nth-child(3) {
        padding-left: 0;
        border-top: 1px solid rgba(23, 63, 58, 0.15);
        border-left: 0;
      }

      .hero__stat:nth-child(4) {
        border-top: 1px solid rgba(23, 63, 58, 0.15);
      }

      .topic-grid,
      .action-grid,
      .event-grid,
      .testimonial-grid {
        grid-template-columns: 1fr;
      }

      .topic-card:last-child,
      .event-card:last-child,
      .testimonial-card:last-child,
      .action-card:last-child,
      .petition-card {
        grid-column: auto;
      }

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

      .briefing-feature__image,
      .briefing-feature__image img {
        min-height: 320px;
      }

      .process-strip {
        grid-template-columns: 1fr;
      }

      .process-strip__intro {
        grid-column: auto;
      }

      .process-step {
        border-top: 1px solid rgba(255, 255, 255, 0.13);
        border-left: 0;
      }

      .resource-list,
      .official-grid,
      .principles {
        grid-template-columns: 1fr;
      }

      .resources__image {
        width: 92%;
        height: 430px;
      }

      .resource-card {
        left: 0;
        width: 88%;
      }

      .finder__result {
        min-height: 500px;
      }

      .result-header {
        flex-direction: column;
      }

      .action-plan ol {
        grid-template-columns: 1fr;
      }

      .petition-card {
        grid-template-columns: 1fr;
        padding: 30px;
      }

      .about__image {
        min-height: 440px;
      }

      .about__badge {
        right: 12px;
        width: 165px;
      }

      .testimonials {
        margin-top: 60px;
      }

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

      .newsletter {
        padding: 60px 0;
      }

      .newsletter__form-row {
        flex-direction: column;
      }

      .footer__grid {
        grid-template-columns: 1fr;
        gap: 38px;
      }

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

      .dialog__body {
        padding: 30px 24px;
      }
    }

    @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;
      }
    }
  </style>
</head>

<body id="top">
  <a class="skip-link" href="#main">Skip to main content</a>

  <div class="announcement">
    <div class="container announcement__inner">
      <p class="announcement__message"><span class="announcement__dot"></span>Independent, nonpartisan, and public-interest focused</p>
      <a class="announcement__link" href="#newsletter">
        Get the weekly policy brief
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
    </div>
  </div>

  <header class="site-header" id="siteHeader">
    <div class="container nav-wrap">
      <a class="brand" href="#top" aria-label="Civic Ledger home">
        <img class="brand__mark" src="https://placehold.co/96x96/173f3a/f7f1e3?text=CL&amp;font=lora" alt="Civic Ledger monogram" width="48" height="48">
        <span>
          <span class="brand__name">Civic Ledger</span>
          <span class="brand__tagline">Clarity in law. Confidence in civic action.</span>
        </span>
      </a>

      <nav class="site-nav" id="siteNav" aria-label="Primary navigation">
        <a href="#briefings">Briefings</a>
        <a href="#resources">Resources</a>
        <a href="#representatives">Representatives</a>
        <a href="#events">Events</a>
        <a href="#about">About</a>
        <a href="#get-involved">Get Involved</a>
      </nav>

      <a class="btn btn--dark btn--small header-cta" href="#newsletter">Stay Informed</a>

      <button class="nav-toggle" id="navToggle" type="button" aria-label="Open navigation" aria-controls="siteNav" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <main id="main">
    <section class="hero">
      <div class="container hero__grid">
        <div class="hero__copy">
          <span class="eyebrow">Public-interest law &amp; civic intelligence</span>
          <h1>Make sense of the laws that shape <em>your life.</em></h1>
          <p class="hero__lede">Civic Ledger turns dense legislation, ballot measures, court decisions, and civic procedures into clear, credible guidance—so you can understand what is happening and take meaningful action.</p>
          <div class="hero__actions">
            <a class="btn btn--primary" href="#briefings">
              Explore the latest brief
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a class="btn btn--outline" href="#representatives">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><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"/></svg>
              Find your representative
            </a>
          </div>
          <div class="hero__proof">
            <div class="hero__avatars" aria-hidden="true">
              <img src="https://i.pravatar.cc/80?u=maya-organizer" alt="" width="38" height="38">
              <img src="https://i.pravatar.cc/80?u=james-analyst" alt="" width="38" height="38">
              <img src="https://i.pravatar.cc/80?u=elena-advocate" alt="" width="38" height="38">
            </div>
            <p><strong>Built with communities, not just for them.</strong>Independent analysis used by organizers, educators, journalists, and public leaders.</p>
          </div>
        </div>

        <div class="hero__visual">
          <div class="hero__image-wrap">
            <img class="hero__image" src="https://placehold.co/1200x900/173f3a/f7f1e3?text=YOUR+VOICE%2C+OUR+PUBLIC+RECORD&amp;font=lora" alt="Civic Ledger public policy briefing illustration" width="1200" height="900">
          </div>
          <div class="hero__docket">
            <div class="hero__docket-top">
              <span class="hero__docket-label">Today’s public docket</span>
              <span class="live-label">Updated</span>
            </div>
            <h3>Housing ballot measure tracker</h3>
            <p>Plain-language summary, hearing calendar, fiscal impact, and public-comment guide.</p>
            <a href="#briefings">Read the 5-minute brief →</a>
          </div>
        </div>
      </div>

      <div class="hero__stats">
        <div class="container hero__stats-grid">
          <div class="hero__stat"><strong>38</strong><span>active policy briefs</span></div>
          <div class="hero__stat"><strong>12</strong><span>state legislative monitors</span></div>
          <div class="hero__stat"><strong>45+</strong><span>civic partner organizations</span></div>
          <div class="hero__stat"><strong>0</strong><span>paid political endorsements</span></div>
        </div>
      </div>
    </section>

    <section class="section section--white" id="topics">
      <div class="container">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Where we focus</span>
            <h2>Public information for public decisions.</h2>
          </div>
          <p>We follow the institutions and issues that affect everyday life, connecting legal developments to the practical steps residents can take. Our work spans policy research, grassroots strategy, and civil-liberties education.</p>
        </div>

        <div class="topic-grid">
          <article class="topic-card">
            <div class="topic-card__number">
              <span>01 / Policy</span>
              <span class="topic-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19V9m6 10V5m6 14v-7m4 7H2"/><path d="m3 8 6-5 5 4 7-6"/></svg>
              </span>
            </div>
            <h3>Policy &amp; ballot measures</h3>
            <p>We track legislation from committee hearings to final votes, then explain what a proposal would change, who it affects, and where the public can intervene. Every analysis distinguishes verified facts from projections and highlights unresolved implementation questions.</p>
            <div class="topic-card__tags"><span>Legislation</span><span>Local government</span><span>Fiscal analysis</span></div>
            <a class="text-link" href="#briefings">Explore policy analysis <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>

          <article class="topic-card">
            <div class="topic-card__number">
              <span>02 / Organize</span>
              <span class="topic-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M16 11h6M17 21v-2a4 4 0 0 0-3-3.87"/></svg>
              </span>
            </div>
            <h3>Grassroots organizing</h3>
            <p>Strong campaigns begin with accurate information and clear goals. We help local leaders identify decision points, build public-comment coalitions, and create feedback loops that keep constituents engaged after the vote.</p>
            <div class="topic-card__tags"><span>Coalition building</span><span>Public comment</span><span>Field strategy</span></div>
            <a class="text-link" href="#resources">Open the toolkit <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>

          <article class="topic-card">
            <div class="topic-card__number">
              <span>03 / Rights</span>
              <span class="topic-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v18M5 7h14M5 17h14"/><path d="m3 7 9-4 9 4-9 4-9-4Zm0 10 9 4 9-4"/></svg>
              </span>
            </div>
            <h3>Civil liberties</h3>
            <p>We explain constitutional protections, due process, speech, privacy, and voting rights without legal jargon. When policy becomes litigation, our legal editors show how courts interpret the law and where qualified counsel may be necessary.</p>
            <div class="topic-card__tags"><span>First Amendment</span><span>Voting rights</span><span>Legal literacy</span></div>
            <a class="text-link" href="#get-involved">Learn your rights <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="briefings">
      <div class="container">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Featured analysis</span>
            <h2>Read past the headline.</h2>
          </div>
          <p>Our legal and policy editors connect the decision in front of you to the process behind it. Each briefing includes the source record, key stakeholders, likely consequences, and a clear way to participate.</p>
        </div>

        <div class="briefing-feature">
          <div class="briefing-feature__image">
            <img src="https://placehold.co/1200x760/274f4a/f3eadc?text=BALLOT+MEASURE+PUBLIC+HEARING&amp;font=lora" alt="Illustration of a ballot measure public hearing" width="1200" height="760">
            <span class="briefing-feature__caption">A public hearing is one formal stage in the legislative and administrative process.</span>
          </div>
          <div class="briefing-feature__body">
            <span class="eyebrow">Deep dive / Housing</span>
            <h3>Can a housing ballot measure actually change what gets built?</h3>
            <p>A proposed zoning measure may appear simple—“yes” or “no”—but the operative language can determine whether density limits, tenant protections, and affordable-housing incentives apply to projects already moving through the permit process.</p>
            <p>We reviewed the draft language, sponsor statement, fiscal note, and public testimony. Our analysis identifies the amendments most likely to affect project approvals, outlines the litigation risks facing the measure, and explains the difference between a referendum and a citizen-initiated ballot measure.</p>
            <div class="briefing-meta">
              <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>8 min read</span>
              <span>Updated today</span>
              <span>Reviewed by 2 attorneys</span>
            </div>
            <a class="btn btn--dark" href="#resources">Read the full analysis</a>
          </div>
        </div>

        <div class="process-strip" aria-label="The policy analysis process">
          <div class="process-strip__intro">
            <span>Our editorial method</span>
            <h3>Trace every claim to the public record.</h3>
          </div>
          <div class="process-step"><strong>01. Read</strong><p>Compare bill text with committee reports, fiscal notes, and amendments.</p></div>
          <div class="process-step"><strong>02. Verify</strong><p>Confirm quotes, dates, sponsors, and procedural status against official sources.</p></div>
          <div class="process-step"><strong>03. Contextualize</strong><p>Explain precedents, litigation, and the lived impact of policy choices.</p></div>
          <div class="process-step"><strong>04. Translate</strong><p>Turn the record into practical guidance and participation steps.</p></div>
        </div>
      </div>
    </section>

    <section class="section resources" id="resources">
      <div class="container resources__grid">
        <div class="resources__copy">
          <span class="eyebrow eyebrow--light">The civic resource desk</span>
          <h2>Facts first. Action next.</h2>
          <p>Good civic tools should save time without flattening complexity. Our guides are written for residents, organizers, educators, and small newsrooms who need a reliable starting point—not a substitute for advice from a licensed attorney.</p>
          <p>Each toolkit includes source links, key vocabulary, questions to ask, and records you can request from public agencies. Use them to prepare for a board meeting, check a proposition, understand a court decision, or make a public comment more effective.</p>

          <div class="resource-list">
            <a class="resource-link" href="#briefings">
              <span class="resource-link__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M6 3h9l4 4v14H6z"/><path d="M15 3v5h5M9 13h7M9 17h7"/></svg></span>
              <span><strong>Read a bill</strong><span>Section-by-section legislative guide</span></span>
            </a>
            <a class="resource-link" href="#find-representative">
              <span class="resource-link__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><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"/></svg></span>
              <span><strong>Find an official</strong><span>Federal, state, and local directories</span></span>
            </a>
            <a class="resource-link" href="#get-involved">
              <span class="resource-link__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4Z"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg></span>
              <span><strong>Make public comment</strong><span>Prepare a three-minute statement</span></span>
            </a>
            <a class="resource-link" href="#events">
              <span class="resource-link__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg></span>
              <span><strong>Attend a hearing</strong><span>Dates, access, and speaking rules</span></span>
            </a>
          </div>

          <a class="btn btn--light" href="#representatives">Open the civic finder</a>
        </div>

        <div class="resources__visual">
          <img class="resources__image" src="https://picsum.photos/seed/civic-library/900/1100?grayscale" alt="Library shelves and public information resources" width="900" height="1100" loading="lazy">
          <div class="resource-card">
            <span class="resource-card__number">Start here / 01</span>
            <h3>The five-minute civic primer</h3>
            <p>Learn how a proposal moves through committee, public comment, the legislative process, and—where applicable—litigation.</p>
            <a class="text-link" href="#briefings">Read the primer <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </div>
        </div>
      </div>
    </section>

    <section class="section section--soft" id="representatives">
      <div class="container">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Interactive civic finder</span>
            <h2>Find your public officials.</h2>
          </div>
          <p>Enter your ZIP code and choose a state to build a focused action plan. We route you to verified federal directories, explain what to ask for, and connect you with official voting and election resources.</p>
        </div>

        <div class="finder__grid">
          <form class="finder__form" id="repFinder">
            <h3>Start with your location</h3>
            <p>Your exact address is never stored. We use the ZIP only to prepare this result in your browser.</p>

            <div class="form-field">
              <label for="zipCode">Home ZIP code</label>
              <input id="zipCode" name="zip" type="text" inputmode="numeric" autocomplete="postal-code" maxlength="5" pattern="[0-9]{5}" placeholder="e.g. 20005" required>
            </div>

            <div class="form-field">
              <label for="stateSelect">State</label>
              <select id="stateSelect" name="state" required>
                <option value="">Select your state</option>
                <option>Alabama</option>
                <option>Alaska</option>
                <option>Arizona</option>
                <option>Arkansas</option>
                <option>California</option>
                <option>Colorado</option>
                <option>Connecticut</option>
                <option>Delaware</option>
                <option>District of Columbia</option>
                <option>Florida</option>
                <option>Georgia</option>
                <option>Hawaii</option>
                <option>Idaho</option>
                <option>Illinois</option>
                <option>Indiana</option>
                <option>Iowa</option>
                <option>Kansas</option>
                <option>Kentucky</option>
                <option>Louisiana</option>
                <option>Maine</option>
                <option>Maryland</option>
                <option>Massachusetts</option>
                <option>Michigan</option>
                <option>Minnesota</option>
                <option>Mississippi</option>
                <option>Missouri</option>
                <option>Montana</option>
                <option>Nebraska</option>
                <option>Nevada</option>
                <option>New Hampshire</option>
                <option>New Jersey</option>
                <option>New Mexico</option>
                <option>New York</option>
                <option>North Carolina</option>
                <option>North Dakota</option>
                <option>Ohio</option>
                <option>Oklahoma</option>
                <option>Oregon</option>
                <option>Pennsylvania</option>
                <option>Rhode Island</option>
                <option>South Carolina</option>
                <option>South Dakota</option>
                <option>Tennessee</option>
                <option>Texas</option>
                <option>Utah</option>
                <option>Vermont</option>
                <option>Virginia</option>
                <option>Washington</option>
                <option>West Virginia</option>
                <option>Wisconsin</option>
                <option>Wyoming</option>
              </select>
            </div>

            <div class="form-field">
              <label for="issueSelect">What do you want to do?</label>
              <select id="issueSelect" name="issue">
                <option value="voting">Understand voting and elections</option>
                <option value="housing">Engage on housing policy</option>
                <option value="education">Review an education measure</option>
                <option value="environment">Comment on an environmental rule</option>
                <option value="privacy">Address privacy and civil liberties</option>
                <option value="general">Contact an official about a local issue</option>
              </select>
            </div>

            <button class="btn btn--primary" type="submit" style="width: 100%;">
              Build my action plan
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>

            <p class="finder__privacy">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
              Privacy: We do not sell personal data or retain your ZIP. External links open official government directories.
            </p>
          </form>

          <div class="finder__result" id="finderResult" aria-live="polite">
            <div class="finder__placeholder">
              <span class="finder__placeholder-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6M8 11h.01M12 11h.01M16 11h.01"/></svg>
              </span>
              <h3>Your civic action plan will appear here.</h3>
              <p>Start with your ZIP and state to find verified representative directories, election resources, and a focused set of next steps.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section--white" id="get-involved">
      <div class="container">
        <div class="section-heading">
          <div>
            <span class="eyebrow">From information to impact</span>
            <h2>Participation works in three steps.</h2>
          </div>
          <p>You do not need a legal degree to make your voice heard. Start with a clear right or responsibility, use a reliable record of the decision, and choose the decision point where your participation can have the greatest effect.</p>
        </div>

        <div class="action-grid">
          <article class="action-card">
            <div class="action-card__top">
              <span class="action-card__number">01 / KNOW</span>
              <span class="action-card__symbol" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3 4 7v5c0 5 3.4 8.5 8 9 4.6-.5 8-4 8-9V7l-8-4Z"/><path d="m9 12 2 2 4-5"/></svg></span>
            </div>
            <h3>Learn Rights</h3>
            <p>Understand the protections available to you, the limits on public participation, and when a legal aid organization or licensed attorney can help. Rights guides include scripts for communicating with agencies and documenting interactions.</p>
            <a class="text-link" href="#faq">Explore your rights <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>

          <article class="action-card">
            <div class="action-card__top">
              <span class="action-card__number">02 / SUPPORT</span>
              <span class="action-card__symbol" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 3h12v18H6zM9 8h6M9 12h6M9 16h4"/></svg></span>
            </div>
            <h3>Sign Petition</h3>
            <p>Add your name to a verified public comment statement. We clearly identify the sponsoring organization, the decision being addressed, the deadline, and how signatures will be delivered to the body with authority to act.</p>
            <button class="text-link" type="button" id="openPetition" style="align-self: flex-start; border: 0; background: none; padding: 0;">
              Sign the housing statement
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          </article>

          <article class="action-card">
            <div class="action-card__top">
              <span class="action-card__number">03 / CONTACT</span>
              <span class="action-card__symbol" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 5h16v14H4z"/><path d="m4 7 8 6 8-6"/></svg></span>
            </div>
            <h3>Contact Representative</h3>
            <p>Send a focused message to the office responsible for the issue. Include your constituency, the exact decision you want reviewed, a concise personal rationale, and a clear request for a response or meeting.</p>
            <a class="text-link" href="#representatives">Find your representative <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>

          <article class="petition-card">
            <div>
              <span class="eyebrow eyebrow--light">Current public action</span>
              <h3>Support the Affordable Housing Accountability Act</h3>
              <p>Ask the housing committee to require clearer affordability reporting before approving major density changes. The public-comment period closes May 9.</p>
            </div>
            <div class="petition-progress">
              <div class="petition-progress__meta"><span><strong>4,812</strong> signatures</span><span>78% of 6,200 goal</span></div>
              <div class="progress-bar" aria-label="78 percent of signature goal reached"><span></span></div>
              <button class="btn btn--light" type="button" id="openPetitionBottom">Sign Petition</button>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="events">
      <div class="container">
        <div class="section-heading">
          <div>
            <span class="eyebrow">Public events</span>
            <h2>Show up informed.</h2>
          </div>
          <p>Join hearings, briefings, and skills sessions where legal experts, organizers, and public officials can exchange useful information. Registration is free, and materials remain available afterward.</p>
        </div>

        <div class="event-grid">
          <article class="event-card">
            <div class="event-card__image">
              <img src="https://placehold.co/800x500/314f4a/f7f1e3?text=PUBLIC+HEARING&amp;font=lora" alt="Public hearing event illustration" width="800" height="500" loading="lazy">
              <div class="event-card__date"><strong>18</strong><span>APR</span></div>
            </div>
            <div class="event-card__body">
              <span class="event-card__type">Public hearing</span>
              <h3>Where does the housing measure stand?</h3>
              <p>A legal and fiscal briefing on the proposed ballot measure, followed by a moderated question-and-answer session with housing advocates.</p>
              <div class="event-card__details">
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>10:00 AM–12:00 PM</span>
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><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"/></svg>Online + Civic Hall</span>
              </div>
              <a class="text-link" href="#newsletter">Reserve your seat <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
            </div>
          </article>

          <article class="event-card">
            <div class="event-card__image">
              <img src="https://placehold.co/800x500/a85a42/f7f1e3?text=CIVIC+TECH+LAB&amp;font=lora" alt="Civic technology lab illustration" width="800" height="500" loading="lazy">
              <div class="event-card__date"><strong>24</strong><span>APR</span></div>
            </div>
            <div class="event-card__body">
              <span class="event-card__type">Skills lab</span>
              <h3>Turn public records into a stronger case</h3>
              <p>Learn how to request meeting materials, use public-records tools, and organize source notes that support testimony or responsible journalism.</p>
              <div class="event-card__details">
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>6:00–7:30 PM</span>
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 2v4M16 2v4M3 9h18"/></svg>Online</span>
              </div>
              <a class="text-link" href="#newsletter">Register free <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
            </div>
          </article>

          <article class="event-card">
            <div class="event-card__image">
              <img src="https://placehold.co/800x500/274f4a/d7b65a?text=KNOW+YOUR+RIGHTS&amp;font=lora" alt="Know your rights workshop illustration" width="800" height="500" loading="lazy">
              <div class="event-card__date"><strong>02</strong><span>MAY</span></div>
            </div>
            <div class="event-card__body">
              <span class="event-card__type">Community workshop</span>
              <h3>Your rights at a public hearing</h3>
              <p>Practical guidance on public comment, recording, decorum rules, and how to request accommodations or language access.</p>
              <div class="event-card__details">
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>12:00–2:00 PM</span>
                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><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"/></svg>Westbridge Library</span>
              </div>
              <a class="text-link" href="#newsletter">Save your place <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section section--white" id="about">
      <div class="container">
        <div class="about__grid">
          <div class="about__visual">
            <img class="about__image" src="https://picsum.photos/seed/public-library/900/1100?grayscale" alt="Public library and civic information environment" width="900" height="1100" loading="lazy">
            <div class="about__badge"><strong>2012</strong><span>Independent, community-rooted, and editorially accountable since our founding.</span></div>
          </div>

          <div class="about__copy">
            <span class="eyebrow">About Civic Ledger</span>
            <h2>Democracy works better when people can understand it.</h2>
            <p>Civic Ledger is an independent legal-information and public-affairs organization. We publish source-based analysis on government decisions, explain the practical consequences of policy, and equip communities to participate in the institutions that shape their lives.</p>
            <p>Our newsroom and legal team work across jurisdictions but remain deliberately nonpartisan. We distinguish reporting from advocacy, disclose potential conflicts, correct errors transparently, and never trade editorial conclusions for access, funding, or political support.</p>

            <div class="principles">
              <div class="principle"><strong>Evidence before urgency</strong><span>We verify the record, cite primary sources, and label what remains uncertain.</span></div>
              <div class="principle"><strong>Plain language, not simplistic</strong><span>Our guides remove legal jargon without removing necessary nuance.</span></div>
              <div class="principle"><strong>Independence with accountability</strong><span>Funding disclosures and editorial standards are public and reviewable.</span></div>
              <div class="principle"><strong>Participation with purpose</strong><span>Every resource ends with a realistic way to act.</span></div>
            </div>

            <a class="btn btn--outline" href="#newsletter">Read our editorial standards</a>
          </div>
        </div>

        <div class="testimonials">
          <div class="testimonials__heading">
            <div>
              <span class="eyebrow">Voices from the field</span>
              <h2>Trusted by people doing the work.</h2>
            </div>
            <a class="text-link" href="#newsletter">Partner with Civic Ledger <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </div>

          <div class="testimonial-grid">
            <article class="testimonial-card">
              <div class="testimonial-card__quote">Civic Ledger gave our coalition the legislative history we needed to move past a slogan and into a serious, fundable proposal.</div>
              <div class="testimonial-card__person">
                <img src="https://i.pravatar.cc/100?u=maya-organizer" alt="Portrait of Maya Ortiz" width="48" height="48" loading="lazy">
                <div><strong>Maya Ortiz</strong><span>Community Organizer, East Ward Alliance</span></div>
              </div>
            </article>

            <article class="testimonial-card">
              <div class="testimonial-card__quote">The source links and clear procedural timeline have become a required first stop for our reporters covering local government.</div>
              <div class="testimonial-card__person">
                <img src="https://i.pravatar.cc/100?u=james-analyst" alt="Portrait of James Bell" width="48" height="48" loading="lazy">
                <div><strong>James Bell</strong><span>Public Affairs Editor, Northline News</span></div>
              </div>
            </article>

            <article class="testimonial-card">
              <div class="testimonial-card__quote">The rights guides help us answer the urgent question first, then connect residents to appropriate legal help without overpromising.</div>
              <div class="testimonial-card__person">
                <img src="https://i.pravatar.cc/100?u=elena-advocate" alt="Portrait of Elena Park" width="48" height="48" loading="lazy">
                <div><strong>Elena Park</strong><span>Supervising Attorney, Justice Resource Project</span></div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="faq">
      <div class="container faq-grid">
        <div class="faq-intro">
          <span class="eyebrow">Questions &amp; standards</span>
          <h2>Trust begins with transparency.</h2>
          <p>Learn how we select topics, review legal content, handle corrections, and protect the information you share with us.</p>
          <a class="text-link" href="#newsletter">Read our full policies <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>

        <div class="faq-list">
          <details class="faq-item" open>
            <summary>Is Civic Ledger partisan?</summary>
            <div class="faq-item__answer">No. Civic Ledger is a nonpartisan public-interest organization. We analyze the legal process, evidence, tradeoffs, and likely impact without endorsing candidates or partisan platforms. Our funding sources and editorial safeguards are disclosed publicly.</div>
          </details>
          <details class="faq-item">
            <summary>How do you verify policy and legal information?</summary>
            <div class="faq-item__answer">Our editors prioritize primary sources, including bill text, court opinions, agency rules, official voting records, fiscal notes, and hearing transcripts. Legal reviews are performed by qualified attorneys, and each briefing records its publication date and update history. Material corrections are noted directly on the article.</div>
          </details>
          <details class="faq-item">
            <summary>Does Civic Ledger provide legal advice?</summary>
            <div class="faq-item__answer">No. Our materials are for general education and civic participation. They are not a substitute for advice from a licensed attorney, and individual outcomes may depend on facts and jurisdiction. Our rights guides often include referral pathways to legal aid organizations and court self-help centers.</div>
          </details>
          <details class="faq-item">
            <summary>Can my organization request a briefing or training?</summary>
            <div class="faq-item__answer">Yes. We work with community organizations, public agencies, educators, and responsible newsrooms on workshops, public-record training, and nonpartisan policy briefings. Contact our civic partnerships team to discuss scope, scheduling, and any funding requirements.</div>
          </details>
          <details class="faq-item">
            <summary>What happens to information I submit?</summary>
            <div class="faq-item__answer">We collect only the information needed to provide the requested resource or deliver a newsletter you have chosen to receive. We do not sell personal information. You can unsubscribe from any email and request deletion of submitted information at any time.</div>
          </details>
        </div>
      </div>
    </section>

    <section class="newsletter" id="newsletter">
      <div class="container newsletter__grid">
        <div>
          <span class="eyebrow eyebrow--light">The Friday Ledger</span>
          <h2>One week in public policy. Made useful.</h2>
          <p>Receive our best analysis, five records worth your attention, and one practical way to participate—written by humans, delivered every Friday.</p>
        </div>

        <form class="newsletter__form" id="newsletterForm">
          <div class="newsletter__form-row">
            <label class="sr-only" for="newsletterEmail" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Email address</label>
            <input id="newsletterEmail" type="email" autocomplete="email" placeholder="Your email address" required>
            <button class="btn btn--light" type="submit">Join the brief</button>
          </div>
          <small>Free to join. No fundraising spam. Unsubscribe whenever you like. By subscribing, you agree to our privacy policy.</small>
          <div class="form-success" id="newsletterSuccess" role="status">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>
            You’re on the list. Look for the next Friday Ledger in your inbox.
          </div>
        </form>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="footer__grid">
        <div class="footer-brand">
          <a class="brand" href="#top" aria-label="Civic Ledger home">
            <img class="brand__mark" src="https://placehold.co/96x96/f7f1e3/173f3a?text=CL&amp;font=lora" alt="Civic Ledger monogram" width="48" height="48" loading="lazy">
            <span>
              <span class="brand__name">Civic Ledger</span>
              <span class="brand__tagline">Clarity in law. Confidence in civic action.</span>
            </span>
          </a>
          <p>Independent legal information, public-policy analysis, and practical tools for informed civic participation.</p>
          <div class="social-links" aria-label="Social media">
            <a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="Civic Ledger on LinkedIn">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.5 8.3H3V21h3.5V8.3ZM4.8 3A2.1 2.1 0 1 0 4.8 7a2.1 2.1 0 0 0 0-4ZM21 13.7c0-3.8-2-5.6-4.7-5.6-2.1 0-3.1 1.2-3.6 2V8.3H9.2V21h3.5v-6.3c0-1.7.3-3.3 2.4-3.3 2 0 2.1 1.9 2.1 3.4V21h3.5l.3-7.3Z"/></svg>
            </a>
            <a href="https://x.com/" target="_blank" rel="noopener noreferrer" aria-label="Civic Ledger on X">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.9 2H22l-6.8 7.8L23.2 22h-6.4l-5-6.5L5.9 22H2.8l7.3-8.3L1.5 2H8l4.5 5.9L18.9 2Zm-1.1 18h1.7L6.8 3.8H5L17.8 20Z"/></svg>
            </a>
            <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Civic Ledger on Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/></svg>
            </a>
          </div>
        </div>

        <div class="footer-column">
          <h3>Explore</h3>
          <ul>
            <li><a href="#briefings">Policy Briefings</a></li>
            <li><a href="#resources">Resource Library</a></li>
            <li><a href="#representatives">Find Representatives</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#about">About Us</a></li>
          </ul>
        </div>

        <div class="footer-column">
          <h3>Information</h3>
          <ul>
            <li><a href="#faq">Editorial Standards</a></li>
            <li><a href="#get-involved">Legal Disclaimer</a></li>
            <li><a href="#newsletter">Corrections</a></li>
            <li><a href="#newsletter">Partner With Us</a></li>
            <li><a href="#newsletter">Fundraising Disclosure</a></li>
          </ul>
        </div>

        <div class="footer-column">
          <h3>Contact</h3>
          <address class="footer-contact">
            1420 Meridian Avenue, Suite 300<br>
            Washington, DC 20005
          </address>
          <address class="footer-contact">
            <a href="mailto:hello@civicledger.org">hello@civicledger.org</a>
            <a href="tel:+12025550147">+1 (202) 555-0147</a>
          </address>
          <p style="font-size:.72rem;line-height:1.6;">Office hours: Monday–Friday, 9:00 AM–5:30 PM ET</p>
        </div>
      </div>

      <div class="footer__bottom">
        <p style="margin:0;">© <span id="year">2025</span> Civic Ledger. All rights reserved.</p>
        <div class="footer__legal">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Accessibility</a>
          <a href="#">Ethics &amp; Independence</a>
        </div>
      </div>
      <p class="footer__disclaimer">Civic Ledger provides general educational information about law, government, and public affairs. It does not provide legal advice or create an attorney-client relationship. Laws and procedures vary by jurisdiction. Verify time-sensitive information with the relevant government office or qualified counsel.</p>
    </div>
  </footer>

  <dialog id="petitionDialog" aria-labelledby="petitionTitle">
    <div class="dialog__body">
      <button class="dialog__close" id="closePetition" type="button" aria-label="Close petition form">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
      </button>
      <div class="dialog__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 3h12v18H6z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg></div>
      <h2 id="petitionTitle">Sign the housing statement.</h2>
      <p>Your name will be added to a public comment asking the housing committee to require clearer affordability reporting. The statement is due by May 9.</p>
      <form id="petitionForm">
        <div class="form-field">
          <label for="petitionName">Full name</label>
          <input id="petitionName" name="name" type="text" autocomplete="name" required>
        </div>
        <div class="form-field">
          <label for="petitionEmail">Email address</label>
          <input id="petitionEmail" name="email" type="email" autocomplete="email" required>
        </div>
        <label class="dialog__check">
          <input type="checkbox" required>
          <span>I understand that my name and statement will be provided to the relevant public body as part of the public record.</span>
        </label>
        <button class="btn btn--primary" type="submit" style="width:100%;margin-top:22px;">Add my name</button>
      </form>
    </div>
  </dialog>

  <div class="toast" id="toast" role="status" aria-live="polite">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>
    <span id="toastMessage">Your signature has been added.</span>
  </div>

  <script>
    const header = document.getElementById('siteHeader');
    const navToggle = document.getElementById('navToggle');
    const siteNav = document.getElementById('siteNav');
    const navLinks = Array.from(siteNav.querySelectorAll('a'));
    const body = document.body;

    function updateHeader() {
      header.classList.toggle('is-scrolled', window.scrollY > 12);
    }

    updateHeader();
    window.addEventListener('scroll', updateHeader, { passive: true });

    function closeNavigation() {
      siteNav.classList.remove('is-open');
      body.classList.remove('nav-open');
      navToggle.setAttribute('aria-expanded', 'false');
      navToggle.setAttribute('aria-label', 'Open navigation');
    }

    navToggle.addEventListener('click', () => {
      const isOpen = siteNav.classList.toggle('is-open');
      body.classList.toggle('nav-open', isOpen);
      navToggle.setAttribute('aria-expanded', String(isOpen));
      navToggle.setAttribute('aria-label', isOpen ? 'Close navigation' : 'Open navigation');
    });

    navLinks.forEach((link) => link.addEventListener('click', closeNavigation));
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && siteNav.classList.contains('is-open')) {
        closeNavigation();
        navToggle.focus();
      }
    });

    const observedSections = Array.from(document.querySelectorAll('main section[id]'));
    if ('IntersectionObserver' in window) {
      const sectionObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          navLinks.forEach((link) => {
            const isCurrent = link.getAttribute('href') === '#' + entry.target.id;
            link.classList.toggle('is-active', isCurrent);
            if (isCurrent) link.setAttribute('aria-current', 'page');
            else link.removeAttribute('aria-current');
          });
        });
      }, { rootMargin: '-30% 0px -60% 0px' });

      observedSections.forEach((section) => sectionObserver.observe(section));
    }

    const finderForm = document.getElementById('repFinder');
    const finderResult = document.getElementById('finderResult');

    const issueGuidance = {
      voting: {
        title: 'Voting and elections',
        lead: 'Verify your registration record, find your polling place, and learn which ballot measures and offices appear on your ballot.',
        steps: [
          'Check your registration and polling information through your state election office.',
          'Review ballot measure summaries and official arguments before voting.',
          'Ask your local election office about accessibility, language access, and mail voting.'
        ],
        linkText: 'Visit Vote.gov',
        linkUrl: 'https://vote.gov/'
      },
      housing: {
        title: 'Housing policy',
        lead: 'Follow the measure, understand the fiscal and legal record, and identify where public testimony can still influence the decision.',
        steps: [
          'Read the current draft and compare it with the legislative fiscal note.',
          'Check the committee and legislative calendar for public hearings.',
          'Contact the housing committee chair and your representative with a focused request.'
        ],
        linkText: 'Review HUD housing resources',
        linkUrl: 'https://www.hud.gov/'
      },
      education: {
        title: 'Education policy',
        lead: 'Trace the funding or governance change, identify who is affected, and submit comments during the record-open period.',
        steps: [
          'Locate the official bill text and committee report for the measure.',
          'Calculate the local impact using your district’s published enrollment data.',
          'Request a meeting with the education committee and relevant local officials.'
        ],
        linkText: 'Open U.S. Department of Education',
        linkUrl: 'https://www.ed.gov/'
      },
      environment: {
        title: 'Environmental rule',
        lead: 'Understand the agency’s proposed rule, its scientific record, and the separate legal requirements for public comments and litigation.',
        steps: [
          'Read the proposed rule and supporting documents in the public docket.',
          'Submit a specific comment describing the evidence, impact, or proposed change.',
          'Track the final rule and any administrative appeal or court filing.'
        ],
        linkText: 'Find environmental dockets',
        linkUrl: 'https://www.regulations.gov/'
      },
      privacy: {
        title: 'Privacy and civil liberties',
        lead: 'Review how a proposal may affect speech, data collection, due process, and equal protection before contacting decision-makers.',
        steps: [
          'Read the proposed text with the affected rights and data flows in mind.',
          'Document concrete harms and include relevant constitutional or statutory arguments.',
          'Consult qualified legal counsel if enforcement, litigation, or individual remedies may be needed.'
        ],
        linkText: 'Explore the public legislative record',
        linkUrl: 'https://www.congress.gov/'
      },
      general: {
        title: 'A local public issue',
        lead: 'Identify the agency or legislative body with authority, locate the official record, and make a specific, respectful request.',
        steps: [
          'Request the agenda, relevant reports, and the public-comment submission process.',
          'Prepare a concise statement that identifies the decision and your position.',
          'Follow up after the decision and ask how the outcome will be implemented.'
        ],
        linkText: 'Find government resources',
        linkUrl: 'https://www.usa.gov/'
      }
    };

    finderForm.addEventListener('submit', (event) => {
      event.preventDefault();

      if (!finderForm.reportValidity()) return;

      const formData = new FormData(finderForm);
      const state = formData.get('state');
      const zip = String(formData.get('zip'));
      const issue = formData.get('issue');
      const guidance = issueGuidance[issue] || issueGuidance.general;
      const maskedZip = `ending in ${zip.slice(-3)}`;

      finderResult.innerHTML = `
        <div class="result-header">
          <div>
            <span class="eyebrow">Your civic action plan</span>
            <h3>${state}</h3>
            <p>Prepared for ZIP ${maskedZip}. We will connect you with verified government directories for your federal, state, and local representatives.</p>
          </div>
          <span class="result-badge">Ready</span>
        </div>

        <div class="official-grid">
          <article class="official-card">
            <span class="official-card__label">Federal</span>
            <h4>Your U.S. representative</h4>
            <p>Use the official House directory to see your named representative, district, office, and contact details.</p>
            <a href="https://house.gov/representatives/find-your-representative" target="_blank" rel="noopener noreferrer">Open House directory <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>
          <article class="official-card">
            <span class="official-card__label">Federal</span>
            <h4>Your U.S. senators</h4>
            <p>Find both senators for ${state}, along with committee assignments and official office information.</p>
            <a href="https://www.senate.gov/senators/contact.htm" target="_blank" rel="noopener noreferrer">Open Senate directory <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>
          <article class="official-card">
            <span class="official-card__label">State</span>
            <h4>State legislators</h4>
            <p>Find members of the state house and senate, then review bills, votes, and committee schedules.</p>
            <a href="https://www.nga.org/governments/state-legislatures/" target="_blank" rel="noopener noreferrer">Open state legislature directory <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>
          <article class="official-card">
            <span class="official-card__label">Local</span>
            <h4>County and city officials</h4>
            <p>Locate your local council, county executive, clerk, and election administration office.</p>
            <a href="https://www.usa.gov/local-government" target="_blank" rel="noopener noreferrer">Find local government <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </article>
        </div>

        <div class="action-plan">
          <h4>${guidance.title}: three useful next steps</h4>
          <ol>
            ${guidance.steps.map((step) => `<li>${step}</li>`).join('')}
          </ol>
        </div>

        <p class="result-disclaimer">Civic Ledger does not maintain candidacy records. For verified names, districts, campaign disclosures, and voting histories, use official government and election-office records. <a href="${guidance.linkUrl}" target="_blank" rel="noopener noreferrer" style="color:var(--clay);font-weight:700;">${guidance.linkText}</a>.</p>
      `;
    });

    const petitionDialog = document.getElementById('petitionDialog');
    const openPetition = document.getElementById('openPetition');
    const openPetitionBottom = document.getElementById('openPetitionBottom');
    const closePetition = document.getElementById('closePetition');
    const petitionForm = document.getElementById('petitionForm');
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toastMessage');
    let toastTimer;

    function showToast(message) {
      toastMessage.textContent = message;
      toast.classList.add('is-visible');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => toast.classList.remove('is-visible'), 4200);
    }

    function openPetitionDialog() {
      if (typeof petitionDialog.showModal === 'function') {
        petitionDialog.showModal();
      } else {
        petitionDialog.setAttribute('open', '');
      }
    }

    openPetition.addEventListener('click', openPetitionDialog);
    openPetitionBottom.addEventListener('click', openPetitionDialog);
    closePetition.addEventListener('click', () => petitionDialog.close());
    petitionDialog.addEventListener('click', (event) => {
      const rect = petitionDialog.getBoundingClientRect();
      const clickedOutside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
      if (clickedOutside) petitionDialog.close();
    });

    petitionForm.addEventListener('submit', (event) => {
      event.preventDefault();
      if (!petitionForm.reportValidity()) return;
      const name = document.getElementById('petitionName').value.trim();
      petitionForm.reset();
      petitionDialog.close();
      showToast(`${name.split(' ')[0]}, your signature has been added to the statement.`);
    });

    const newsletterForm = document.getElementById('newsletterForm');
    const newsletterSuccess = document.getElementById('newsletterSuccess');
    newsletterForm.addEventListener('submit', (event) => {
      event.preventDefault();
      if (!newsletterForm.reportValidity()) return;
      newsletterForm.querySelector('button').style.display = 'none';
      newsletterForm.querySelector('input').style.display = 'none';
      newsletterForm.querySelector('small').style.display = 'none';
      newsletterSuccess.classList.add('is-visible');
    });

    document.getElementById('year').textContent = new Date().getFullYear();
  </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:45.997Z",
  "url": "https://benchmark.aimac.invalid/66b947eebdb142a47587c38310b4c6e9b093d959e1a4137c8ed6ca190be75449.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": "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": "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=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ]
        }
      ]
    },
    {
      "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=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"></path></svg>\n    <span id=\"toastMessage\">Your signature has been added.</span>\n  </div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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 id=\"top\">",
          "target": [
            "#top"
          ]
        }
      ]
    },
    {
      "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 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>",
          "target": [
            ".announcement__link > svg[stroke-width=\"2\"][fill=\"none\"][stroke=\"currentColor\"]"
          ]
        }
      ]
    },
    {
      "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=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"></path></svg>\n    <span id=\"toastMessage\">Your signature has been added.</span>\n  </div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"></path></svg>\n    <span id=\"toastMessage\">Your signature has been added.</span>\n  </div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ]
        }
      ]
    },
    {
      "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=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ]
        }
      ]
    },
    {
      "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=\"zipCode\" name=\"zip\" type=\"text\" inputmode=\"numeric\" autocomplete=\"postal-code\" maxlength=\"5\" pattern=\"[0-9]{5}\" placeholder=\"e.g. 20005\" required=\"\">",
          "target": [
            "#zipCode"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn--primary\" type=\"submit\" style=\"width: 100%;\">\n              Build my action plan\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </button>",
          "target": [
            "#repFinder > .btn--primary[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "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=\"btn btn--primary\" type=\"submit\" style=\"width: 100%;\">\n              Build my action plan\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </button>",
          "target": [
            "#repFinder > .btn--primary[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "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>Make sense of the laws that shape <em>your life.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3>Housing ballot measure tracker</h3>",
                  "target": [
                    ".hero__docket > h3"
                  ]
                },
                {
                  "html": "<h2>Public information for public decisions.</h2>",
                  "target": [
                    "#topics > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Policy &amp; ballot measures</h3>",
                  "target": [
                    ".topic-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Grassroots organizing</h3>",
                  "target": [
                    ".topic-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Civil liberties</h3>",
                  "target": [
                    ".topic-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Read past the headline.</h2>",
                  "target": [
                    "#briefings > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Can a housing ballot measure actually change what gets built?</h3>",
                  "target": [
                    ".briefing-feature__body > h3"
                  ]
                },
                {
                  "html": "<h3>Trace every claim to the public record.</h3>",
                  "target": [
                    ".process-strip__intro > h3"
                  ]
                },
                {
                  "html": "<h2>Facts first. Action next.</h2>",
                  "target": [
                    ".resources__copy > h2"
                  ]
                },
                {
                  "html": "<h3>The five-minute civic primer</h3>",
                  "target": [
                    ".resource-card > h3"
                  ]
                },
                {
                  "html": "<h2>Find your public officials.</h2>",
                  "target": [
                    "#representatives > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Start with your location</h3>",
                  "target": [
                    "#repFinder > h3"
                  ]
                },
                {
                  "html": "<h3>Your civic action plan will appear here.</h3>",
                  "target": [
                    ".finder__placeholder > h3"
                  ]
                },
                {
                  "html": "<h2>Participation works in three steps.</h2>",
                  "target": [
                    "#get-involved > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Learn Rights</h3>",
                  "target": [
                    ".action-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Sign Petition</h3>",
                  "target": [
                    ".action-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Contact Representative</h3>",
                  "target": [
                    ".action-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Support the Affordable Housing Accountability Act</h3>",
                  "target": [
                    ".petition-card > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2>Show up informed.</h2>",
                  "target": [
                    "#events > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Where does the housing measure stand?</h3>",
                  "target": [
                    ".event-card:nth-child(1) > .event-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Turn public records into a stronger case</h3>",
                  "target": [
                    ".event-card:nth-child(2) > .event-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Your rights at a public hearing</h3>",
                  "target": [
                    ".event-card:nth-child(3) > .event-card__body > h3"
                  ]
                },
                {
                  "html": "<h2>Democracy works better when people can understand it.</h2>",
                  "target": [
                    ".about__copy > h2"
                  ]
                },
                {
                  "html": "<h2>Trusted by people doing the work.</h2>",
                  "target": [
                    ".testimonials__heading > div > h2"
                  ]
                },
                {
                  "html": "<h2>Trust begins with transparency.</h2>",
                  "target": [
                    ".faq-intro > h2"
                  ]
                },
                {
                  "html": "<h2>One week in public policy. Made useful.</h2>",
                  "target": [
                    ".newsletter__grid > div > h2"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-column:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Information</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\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "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": "#c5cccb",
                "bgColor": "#0e2926",
                "contrastRatio": 9.43,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 9.43"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"announcement__message\"><span class=\"announcement__dot\"></span>Independent, nonpartisan, and public-interest focused</p>",
          "target": [
            ".announcement__message"
          ]
        }
      ]
    },
    {
      "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\">",
          "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": "siteNav",
              "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=\"site-nav\" id=\"siteNav\" aria-label=\"Primary navigation\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "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=\"zipCode\">Home ZIP code</label>",
                  "target": [
                    "label[for=\"zipCode\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"zipCode\" name=\"zip\" type=\"text\" inputmode=\"numeric\" autocomplete=\"postal-code\" maxlength=\"5\" pattern=\"[0-9]{5}\" placeholder=\"e.g. 20005\" required=\"\">",
          "target": [
            "#zipCode"
          ]
        }
      ]
    },
    {
      "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\">",
          "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\">",
          "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 class=\"brand__mark\" src=\"https://placehold.co/96x96/173f3a/f7f1e3?text=CL&amp;font=lora\" alt=\"Civic Ledger monogram\" width=\"48\" height=\"48\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"] > .brand__mark[alt=\"Civic Ledger monogram\"][width=\"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": {
                "explicitLabel": "Home ZIP code"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"zipCode\">Home ZIP code</label>",
                  "target": [
                    "label[for=\"zipCode\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"zipCode\" name=\"zip\" type=\"text\" inputmode=\"numeric\" autocomplete=\"postal-code\" maxlength=\"5\" pattern=\"[0-9]{5}\" placeholder=\"e.g. 20005\" required=\"\">",
          "target": [
            "#zipCode"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "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=\"hero__docket\">",
                  "target": [
                    ".hero__docket"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#briefings\">Read the 5-minute brief \u2192</a>",
          "target": [
            ".hero__docket > a[href$=\"#briefings\"]"
          ]
        }
      ]
    },
    {
      "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\">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>",
          "target": [
            ".footer-column:nth-child(2) > ul"
          ]
        }
      ]
    },
    {
      "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><a href=\"#briefings\">Policy Briefings</a></li>",
          "target": [
            ".footer-column:nth-child(2) > ul > 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 class=\"brand__mark\" src=\"https://placehold.co/96x96/173f3a/f7f1e3?text=CL&amp;font=lora\" alt=\"Civic Ledger monogram\" width=\"48\" height=\"48\">",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"] > .brand__mark[alt=\"Civic Ledger monogram\"][width=\"48\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "State"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"stateSelect\">State</label>",
                  "target": [
                    "label[for=\"stateSelect\"]"
                  ]
                }
              ],
              "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": "<select id=\"stateSelect\" name=\"state\" required=\"\">",
          "target": [
            "#stateSelect"
          ]
        }
      ]
    },
    {
      "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 Civic Ledger partisan?</summary>",
          "target": [
            "details[open=\"\"] > 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": 201.9,
                "height": 51.2
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (201.9px by 51.2px, 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\">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=\"process-strip\" aria-label=\"The policy analysis process\">",
          "target": [
            ".process-strip"
          ],
          "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.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Public-interest law &amp; civic intelligence</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"
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "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",
              "data": {
                "messageKey": "bgOverlap"
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"footer-brand\">",
                  "target": [
                    ".footer-brand"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's contrast ratio could not be determined because of element overlap"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Civic Ledger home\">",
          "target": [
            ".footer-brand > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's contrast ratio could not be determined because of element overlap"
        }
      ]
    }
  ],
  "violations": [
    {
      "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 cannot be used on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"progress-bar\" aria-label=\"78 percent of signature goal reached\"><span></span></div>",
          "target": [
            ".progress-bar"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute cannot be used 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": "#fffdf8",
                "bgColor": "#c95036",
                "contrastRatio": 4.41,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a class=\"btn btn--primary\" href=\"#briefings\">\n              Explore the latest brief\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </a>",
                  "target": [
                    ".btn--primary.btn[href$=\"#briefings\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"btn btn--primary\" href=\"#briefings\">\n              Explore the latest brief\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </a>",
          "target": [
            ".btn--primary.btn[href$=\"#briefings\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--white\" id=\"topics\">",
                  "target": [
                    "#topics"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Where we focus</span>",
          "target": [
            "#topics > .container > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>01 / Policy</span>",
          "target": [
            ".topic-card:nth-child(1) > .topic-card__number > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#briefings\">Explore policy analysis <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".topic-card:nth-child(1) > .text-link[href$=\"#briefings\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>02 / Organize</span>",
          "target": [
            ".topic-card:nth-child(2) > .topic-card__number > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#resources\">Open the toolkit <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".text-link[href$=\"#resources\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>03 / Rights</span>",
          "target": [
            ".topic-card:nth-child(3) > .topic-card__number > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"topic-card\">",
                  "target": [
                    ".topic-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#get-involved\">Learn your rights <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".text-link[href$=\"#get-involved\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#f6f1e8",
                "contrastRatio": 3.98,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Featured analysis</span>",
          "target": [
            "#briefings > .container > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"briefing-feature\">",
                  "target": [
                    ".briefing-feature"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Deep dive / Housing</span>",
          "target": [
            ".briefing-feature__body > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#eec7bf",
                "bgColor": "#c95036",
                "contrastRatio": 2.89,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"process-strip__intro\">\n            <span>Our editorial method</span>\n            <h3>Trace every claim to the public record.</h3>\n          </div>",
                  "target": [
                    ".process-strip__intro"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.89 (foreground color: #eec7bf, background color: #c95036, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Our editorial method</span>",
          "target": [
            ".process-strip__intro > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.89 (foreground color: #eec7bf, background color: #c95036, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"resource-card\">",
                  "target": [
                    ".resource-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-card__number\">Start here / 01</span>",
          "target": [
            ".resource-card__number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"resource-card\">",
                  "target": [
                    ".resource-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#briefings\">Read the primer <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".resource-card > .text-link[href$=\"#briefings\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#edf1eb",
                "contrastRatio": 3.92,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--soft\" id=\"representatives\">",
                  "target": [
                    "#representatives"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #c95036, background color: #edf1eb, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Interactive civic finder</span>",
          "target": [
            "#representatives > .container > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #c95036, background color: #edf1eb, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64716d",
                "bgColor": "#edf1eb",
                "contrastRatio": 4.45,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--soft\" id=\"representatives\">",
                  "target": [
                    "#representatives"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.45 (foreground color: #64716d, background color: #edf1eb, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Enter your ZIP code and choose a state to build a focused action plan. We route you to verified federal directories, explain what to ask for, and connect you with official voting and election resources.</p>",
          "target": [
            "#representatives > .container > .section-heading > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.45 (foreground color: #64716d, background color: #edf1eb, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fffdf8",
                "bgColor": "#c95036",
                "contrastRatio": 4.41,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn--primary\" type=\"submit\" style=\"width: 100%;\">\n              Build my action plan\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </button>",
                  "target": [
                    "#repFinder > .btn--primary[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn--primary\" type=\"submit\" style=\"width: 100%;\">\n              Build my action plan\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg>\n            </button>",
          "target": [
            "#repFinder > .btn--primary[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--white\" id=\"get-involved\">",
                  "target": [
                    "#get-involved"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">From information to impact</span>",
          "target": [
            "#get-involved > .container > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"action-card__number\">01 / KNOW</span>",
          "target": [
            ".action-card:nth-child(1) > .action-card__top > .action-card__number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#faq\">Explore your rights <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".text-link[href$=\"#faq\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"action-card__number\">02 / SUPPORT</span>",
          "target": [
            ".action-card:nth-child(2) > .action-card__top > .action-card__number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"text-link\" type=\"button\" id=\"openPetition\" style=\"align-self: flex-start; border: 0; background: none; padding: 0;\">",
          "target": [
            "#openPetition"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"action-card__number\">03 / CONTACT</span>",
          "target": [
            ".action-card:nth-child(3) > .action-card__top > .action-card__number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"action-card\">",
                  "target": [
                    ".action-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#representatives\">Find your representative <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".text-link[href$=\"#representatives\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#f6f1e8",
                "contrastRatio": 3.98,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Public events</span>",
          "target": [
            "#events > .container > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-card__date\"><strong>18</strong><span>APR</span></div>",
                  "target": [
                    ".event-card:nth-child(1) > .event-card__image > .event-card__date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>APR</span>",
          "target": [
            ".event-card:nth-child(1) > .event-card__image > .event-card__date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.0pt (10.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-card__type\">Public hearing</span>",
          "target": [
            ".event-card:nth-child(1) > .event-card__body > .event-card__type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#newsletter\">Reserve your seat <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".event-card:nth-child(1) > .event-card__body > .text-link[href$=\"#newsletter\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-card__date\"><strong>24</strong><span>APR</span></div>",
                  "target": [
                    ".event-card:nth-child(2) > .event-card__image > .event-card__date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>APR</span>",
          "target": [
            ".event-card:nth-child(2) > .event-card__image > .event-card__date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.0pt (10.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-card__type\">Skills lab</span>",
          "target": [
            ".event-card:nth-child(2) > .event-card__body > .event-card__type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#newsletter\">Register free <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".event-card:nth-child(2) > .event-card__body > .text-link[href$=\"#newsletter\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-card__date\"><strong>02</strong><span>MAY</span></div>",
                  "target": [
                    ".event-card:nth-child(3) > .event-card__image > .event-card__date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>MAY</span>",
          "target": [
            ".event-card:nth-child(3) > .event-card__image > .event-card__date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "8.0pt (10.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-card__type\">Community workshop</span>",
          "target": [
            ".event-card:nth-child(3) > .event-card__body > .event-card__type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"event-card\">",
                  "target": [
                    ".event-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#newsletter\">Save your place <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".event-card:nth-child(3) > .event-card__body > .text-link[href$=\"#newsletter\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fffdf8",
                "bgColor": "#c95036",
                "contrastRatio": 4.41,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"about__badge\"><strong>2012</strong><span>Independent, community-rooted, and editorially accountable since our founding.</span></div>",
                  "target": [
                    ".about__badge"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Independent, community-rooted, and editorially accountable since our founding.</span>",
          "target": [
            ".about__badge > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #fffdf8, background color: #c95036, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--white\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">About Civic Ledger</span>",
          "target": [
            ".about__copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--white\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Voices from the field</span>",
          "target": [
            ".testimonials__heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#fffdf8",
                "contrastRatio": 4.41,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section--white\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#newsletter\">Partner with Civic Ledger <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".testimonials__heading > .text-link[href$=\"#newsletter\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #c95036, background color: #fffdf8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#f6f1e8",
                "contrastRatio": 3.98,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Questions &amp; standards</span>",
          "target": [
            ".faq-intro > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c95036",
                "bgColor": "#f6f1e8",
                "contrastRatio": 3.98,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#newsletter\">Read our full policies <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
          "target": [
            ".faq-intro > .text-link[href$=\"#newsletter\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.98 (foreground color: #c95036, background color: #f6f1e8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d6a545",
                "bgColor": "#c95036",
                "contrastRatio": 1.99,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.99 (foreground color: #d6a545, background color: #c95036, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow eyebrow--light\">The Friday Ledger</span>",
          "target": [
            ".newsletter__grid > div > .eyebrow--light.eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.99 (foreground color: #d6a545, background color: #c95036, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f4dcd7",
                "bgColor": "#c95036",
                "contrastRatio": 3.42,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.42 (foreground color: #f4dcd7, background color: #c95036, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Receive our best analysis, five records worth your attention, and one practical way to participate\u2014written by humans, delivered every Friday.</p>",
          "target": [
            ".newsletter__grid > div > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #f4dcd7, background color: #c95036, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#eecac1",
                "bgColor": "#ce624a",
                "contrastRatio": 2.53,
                "fontSize": "8.0pt (10.72px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<form class=\"newsletter__form\" id=\"newsletterForm\">",
                  "target": [
                    "#newsletterForm"
                  ]
                },
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.53 (foreground color: #eecac1, background color: #ce624a, font size: 8.0pt (10.72px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Free to join. No fundraising spam. Unsubscribe whenever you like. By subscribing, you agree to our privacy policy.</small>",
          "target": [
            "small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.53 (foreground color: #eecac1, background color: #ce624a, font size: 8.0pt (10.72px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6a7a78",
                "bgColor": "#0e2926",
                "contrastRatio": 3.42,
                "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.42 (foreground color: #6a7a78, background color: #0e2926, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"footer__disclaimer\">",
          "target": [
            ".footer__disclaimer"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #6a7a78, background color: #0e2926, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64716d",
                "bgColor": "#ede9e0",
                "contrastRatio": 4.2,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header is-scrolled\" id=\"siteHeader\">",
                  "target": [
                    "#siteHeader"
                  ]
                },
                {
                  "html": "<section class=\"section resources\" id=\"resources\">",
                  "target": [
                    "#resources"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.2 (foreground color: #64716d, background color: #ede9e0, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand__tagline\">Clarity in law. Confidence in civic action.</span>",
          "target": [
            ".nav-wrap > .brand[href$=\"#top\"][aria-label=\"Civic Ledger home\"] > span > .brand__tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.2 (foreground color: #64716d, background color: #ede9e0, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "target-size",
      "impact": "serious",
      "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": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 749.3,
                "height": 9.7
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#briefings\" class=\"\">Briefings</a>",
                  "target": [
                    "#siteNav > a[href$=\"#briefings\"]"
                  ]
                },
                {
                  "html": "<a href=\"#resources\" class=\"\">Resources</a>",
                  "target": [
                    "#siteNav > a[href$=\"#resources\"]"
                  ]
                },
                {
                  "html": "<a href=\"#representatives\" class=\"\">Representatives</a>",
                  "target": [
                    "#siteNav > a[href$=\"#representatives\"]"
                  ]
                },
                {
                  "html": "<a href=\"#events\" class=\"\">Events</a>",
                  "target": [
                    "#siteNav > a[href$=\"#events\"]"
                  ]
                },
                {
                  "html": "<a href=\"#about\" class=\"\">About</a>",
                  "target": [
                    "#siteNav > a[href$=\"#about\"]"
                  ]
                },
                {
                  "html": "<a href=\"#get-involved\" class=\"\">Get Involved</a>",
                  "target": [
                    "#siteNav > a[href$=\"#get-involved\"]"
                  ]
                },
                {
                  "html": "<a class=\"btn btn--dark btn--small header-cta\" href=\"#newsletter\">Stay Informed</a>",
                  "target": [
                    ".btn--small"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 749.3px by 9.7px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 9.4,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<summary>What happens to information I submit?</summary>",
                  "target": [
                    "details:nth-child(5) > summary"
                  ]
                },
                {
                  "html": "<a href=\"#events\" class=\"\">Events</a>",
                  "target": [
                    "#siteNav > a[href$=\"#events\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 9.4px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<summary>Can my organization request a briefing or training?</summary>",
          "target": [
            "details:nth-child(4) > summary"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 749.3px by 9.7px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 9.4px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10890
      },
      {
        "y": 576,
        "height": 10890
      },
      {
        "y": 1152,
        "height": 10890
      },
      {
        "y": 1728,
        "height": 10890
      },
      {
        "y": 2304,
        "height": 10890
      },
      {
        "y": 2880,
        "height": 10890
      },
      {
        "y": 3456,
        "height": 10890
      },
      {
        "y": 4032,
        "height": 10890
      },
      {
        "y": 4608,
        "height": 10890
      },
      {
        "y": 5184,
        "height": 10890
      },
      {
        "y": 5760,
        "height": 10890
      },
      {
        "y": 6336,
        "height": 10890
      },
      {
        "y": 6912,
        "height": 10890
      },
      {
        "y": 7488,
        "height": 10890
      },
      {
        "y": 8064,
        "height": 10890
      },
      {
        "y": 8640,
        "height": 10890
      },
      {
        "y": 9216,
        "height": 10890
      },
      {
        "y": 9792,
        "height": 10890
      },
      {
        "y": 10170,
        "height": 10890
      }
    ],
    "scans": 20,
    "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 "Law, Government, & Politics" 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: "Law, Government, & Politics"
- Description: Legal information, political organizations, government affairs, and civic engagement resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Law, Government, & Politics" 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: "Resources", "About", "Events".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Law, Government, & Politics" category. Consider themes similar to: "Policy Analysis", "Grassroots Organizing", "Civil Liberties".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "ballot measure", "legislative process", "litigation".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Learn Rights", "Sign Petition", "Contact Representative".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Law, Government, & Politics" sector. Ideas similar but not limited to: "representative finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "policy updates", "trending issues", "research reports".
-   **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.