OpenAI GPT 6.1 Terra Pro – Automotive

via OpenAI · Generated

  • AIMAC Debt 4.37
  • Cost $0.14
  • Total Violations 12
  • HTML Size 38 KB
  • Em Dashes 2

Screenshot

View OpenAI GPT 6.1 Terra Pro Automotive page View Live Page

Accessibility Issues Found

12 Serious

  • color-contrast serious 12 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <div class="vehicle-meta">Refined everyday driving</div>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Northline Motor Co. brings together thoughtfully selected vehicles, straightforward financing, expert service, and useful automotive advice.">
  <title>Northline Motor Co. | Better roads start here.</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --ink: #17211d;
      --dark: #101a16;
      --forest: #233c2e;
      --lime: #d9ed83;
      --cream: #f6f6ef;
      --muted: #68726a;
      --line: #dce1d8;
      --white: #fff;
      --radius: 14px;
      --max: 1320px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { cursor: pointer; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #9cbd38; outline-offset: 3px; }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1, h2, h3, h4 { font-family: "Manrope", sans-serif; line-height: 1.12; letter-spacing: -.045em; }
    .container { width: min(var(--max), calc(100% - 72px)); margin-inline: auto; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 19px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 25px; height: 2px; background: currentColor; }
    .button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 53px; padding: 14px 21px; border: 1px solid transparent; border-radius: 5px; background: var(--lime); color: var(--dark); font-size: 13px; font-weight: 700; line-height: 1.2; transition: background .2s, transform .2s; }
    .button:hover { background: #c7e267; transform: translateY(-2px); }
    .button .arrow { font-size: 19px; line-height: 1; }
    .button-outline { border-color: rgba(255,255,255,.55); background: transparent; color: white; }
    .button-outline:hover { background: white; color: var(--dark); }
    .button-dark { background: var(--dark); color: white; }
    .button-dark:hover { background: var(--forest); }
    .text-link { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
    .text-link span { font-size: 18px; line-height: 1; }
    .section { padding: 110px 0; }
    .section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 43px; }
    .section-heading h2 { max-width: 650px; margin-bottom: 0; font-size: clamp(36px, 4.4vw, 62px); }
    .section-heading p { max-width: 400px; margin: 0; color: var(--muted); }
    .topbar { padding: 9px 0; background: var(--dark); color: #dce6dc; font-size: 11px; letter-spacing: .025em; }
    .topbar .container { display: flex; justify-content: space-between; gap: 15px; }
    .topbar a { color: var(--lime); font-weight: 700; }
    .header { position: relative; z-index: 5; background: #fff; }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 88px; }
    .brand { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }
    .brand img { width: 42px; height: 42px; border-radius: 4px; }
    .brand-name { display: block; font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
    .brand-tagline { display: block; margin-top: 5px; font-size: 9px; color: #6d786e; letter-spacing: .08em; text-transform: uppercase; }
    .nav { display: flex; align-items: center; gap: clamp(15px, 1.8vw, 27px); }
    .nav a { font-size: 12px; font-weight: 700; white-space: nowrap; }
    .nav a:not(.nav-cta):hover { color: #5f7b31; }
    .nav .nav-cta { padding: 12px 16px; border-radius: 4px; background: var(--dark); color: white; }
    .menu-toggle { display: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 4px; background: white; font-weight: 700; }
    .hero { position: relative; display: flex; align-items: center; min-height: 650px; overflow: hidden; color: white; background: #26332b; }
    .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
    .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,15,.94) 0%, rgba(10,20,15,.77) 38%, rgba(10,20,15,.17) 100%), linear-gradient(0deg, rgba(10,20,15,.45), transparent 45%); }
    .hero-content { position: relative; z-index: 1; padding: 95px 0 120px; }
    .hero .eyebrow { color: var(--lime); }
    .hero h1 { max-width: 690px; margin-bottom: 24px; font-size: clamp(52px, 6.5vw, 91px); line-height: .99; }
    .hero h1 em { color: var(--lime); font-style: normal; }
    .hero p { max-width: 505px; margin-bottom: 31px; color: #e2e9e2; font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-note { position: absolute; z-index: 1; right: max(36px, calc((100vw - var(--max)) / 2)); bottom: 34px; color: #fff; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
    .proof { background: var(--lime); }
    .proof-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
    .proof-item { display: flex; align-items: center; gap: 15px; padding: 23px 30px; border-right: 1px solid rgba(23,33,29,.18); }
    .proof-item:first-child { padding-left: 0; }
    .proof-item:last-child { border: 0; }
    .proof-icon { display: grid; place-items: center; width: 39px; height: 39px; flex-shrink: 0; border: 1px solid #8ba34d; border-radius: 50%; font-size: 18px; }
    .proof-item strong { display: block; font-size: 13px; line-height: 1.3; }
    .proof-item small { display: block; color: #4f5d40; font-size: 11px; }
    .inventory { background: #f8f9f3; }
    .inventory-top { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
    .inventory-top h2 { max-width: 590px; margin-bottom: 18px; font-size: clamp(38px, 4.5vw, 62px); }
    .intro-copy { max-width: 600px; color: var(--muted); }
    .inventory-top .text-link { margin-bottom: 21px; white-space: nowrap; }
    .vehicle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 35px; }
    .vehicle-card { overflow: hidden; border: 1px solid #e1e6dd; border-radius: 8px; background: #fff; }
    .vehicle-img { position: relative; height: 245px; overflow: hidden; background: #dce3dd; }
    .vehicle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .vehicle-card:hover .vehicle-img img { transform: scale(1.04); }
    .badge { position: absolute; top: 16px; left: 16px; padding: 6px 10px; border-radius: 3px; background: white; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .vehicle-body { padding: 23px; }
    .vehicle-meta { margin-bottom: 8px; color: #748074; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .vehicle-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
    .vehicle-title-row h3 { margin-bottom: 14px; font-size: 22px; }
    .price { white-space: nowrap; font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 800; }
    .vehicle-specs { display: flex; flex-wrap: wrap; gap: 8px 17px; padding: 15px 0; border-top: 1px solid #ebeee9; border-bottom: 1px solid #ebeee9; color: #657168; font-size: 12px; }
    .card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; font-size: 12px; font-weight: 700; }
    .card-bottom a { color: #304b33; }
    .card-bottom a:hover { text-decoration: underline; }
    .inventory-disclaimer { margin: 18px 0 0; color: #7c857c; font-size: 11px; }
    .about { background: #e9eee5; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px, 8vw, 120px); align-items: center; }
    .about-image { position: relative; min-height: 560px; }
    .about-image > img { width: 100%; height: 560px; object-fit: cover; border-radius: 8px; }
    .image-stamp { position: absolute; right: -22px; bottom: 28px; width: 190px; padding: 23px; border-radius: 6px; background: var(--lime); }
    .image-stamp strong { display: block; font-family: "Manrope", sans-serif; font-size: 32px; line-height: 1; }
    .image-stamp span { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; line-height: 1.4; }
    .about-copy h2, .finance-copy h2, .service-copy h2 { margin-bottom: 23px; font-size: clamp(38px, 4.2vw, 59px); }
    .about-copy p, .finance-copy p, .service-copy p { color: #59665c; }
    .about-list { display: grid; gap: 17px; margin: 29px 0 34px; }
    .about-list div { display: flex; gap: 13px; font-size: 13px; font-weight: 700; }
    .check { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #cfdfb9; font-size: 13px; }
    .finance { background: var(--dark); color: white; }
    .finance-grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
    .finance .eyebrow { color: var(--lime); }
    .finance-copy p { max-width: 540px; color: #b5c2b8; }
    .finance-points { display: flex; flex-wrap: wrap; gap: 15px 28px; margin-top: 28px; color: #d8e1d8; font-size: 13px; font-weight: 700; }
    .finance-points span::before { content: "✓"; margin-right: 9px; color: var(--lime); }
    .calculator { padding: 34px; border-radius: 9px; background: #fff; color: var(--ink); }
    .calculator h3 { margin-bottom: 7px; font-size: 25px; }
    .calculator > p { margin-bottom: 25px; color: var(--muted); font-size: 13px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
    .field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
    .field input, .field select { width: 100%; height: 47px; padding: 0 12px; border: 1px solid #d8dfd6; border-radius: 4px; background: #fafbf8; color: var(--ink); }
    .estimate { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-top: 23px; padding-top: 21px; border-top: 1px solid var(--line); }
    .estimate-label { font-size: 12px; font-weight: 700; }
    .estimate strong { display: block; margin-top: 4px; font-family: "Manrope", sans-serif; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
    .estimate strong small { font-size: 13px; letter-spacing: 0; }
    .calculator .fineprint { margin: 18px 0 0; color: #788279; font-size: 10px; line-height: 1.5; }
    .service { background: #fff; }
    .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
    .service-image { height: 550px; width: 100%; object-fit: cover; border-radius: 8px; }
    .service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
    .service-features h3 { margin-bottom: 8px; font-size: 16px; }
    .service-features p { margin: 0; font-size: 13px; }
    .journal { background: #f1f4ed; }
    .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .story img { width: 100%; height: 240px; object-fit: cover; border-radius: 6px; }
    .story-meta { margin: 21px 0 10px; color: #698052; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .story h3 { margin-bottom: 12px; font-size: 23px; line-height: 1.2; }
    .story p { color: var(--muted); font-size: 14px; }
    .story .text-link { margin-top: 5px; }
    .faq { background: #fff; }
    .faq-grid { display: grid; grid-template-columns: .7fr 1fr; gap: 80px; }
    .faq h2 { font-size: clamp(38px, 4vw, 55px); }
    .faq-intro p { max-width: 360px; color: var(--muted); }
    details { border-bottom: 1px solid var(--line); }
    details:first-child { border-top: 1px solid var(--line); }
    summary { position: relative; padding: 22px 35px 22px 0; list-style: none; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; position: absolute; right: 4px; top: 17px; font-size: 23px; font-weight: 400; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 680px; margin: 0 0 23px; color: var(--muted); font-size: 14px; }
    .contact-band { padding: 76px 0; background: var(--lime); }
    .contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
    .contact-inner h2 { margin-bottom: 10px; font-size: clamp(36px, 4.2vw, 56px); }
    .contact-inner p { max-width: 610px; margin: 0; color: #536343; }
    .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .contact-actions .button-outline { border-color: #71894c; color: var(--ink); }
    footer { padding: 70px 0 26px; background: var(--dark); color: #d5dfd6; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; }
    footer .brand-name { color: white; }
    footer .brand-tagline { color: #a4b3a6; }
    .footer-about { max-width: 300px; margin: 24px 0; color: #a5b4a8; font-size: 13px; }
    .socials { display: flex; gap: 17px; font-size: 12px; font-weight: 700; }
    footer h3 { margin-bottom: 20px; color: white; font-size: 13px; letter-spacing: 0; }
    .footer-links { display: grid; gap: 10px; color: #aebcb0; font-size: 13px; }
    .footer-links a:hover, .socials a:hover { color: var(--lime); }
    .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-top: 23px; border-top: 1px solid #354139; color: #92a397; font-size: 11px; }
    .footer-bottom div { display: flex; gap: 20px; }
    @media (max-width: 1050px) {
      .container { width: min(var(--max), calc(100% - 48px)); }
      .header-inner { min-height: 76px; }
      .menu-toggle { display: block; }
      .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px 24px; background: white; box-shadow: 0 10px 20px #0002; }
      .nav.open { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
      .nav a { padding: 12px 0; }
      .nav .nav-cta { padding: 12px; text-align: center; }
      .hero { min-height: 600px; }
      .vehicle-img { height: 190px; }
      .vehicle-title-row { display: block; }
      .vehicle-title-row h3 { margin-bottom: 4px; }
      .price { display: block; margin-bottom: 14px; }
      .about-grid, .service-grid { gap: 45px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .container { width: calc(100% - 36px); }
      .section { padding: 75px 0; }
      .topbar .container { justify-content: center; text-align: center; }
      .topbar .hours { display: none; }
      .hero { min-height: 610px; align-items: end; }
      .hero::after { background: linear-gradient(90deg, rgba(10,20,15,.8), rgba(10,20,15,.3)), linear-gradient(0deg, rgba(10,20,15,.9), transparent 85%); }
      .hero-image { object-position: 62% center; }
      .hero-content { padding: 110px 0 95px; }
      .hero h1 { font-size: clamp(48px, 12vw, 70px); }
      .hero p { font-size: 15px; }
      .hero-note { right: 18px; bottom: 20px; }
      .proof-inner { grid-template-columns: 1fr; }
      .proof-item, .proof-item:first-child { padding: 15px 0; border-right: 0; border-bottom: 1px solid rgba(23,33,29,.16); }
      .inventory-top, .section-heading { display: block; }
      .inventory-top .text-link { margin: 10px 0 0; }
      .vehicle-grid, .journal-grid, .about-grid, .finance-grid, .service-grid, .faq-grid { grid-template-columns: 1fr; }
      .vehicle-grid { gap: 18px; }
      .vehicle-img { height: 245px; }
      .vehicle-title-row { display: flex; }
      .about-grid, .service-grid, .finance-grid { gap: 45px; }
      .about-image { min-height: 410px; margin-right: 20px; }
      .about-image > img { height: 410px; }
      .image-stamp { right: -20px; bottom: 20px; }
      .service-image { height: 360px; }
      .service-image-wrap { order: -1; }
      .section-heading p { margin-top: 16px; }
      .journal-grid { gap: 40px; }
      .story img { height: 230px; }
      .faq-grid { gap: 25px; }
      .contact-inner { display: block; }
      .contact-actions { margin-top: 25px; }
      .footer-grid { gap: 35px 25px; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 400px) {
      .hero-actions .button { width: 100%; }
      .form-grid, .service-features { grid-template-columns: 1fr; }
      .calculator { padding: 23px; }
      .estimate { align-items: start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="container">
      <span>Good cars. Good people. No unnecessary detours.</span>
      <span class="hours">Visit us in Portland, OR &nbsp; · &nbsp; Mon–Sat, 9am–6pm &nbsp; <a href="tel:+15035550148">(503) 555-0148</a></span>
    </div>
  </div>

  <header class="header">
    <div class="container header-inner">
      <a class="brand" href="#top" aria-label="Northline Motor Co. home">
        <img src="https://placehold.co/84x84/233c2e/d9ed83?text=N&amp;font=montserrat" alt="">
        <span><span class="brand-name">NORTHLINE<br>MOTOR CO.</span><span class="brand-tagline">Better roads start here.</span></span>
      </a>
      <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="primary-nav">Menu ☰</button>
      <nav class="nav" id="primary-nav" aria-label="Primary navigation">
        <a href="#inventory">Inventory</a>
        <a href="#financing">Financing</a>
        <a href="#service">Service</a>
        <a href="#journal">Journal</a>
        <a href="#trade-in">Trade-In</a>
        <a href="#contact">Contact</a>
        <a class="nav-cta" href="#schedule">Schedule ↗</a>
      </nav>
    </div>
  </header>

  <main id="top">
    <section class="hero" aria-labelledby="hero-title">
      <img class="hero-image" src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&amp;fit=crop&amp;w=2000&amp;q=85" alt="A car on an open road">
      <div class="container hero-content">
        <span class="eyebrow">A better way to move</span>
        <h1 id="hero-title">The road ahead looks <em>good.</em></h1>
        <p>Find a car that fits your life, get advice you can actually use, and keep every mile feeling right. Welcome to a more human kind of motor company.</p>
        <div class="hero-actions">
          <a class="button" href="#inventory">Explore our vehicles <span class="arrow">↗</span></a>
          <a class="button button-outline" href="#about">Get to know us <span class="arrow">→</span></a>
        </div>
      </div>
      <div class="hero-note">Made for the miles ahead &nbsp; / &nbsp; 01—04</div>
    </section>

    <div class="proof" aria-label="The Northline difference">
      <div class="container proof-inner">
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">✓</span><div><strong>Thoughtfully selected</strong><small>Vehicles chosen with real life in mind</small></div></div>
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">↗</span><div><strong>Straight answers, always</strong><small>Clear pricing and no-pressure guidance</small></div></div>
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">✳</span><div><strong>Here for the long haul</strong><small>Expert care well beyond the keys</small></div></div>
      </div>
    </div>

    <section class="section inventory" id="inventory">
      <div class="container">
        <div class="inventory-top">
          <div>
            <span class="eyebrow">The Northline collection</span>
            <h2>Good cars for wherever you're going.</h2>
            <p class="intro-copy">From the weekday commute to the long way home, the right car makes all the difference. Explore a few recent arrivals from our carefully selected collection.</p>
          </div>
          <a class="text-link" href="mailto:hello@northlinemotor.example?subject=Full%20inventory%20request">Request full inventory <span>↗</span></a>
        </div>
        <div class="vehicle-grid">
          <article class="vehicle-card">
            <div class="vehicle-img">
              <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="Silver BMW sedan outdoors" loading="lazy">
              <span class="badge">Just arrived</span>
            </div>
            <div class="vehicle-body">
              <div class="vehicle-meta">Refined everyday driving</div>
              <div class="vehicle-title-row"><h3>2022 BMW 3 Series</h3><span class="price">$32,900</span></div>
              <div class="vehicle-specs"><span>28,410 miles</span><span>Automatic</span><span>Gasoline</span></div>
              <div class="card-bottom"><span>320i Sedan</span><a href="mailto:hello@northlinemotor.example?subject=Availability%3A%202022%20BMW%203%20Series">Check availability ↗</a></div>
            </div>
          </article>
          <article class="vehicle-card">
            <div class="vehicle-img">
              <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="Porsche sports car parked on a road" loading="lazy">
              <span class="badge">Northline pick</span>
            </div>
            <div class="vehicle-body">
              <div class="vehicle-meta">A little more exhilaration</div>
              <div class="vehicle-title-row"><h3>2021 Porsche 718</h3><span class="price">$59,800</span></div>
              <div class="vehicle-specs"><span>19,860 miles</span><span>Automatic</span><span>Gasoline</span></div>
              <div class="card-bottom"><span>Cayman Coupe</span><a href="mailto:hello@northlinemotor.example?subject=Availability%3A%202021%20Porsche%20718">Check availability ↗</a></div>
            </div>
          </article>
          <article class="vehicle-card">
            <div class="vehicle-img">
              <img src="https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="A modern vehicle on a scenic road" loading="lazy">
              <span class="badge">Just arrived</span>
            </div>
            <div class="vehicle-body">
              <div class="vehicle-meta">Ready for the everyday</div>
              <div class="vehicle-title-row"><h3>2023 Volvo XC60</h3><span class="price">$38,400</span></div>
              <div class="vehicle-specs"><span>22,180 miles</span><span>Automatic</span><span>Hybrid</span></div>
              <div class="card-bottom"><span>B5 AWD Plus</span><a href="mailto:hello@northlinemotor.example?subject=Availability%3A%202023%20Volvo%20XC60">Check availability ↗</a></div>
            </div>
          </article>
        </div>
        <p class="inventory-disclaimer">Featured vehicles are illustrative. Contact us to confirm current availability, specifications, pricing, and applicable fees.</p>
      </div>
    </section>

    <section class="section about" id="about">
      <div class="container about-grid">
        <div class="about-image">
          <img src="https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&amp;fit=crop&amp;w=900&amp;q=80" alt="Driver enjoying the view from behind the wheel" loading="lazy">
          <div class="image-stamp"><strong>More than</strong><span>a set of keys.<br>A partner for the road.</span></div>
        </div>
        <div class="about-copy" id="trade-in">
          <span class="eyebrow">A different kind of dealership</span>
          <h2>We're in it for the journey.</h2>
          <p>Buying a car should feel exciting, not overwhelming. At Northline, we take the time to understand how you drive and what matters to you—then help you find a vehicle that makes sense for your life.</p>
          <p>Every vehicle comes with a conversation about its history, available safety features, and any remaining warranty coverage. Have a car to trade? We'll walk you through a straightforward appraisal and explain how its value can be applied to your next vehicle.</p>
          <div class="about-list">
            <div><span class="check">✓</span> A curated selection, not an overwhelming one</div>
            <div><span class="check">✓</span> Transparent trade-in conversations</div>
            <div><span class="check">✓</span> Real people to help at every step</div>
          </div>
          <a class="button button-dark" href="mailto:hello@northlinemotor.example?subject=Trade-in%20appraisal%20request">Start your trade-in <span class="arrow">↗</span></a>
        </div>
      </div>
    </section>

    <section class="section finance" id="financing">
      <div class="container finance-grid">
        <div class="finance-copy">
          <span class="eyebrow">Financing, made clearer</span>
          <h2>Let's find a number that feels right.</h2>
          <p>Your next car should fit your budget as well as your driveway. Our team can help you understand loan terms, down payments, and available financing options, so you can make a confident decision without the guesswork.</p>
          <p>Start with the payment estimator for a ballpark figure, then talk with us about a personalized quote. We'll explain the details and answer your questions before you sign anything.</p>
          <div class="finance-points"><span>Flexible terms</span><span>Clear explanations</span><span>No-pressure guidance</span></div>
        </div>
        <div class="calculator">
          <h3>Estimate your payment</h3>
          <p>Adjust the numbers to explore what works for you.</p>
          <div class="form-grid">
            <div class="field"><label for="vehicle-price">Vehicle price ($)</label><input id="vehicle-price" type="number" min="0" max="1000000" step="500" value="32900"></div>
            <div class="field"><label for="down-payment">Down payment ($)</label><input id="down-payment" type="number" min="0" max="1000000" step="500" value="5000"></div>
            <div class="field"><label for="interest-rate">Interest rate (APR %)</label><input id="interest-rate" type="number" min="0" max="100" step="0.1" value="6.9"></div>
            <div class="field"><label for="loan-term">Loan term</label><select id="loan-term"><option value="36">36 months</option><option value="48">48 months</option><option value="60" selected>60 months</option><option value="72">72 months</option><option value="84">84 months</option></select></div>
          </div>
          <div class="estimate">
            <div><span class="estimate-label">Estimated payment</span><strong><span id="payment-result" aria-live="polite">$551</span> <small>/ month</small></strong></div>
            <a class="button button-dark" href="mailto:hello@northlinemotor.example?subject=Financing%20inquiry">Talk financing <span class="arrow">↗</span></a>
          </div>
          <p class="fineprint">Estimate only, not an offer of credit. Excludes taxes, registration, fees, and trade-in value. Actual rates and terms depend on credit approval and lender conditions.</p>
        </div>
      </div>
    </section>

    <section class="section service" id="service">
      <div class="container service-grid">
        <div class="service-copy">
          <span class="eyebrow">The Northline service center</span>
          <h2>Good care goes a long way.</h2>
          <p>A well-maintained car is a more dependable car. Whether you're due for routine maintenance or something doesn't feel quite right, our service team is here to help you make sense of what your vehicle needs.</p>
          <p>We'll review your manufacturer's recommended service interval, explain any findings, and discuss your options before work begins. From oil changes and tire care to brake inspections and diagnostics, we're focused on keeping you safely moving.</p>
          <div class="service-features">
            <div><h3>Maintenance that matters</h3><p>Stay ahead with fluid checks, tire rotations, and scheduled service.</p></div>
            <div><h3>Advice you can trust</h3><p>Understand the work, the timing, and the estimate before we start.</p></div>
          </div>
          <a class="button button-dark" id="schedule" href="mailto:service@northlinemotor.example?subject=Service%20appointment%20request&amp;body=Hello%2C%20I%27d%20like%20to%20schedule%20service.%0A%0AVehicle%20year%2C%20make%20and%20model%3A%0AService%20needed%3A%0APreferred%20date%3A%0APhone%20number%3A">Schedule service <span class="arrow">↗</span></a>
        </div>
        <div class="service-image-wrap">
          <img class="service-image" src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&amp;fit=crop&amp;w=900&amp;q=80" alt="Automotive technician working on a vehicle" loading="lazy">
        </div>
      </div>
    </section>

    <section class="section journal" id="journal">
      <div class="container">
        <div class="section-heading">
          <div><span class="eyebrow">The Northline journal</span><h2>A little knowledge goes a long way.</h2></div>
          <p>Practical advice, fresh perspectives, and the details worth knowing before your next drive.</p>
        </div>
        <div class="journal-grid">
          <article class="story">
            <img src="https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="View from the driver's seat on a road trip" loading="lazy">
            <div class="story-meta">Buying advice &nbsp; / &nbsp; 5 min read</div>
            <h3>What to look for on your next test drive</h3>
            <p>Go beyond the first impression. Check visibility, seating comfort, braking feel, and the driver-assistance features you'll use every day.</p>
            <a class="text-link" href="#test-drive-faq">Explore test-drive tips <span>↗</span></a>
          </article>
          <article class="story">
            <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="Vehicle maintenance in progress" loading="lazy">
            <div class="story-meta">Service &amp; care &nbsp; / &nbsp; 4 min read</div>
            <h3>The maintenance basics worth keeping up with</h3>
            <p>Oil, tires, brakes, and fluids all have a part to play. Learn why following your vehicle's service schedule pays off over time.</p>
            <a class="text-link" href="#service">Explore our service center <span>↗</span></a>
          </article>
          <article class="story">
            <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="Sports car on a tree-lined road" loading="lazy">
            <div class="story-meta">Ownership &nbsp; / &nbsp; 6 min read</div>
            <h3>Understanding warranty coverage</h3>
            <p>Factory warranties and extended protection plans aren't all the same. Know what to ask about coverage, exclusions, and transferability.</p>
            <a class="text-link" href="#warranty-faq">See warranty questions <span>↗</span></a>
          </article>
        </div>
      </div>
    </section>

    <section class="section faq">
      <div class="container faq-grid">
        <div class="faq-intro">
          <span class="eyebrow">Good to know</span>
          <h2>Questions? You're in the right place.</h2>
          <p>There's a lot to consider when it comes to your car. Here are a few answers to get you started, and we're always happy to talk through the rest.</p>
          <a class="text-link" href="#contact">Talk to our team <span>↗</span></a>
        </div>
        <div>
          <details id="test-drive-faq">
            <summary>How do I schedule and prepare for a test drive?</summary>
            <p>Contact our team with the vehicle you're interested in and a preferred time. Bring a valid driver's license, and consider a route that includes both city streets and a faster road. Take time to check visibility, parking ease, comfort, and the safety features that matter to you.</p>
          </details>
          <details>
            <summary>Can I trade in my current vehicle?</summary>
            <p>Yes. We'll review your vehicle's condition, mileage, history, and current market information to make an appraisal. Bring your registration, identification, keys, and any available service records. If you have a loan, we'll also need your payoff information.</p>
          </details>
          <details id="warranty-faq">
            <summary>How do I find out what warranty coverage is included?</summary>
            <p>Coverage varies by vehicle. We'll help you review any remaining manufacturer's warranty and available protection plans, including term limits, exclusions, deductibles, and transfer rules. Ask for the complete terms before making a decision.</p>
          </details>
          <details>
            <summary>Do I need to buy a car from Northline to book service?</summary>
            <p>Not at all. We welcome service inquiries for vehicles purchased elsewhere. Tell us your vehicle's year, make, model, and what it needs, and we'll let you know how we can help and when we have an appointment available.</p>
          </details>
        </div>
      </div>
    </section>

    <section class="contact-band" id="contact">
      <div class="container contact-inner">
        <div><span class="eyebrow">Come say hello</span><h2>Let's get you moving.</h2><p>Whether you're ready for a test drive or just have a few questions, we're here to help. Stop by, give us a call, or send us a note.</p></div>
        <div class="contact-actions"><a class="button button-dark" href="mailto:hello@northlinemotor.example?subject=Let%27s%20talk%20cars">Contact our team <span class="arrow">↗</span></a><a class="button button-outline" href="tel:+15035550148">Call (503) 555-0148 <span class="arrow">↗</span></a></div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="brand" href="#top">
            <img src="https://placehold.co/84x84/d9ed83/233c2e?text=N&amp;font=montserrat" alt="">
            <span><span class="brand-name">NORTHLINE<br>MOTOR CO.</span><span class="brand-tagline">Better roads start here.</span></span>
          </a>
          <p class="footer-about">Thoughtfully selected cars, honest advice, and dependable care for every road ahead. Proudly rooted in Portland.</p>
          <div class="socials"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram ↗</a><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">Facebook ↗</a><a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">YouTube ↗</a></div>
        </div>
        <div><h3>Explore</h3><div class="footer-links"><a href="#inventory">Our inventory</a><a href="#financing">Financing</a><a href="#trade-in">Trade-in</a><a href="#journal">The journal</a></div></div>
        <div><h3>How we can help</h3><div class="footer-links"><a href="#service">Service center</a><a href="#schedule">Schedule service</a><a href="#contact">Contact us</a><a href="#test-drive-faq">Frequently asked questions</a></div></div>
        <div><h3>Visit Northline</h3><div class="footer-links"><span>1840 NW Junction Avenue<br>Portland, OR 97209</span><a href="tel:+15035550148">(503) 555-0148</a><a href="mailto:hello@northlinemotor.example">hello@northlinemotor.example</a><span>Mon–Sat: 9am–6pm<br>Sunday: Closed</span></div></div>
      </div>
      <div class="footer-bottom"><span>© 2026 Northline Motor Co. All rights reserved.</span><div><a href="mailto:hello@northlinemotor.example?subject=Privacy%20policy%20request">Privacy</a><a href="mailto:hello@northlinemotor.example?subject=Terms%20of%20use%20request">Terms</a><span>Made for the road ahead.</span></div></div>
    </div>
  </footer>
  <script>
    const menuButton = document.querySelector('.menu-toggle');
    const navigation = document.querySelector('#primary-nav');
    menuButton.addEventListener('click', () => {
      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
      menuButton.setAttribute('aria-expanded', String(!expanded));
      navigation.classList.toggle('open', !expanded);
    });
    navigation.addEventListener('click', event => {
      if (event.target.closest('a')) {
        navigation.classList.remove('open');
        menuButton.setAttribute('aria-expanded', 'false');
      }
    });

    const priceInput = document.querySelector('#vehicle-price');
    const downInput = document.querySelector('#down-payment');
    const rateInput = document.querySelector('#interest-rate');
    const termInput = document.querySelector('#loan-term');
    const result = document.querySelector('#payment-result');
    function updatePayment() {
      const price = Math.min(1000000, Math.max(0, Number(priceInput.value) || 0));
      const down = Math.min(1000000, Math.max(0, Number(downInput.value) || 0));
      const principal = Math.max(0, price - down);
      const rate = Math.min(100, Math.max(0, Number(rateInput.value) || 0)) / 100 / 12;
      const months = Number(termInput.value);
      const payment = rate === 0 ? principal / months : principal * rate / (1 - Math.pow(1 + rate, -months));
      result.textContent = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(payment);
    }
    [priceInput, downInput, rateInput, termInput].forEach(input => input.addEventListener('input', updatePayment));
    updatePayment();
  </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:16:58.950Z",
  "url": "https://benchmark.aimac.invalid/9d38ea515b9a82d06147d70e603693851197c72da8b219e82a6793f80db6daa3.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-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": []
    },
    {
      "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-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": []
    },
    {
      "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-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": []
    },
    {
      "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": "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": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": []
    },
    {
      "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": "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": []
    },
    {
      "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": []
    },
    {
      "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=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. 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=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"proof-icon\" aria-hidden=\"true\">\u2713</span>",
          "target": [
            ".proof-item:nth-child(1) > .proof-icon[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "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=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. home\"]"
          ]
        }
      ]
    },
    {
      "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=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. 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=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. home\"]"
          ]
        }
      ]
    },
    {
      "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 id=\"hero-title\">The road ahead looks <em>good.</em></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2>Good cars for wherever you're going.</h2>",
                  "target": [
                    ".inventory-top > div > h2"
                  ]
                },
                {
                  "html": "<h3>2022 BMW 3 Series</h3>",
                  "target": [
                    ".vehicle-card:nth-child(1) > .vehicle-body > .vehicle-title-row > h3"
                  ]
                },
                {
                  "html": "<h3>2021 Porsche 718</h3>",
                  "target": [
                    ".vehicle-card:nth-child(2) > .vehicle-body > .vehicle-title-row > h3"
                  ]
                },
                {
                  "html": "<h3>2023 Volvo XC60</h3>",
                  "target": [
                    ".vehicle-card:nth-child(3) > .vehicle-body > .vehicle-title-row > h3"
                  ]
                },
                {
                  "html": "<h2>We're in it for the journey.</h2>",
                  "target": [
                    "#trade-in > h2"
                  ]
                },
                {
                  "html": "<h2>Let's find a number that feels right.</h2>",
                  "target": [
                    ".finance-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Estimate your payment</h3>",
                  "target": [
                    ".calculator > h3"
                  ]
                },
                {
                  "html": "<h2>Good care goes a long way.</h2>",
                  "target": [
                    ".service-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Maintenance that matters</h3>",
                  "target": [
                    "div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Advice you can trust</h3>",
                  "target": [
                    ".service-features > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h2>A little knowledge goes a long way.</h2>",
                  "target": [
                    ".section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>What to look for on your next test drive</h3>",
                  "target": [
                    ".story:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>The maintenance basics worth keeping up with</h3>",
                  "target": [
                    ".story:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Understanding warranty coverage</h3>",
                  "target": [
                    ".story:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Questions? You're in the right place.</h2>",
                  "target": [
                    ".faq-intro > h2"
                  ]
                },
                {
                  "html": "<h2>Let's get you moving.</h2>",
                  "target": [
                    ".contact-inner > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-grid > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>How we can help</h3>",
                  "target": [
                    "div:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Visit Northline</h3>",
                  "target": [
                    "div:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "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": "#dce6dc",
                "bgColor": "#101a16",
                "contrastRatio": 13.87,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 13.87"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>Good cars. Good people. No unnecessary detours.</span>",
          "target": [
            ".topbar > .container > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"vehicle-price\">Vehicle price ($)</label>",
                  "target": [
                    "label[for=\"vehicle-price\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"vehicle-price\" type=\"number\" min=\"0\" max=\"1000000\" step=\"500\" value=\"32900\">",
          "target": [
            "#vehicle-price"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "presentational-role",
              "data": {
                "role": "presentation"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were overridden with role=\"presentation\""
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/84x84/233c2e/d9ed83?text=N&amp;font=montserrat\" alt=\"\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. home\"] > img[alt=\"\"]"
          ]
        }
      ]
    },
    {
      "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": "Vehicle price ($)"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"vehicle-price\">Vehicle price ($)</label>",
                  "target": [
                    "label[for=\"vehicle-price\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"vehicle-price\" type=\"number\" min=\"0\" max=\"1000000\" step=\"500\" value=\"32900\">",
          "target": [
            "#vehicle-price"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<span class=\"hours\">Visit us in Portland, OR &nbsp; \u00b7 &nbsp; Mon\u2013Sat, 9am\u20136pm &nbsp; <a href=\"tel:+15035550148\">(503) 555-0148</a></span>",
                  "target": [
                    ".hours"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<span class=\"hours\">Visit us in Portland, OR &nbsp; \u00b7 &nbsp; Mon\u2013Sat, 9am\u20136pm &nbsp; <a href=\"tel:+15035550148\">(503) 555-0148</a></span>",
                  "target": [
                    ".hours"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"tel:+15035550148\">(503) 555-0148</a>",
          "target": [
            ".hours > a[href=\"tel:+15035550148\"]"
          ]
        }
      ]
    },
    {
      "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 href=\"tel:+15035550148\">(503) 555-0148</a>",
          "target": [
            ".hours > a[href=\"tel:+15035550148\"]"
          ]
        }
      ]
    },
    {
      "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\">",
          "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=\"hero-image\" src=\"https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&amp;fit=crop&amp;w=2000&amp;q=85\" alt=\"A car on an open road\">",
          "target": [
            ".hero-image"
          ]
        }
      ]
    },
    {
      "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": "Loan term"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"loan-term\">Loan term</label>",
                  "target": [
                    "label[for=\"loan-term\"]"
                  ]
                }
              ],
              "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=\"loan-term\"><option value=\"36\">36 months</option><option value=\"48\">48 months</option><option value=\"60\" selected=\"\">60 months</option><option value=\"72\">72 months</option><option value=\"84\">84 months</option></select>",
          "target": [
            "#loan-term"
          ]
        }
      ]
    },
    {
      "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>How do I schedule and prepare for a test drive?</summary>",
          "target": [
            "#test-drive-faq > 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": 186,
                "height": 55.1
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (186px by 55.1px, 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=\"brand\" href=\"#top\" aria-label=\"Northline Motor Co. home\">",
          "target": [
            "a[aria-label=\"Northline Motor Co. home\"]"
          ]
        }
      ]
    }
  ],
  "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=\"proof\" aria-label=\"The Northline difference\">",
          "target": [
            ".proof"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">A better way to move</span>",
          "target": [
            ".hero-content > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#748074",
                "bgColor": "#ffffff",
                "contrastRatio": 4.13,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"vehicle-card\">",
                  "target": [
                    ".vehicle-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"vehicle-meta\">Refined everyday driving</div>",
          "target": [
            ".vehicle-card:nth-child(1) > .vehicle-body > .vehicle-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#748074",
                "bgColor": "#ffffff",
                "contrastRatio": 4.13,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"vehicle-card\">",
                  "target": [
                    ".vehicle-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"vehicle-meta\">A little more exhilaration</div>",
          "target": [
            ".vehicle-card:nth-child(2) > .vehicle-body > .vehicle-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#748074",
                "bgColor": "#ffffff",
                "contrastRatio": 4.13,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"vehicle-card\">",
                  "target": [
                    ".vehicle-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"vehicle-meta\">Ready for the everyday</div>",
          "target": [
            ".vehicle-card:nth-child(3) > .vehicle-body > .vehicle-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.13 (foreground color: #748074, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7c857c",
                "bgColor": "#f8f9f3",
                "contrastRatio": 3.6,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section inventory\" id=\"inventory\">",
                  "target": [
                    "#inventory"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.6 (foreground color: #7c857c, background color: #f8f9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"inventory-disclaimer\">Featured vehicles are illustrative. Contact us to confirm current availability, specifications, pricing, and applicable fees.</p>",
          "target": [
            ".inventory-disclaimer"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.6 (foreground color: #7c857c, background color: #f8f9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#788279",
                "bgColor": "#ffffff",
                "contrastRatio": 3.98,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator\">",
                  "target": [
                    ".calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.98 (foreground color: #788279, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"fineprint\">Estimate only, not an offer of credit. Excludes taxes, registration, fees, and trade-in value. Actual rates and terms depend on credit approval and lender conditions.</p>",
          "target": [
            ".fineprint"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.98 (foreground color: #788279, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68726a",
                "bgColor": "#f1f4ed",
                "contrastRatio": 4.49,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Practical advice, fresh perspectives, and the details worth knowing before your next drive.</p>",
          "target": [
            ".section-heading > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#698052",
                "bgColor": "#f1f4ed",
                "contrastRatio": 3.92,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"story-meta\">Buying advice &nbsp; / &nbsp; 5 min read</div>",
          "target": [
            ".story:nth-child(1) > .story-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68726a",
                "bgColor": "#f1f4ed",
                "contrastRatio": 4.49,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Go beyond the first impression. Check visibility, seating comfort, braking feel, and the driver-assistance features you'll use every day.</p>",
          "target": [
            ".story:nth-child(1) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#698052",
                "bgColor": "#f1f4ed",
                "contrastRatio": 3.92,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"story-meta\">Service &amp; care &nbsp; / &nbsp; 4 min read</div>",
          "target": [
            ".story:nth-child(2) > .story-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68726a",
                "bgColor": "#f1f4ed",
                "contrastRatio": 4.49,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Oil, tires, brakes, and fluids all have a part to play. Learn why following your vehicle's service schedule pays off over time.</p>",
          "target": [
            ".story:nth-child(2) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#698052",
                "bgColor": "#f1f4ed",
                "contrastRatio": 3.92,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"story-meta\">Ownership &nbsp; / &nbsp; 6 min read</div>",
          "target": [
            ".story:nth-child(3) > .story-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #698052, background color: #f1f4ed, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68726a",
                "bgColor": "#f1f4ed",
                "contrastRatio": 4.49,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section journal\" id=\"journal\">",
                  "target": [
                    "#journal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Factory warranties and extended protection plans aren't all the same. Know what to ask about coverage, exclusions, and transferability.</p>",
          "target": [
            ".story:nth-child(3) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.49 (foreground color: #68726a, background color: #f1f4ed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6302
      },
      {
        "y": 576,
        "height": 6302
      },
      {
        "y": 1152,
        "height": 6302
      },
      {
        "y": 1728,
        "height": 6302
      },
      {
        "y": 2304,
        "height": 6302
      },
      {
        "y": 2880,
        "height": 6302
      },
      {
        "y": 3456,
        "height": 6302
      },
      {
        "y": 4032,
        "height": 6302
      },
      {
        "y": 4608,
        "height": 6302
      },
      {
        "y": 5184,
        "height": 6302
      },
      {
        "y": 5582,
        "height": 6302
      }
    ],
    "scans": 12,
    "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 "Automotive" 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: "Automotive"
- Description: Automotive news, car reviews, repair tips, and dealership resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Automotive" 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: "Contact", "Schedule", "Trade-In".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Automotive" category. Consider themes similar to: "Financing Options", "Service Center", "New Arrivals".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "warranty coverage", "safety features", "service interval".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "View Inventory", "Contact Dealer", "Check Availability".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Automotive" sector. Ideas similar but not limited to: "vehicle comparison".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "dealer awards", "customer reviews", "featured inventory".
-   **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.