OpenAI GPT 6.1 Terra Pro – Careers

via OpenAI · Generated

  • AIMAC Debt 4.19
  • Cost $0.14
  • Total Violations 10
  • HTML Size 38 KB
  • Em Dashes 4

Screenshot

View OpenAI GPT 6.1 Terra Pro Careers page View Live Page

Accessibility Issues Found

10 Serious

  • color-contrast serious 10 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <em>moves you forward.</em>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#173d35">
  <meta name="description" content="Northstar is a career platform for finding meaningful work, building in-demand skills, and making your next move with confidence.">
  <title>Northstar Careers — Find work that moves you forward</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:#183d35;--ink-dark:#102e28;--muted:#61716a;--lime:#d8f18a;--cream:#f7f7f0;--paper:#fff;--line:#dce4dc;--peach:#f1d4c5;--radius:18px;--shadow:0 18px 55px rgba(22,55,45,.08)}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.6}
    body,button,input,select{font-family:"DM Sans",sans-serif}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,select{font-size:inherit}
    button{cursor:pointer}
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #9cca48;outline-offset:3px}
    .container{width:min(1240px,calc(100% - 64px));margin:auto}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700}
    .eyebrow:before{content:"";width:8px;height:8px;background:#9dc747;border-radius:50%}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{font-family:Manrope,sans-serif;line-height:1.12;letter-spacing:-.045em}
    h1{font-size:clamp(48px,6vw,78px);font-weight:700;margin-bottom:24px}
    h2{font-size:clamp(34px,4vw,52px);font-weight:700;margin-bottom:18px}
    h3{font-size:22px}
    p{color:var(--muted)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 21px;border:1px solid transparent;border-radius:7px;font-size:14px;font-weight:700;transition:transform .2s,background .2s}
    .btn:hover{transform:translateY(-2px)}
    .btn-dark{background:var(--ink);color:white}
    .btn-dark:hover{background:#28584b}
    .btn-lime{background:var(--lime);color:var(--ink)}
    .btn-lime:hover{background:#e5f8aa}
    .btn-outline{border-color:#bacbc0;background:transparent;color:var(--ink)}
    .arrow{font-size:19px;line-height:1}
    .section{padding:100px 0}
    .section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
    .section-heading h2{margin:12px 0 0}
    .section-heading p{max-width:450px;margin:0}
    .text-link{font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid currentColor;padding-bottom:4px}
    .topbar{background:var(--ink-dark);color:#e3eee5;font-size:12px;padding:9px 0;text-align:center}
    .topbar a{color:var(--lime);font-weight:700;margin-left:8px}
    .site-header{background:var(--cream);border-bottom:1px solid #e5e9df}
    .header-inner{min-height:84px;display:flex;align-items:center;gap:35px}
    .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
    .brand img{width:39px;height:39px;border-radius:8px}
    .brand-name{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.06em;font-size:21px;line-height:1}
    .brand-tagline{display:block;font-size:9px;font-weight:600;letter-spacing:.03em;color:var(--muted);margin-top:4px}
    .nav{display:flex;align-items:center;gap:25px;margin-left:auto}
    .nav a{font-size:13px;font-weight:700;white-space:nowrap}
    .nav a:hover{color:#6a982d}
    .header-cta{min-height:43px;padding:0 17px}
    .menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 12px;color:var(--ink);font-weight:700}
    .hero{padding:70px 0 74px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center}
    .hero-copy .eyebrow{margin-bottom:23px}
    .hero-copy h1 em{font-style:normal;color:#7b9d42}
    .hero-copy>p{font-size:18px;line-height:1.7;max-width:570px;margin-bottom:28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-note{display:flex;align-items:center;gap:13px;margin-top:37px;font-size:12px;color:var(--muted)}
    .avatar-stack{display:flex;padding-left:7px}
    .avatar-stack img{width:34px;height:34px;border-radius:50%;border:2px solid var(--cream);margin-left:-7px}
    .hero-note strong{color:var(--ink)}
    .hero-visual{position:relative;padding:0 0 35px 24px}
    .hero-image{height:520px;width:100%;object-fit:cover;border-radius:180px 18px 18px 18px;background:#d9e2d6}
    .hero-visual:before{content:"";position:absolute;right:-60px;top:-30px;width:160px;height:160px;border:1px solid #c7d5be;border-radius:50%;z-index:-1}
    .floating-card{position:absolute;bottom:0;left:0;background:white;border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px;max-width:260px}
    .floating-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--lime);font-size:20px;flex-shrink:0}
    .floating-card strong,.floating-card span{display:block}
    .floating-card strong{font-size:14px}
    .floating-card span{font-size:12px;color:var(--muted)}
    .search-wrap{background:var(--ink);color:white;padding:27px 0}
    .search-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
    .search-field{background:white;border-radius:7px;padding:8px 15px;display:flex;flex-direction:column}
    .search-field label{font-size:10px;color:#6b7c72;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
    .search-field input,.search-field select{border:0;outline:0;width:100%;background:transparent;color:var(--ink);padding:2px 0;font-weight:600;font-size:14px}
    .search-field input::placeholder{color:#95a099}
    .search-grid .btn{min-width:165px}
    .search-caption{font-size:12px;color:#b9cbc1;margin:11px 0 0}
    .search-caption a{color:white;text-decoration:underline;text-underline-offset:3px}
    .jobs{background:#fff}
    .filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
    .filter{border:1px solid var(--line);border-radius:30px;background:white;color:var(--ink);padding:8px 16px;font-size:12px;font-weight:700}
    .filter.active{background:var(--ink);color:white;border-color:var(--ink)}
    .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .job-card{border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;min-height:264px;transition:box-shadow .2s,transform .2s}
    .job-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
    .job-card[hidden]{display:none}
    .job-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}
    .company-icon{width:43px;height:43px;border-radius:10px;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:20px}
    .icon-1{background:#e6eddb}.icon-2{background:#f5e5db}.icon-3{background:#e4e9f4}
    .save-job{border:0;background:none;color:#6e8075;font-size:20px;padding:3px}
    .save-job[aria-pressed="true"]{color:#7da53c}
    .company{font-size:12px;color:var(--muted);margin-bottom:4px}
    .job-card h3{font-size:19px;letter-spacing:-.03em;margin-bottom:8px}
    .job-meta{font-size:13px;color:var(--muted);margin-bottom:18px}
    .job-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;border-top:1px solid #eef1ec;padding-top:15px}
    .tag{display:inline-block;background:#f0f5e9;color:#4e703b;padding:5px 9px;border-radius:4px;font-size:11px;font-weight:700}
    .job-bottom a{font-size:12px;font-weight:700}
    .job-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;font-size:13px;color:var(--muted)}
    .empty-state{padding:22px;border:1px dashed #bdcdbd;border-radius:10px;color:var(--muted)}
    .empty-state[hidden]{display:none}
    .split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
    .image-block{position:relative;padding:0 35px 35px 0}
    .image-block>img{width:100%;height:520px;object-fit:cover;border-radius:12px}
    .image-label{position:absolute;right:0;bottom:0;background:var(--lime);border-radius:10px;padding:22px 25px;max-width:240px}
    .image-label strong{display:block;font-family:Manrope,sans-serif;font-size:26px;letter-spacing:-.05em;line-height:1.1}
    .image-label span{display:block;font-size:12px;margin-top:5px}
    .split-copy .eyebrow{margin-bottom:17px}
    .split-copy p{line-height:1.75}
    .steps{margin:28px 0}
    .step{display:flex;gap:15px;margin:19px 0}
    .step-number{width:33px;height:33px;flex:none;display:grid;place-items:center;border:1px solid #b9cbb7;border-radius:50%;font-size:12px;font-weight:700}
    .step strong{display:block;font-size:14px}
    .step p{font-size:13px;margin:3px 0 0}
    .resources{background:#edf2e8}
    .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .resource-card{background:white;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
    .resource-card img{width:100%;height:200px;object-fit:cover}
    .resource-body{padding:25px;display:flex;flex-direction:column;flex:1}
    .resource-meta{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#6d8e42;margin-bottom:12px}
    .resource-body h3{font-size:21px;line-height:1.25;margin-bottom:12px}
    .resource-body p{font-size:14px;line-height:1.65;margin-bottom:22px}
    .resource-body .text-link{align-self:flex-start;margin-top:auto}
    .skill-section{background:var(--ink);color:white}
    .skill-section p{color:#c1d1c6}
    .skill-section .eyebrow:before{background:var(--lime)}
    .skill-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
    .skill-copy h2{margin:16px 0 20px}
    .skill-copy p{max-width:470px}
    .skill-benefits{display:grid;gap:12px;margin-top:28px;font-size:14px;color:#e1ebe3}
    .skill-benefits span:before{content:"✓";color:var(--lime);font-weight:700;margin-right:12px}
    .assessment{background:#fff;color:var(--ink);padding:30px;border-radius:14px}
    .assessment h3{margin-bottom:8px}
    .assessment p{color:var(--muted);font-size:13px;margin-bottom:20px}
    .assessment label{display:block;font-size:12px;font-weight:700;margin:15px 0 6px}
    .assessment select{width:100%;border:1px solid #cedbd0;border-radius:6px;padding:12px;background:#fff;color:var(--ink)}
    .assessment .btn{width:100%;margin-top:20px}
    .assessment-result{margin-top:18px;background:#f0f5e9;border-radius:8px;padding:16px;font-size:13px;line-height:1.6}
    .assessment-result[hidden]{display:none}
    .assessment-result strong{display:block;margin-bottom:4px}
    .story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
    .quote-card{background:#e7efdf;border-radius:14px;padding:42px;display:flex;flex-direction:column;justify-content:space-between}
    .quote-mark{font-family:Georgia,serif;font-size:80px;line-height:.7;color:#83a554}
    blockquote{margin:25px 0 30px;font-family:Manrope,sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:600;line-height:1.35;letter-spacing:-.04em}
    .person{display:flex;align-items:center;gap:12px}
    .person img{width:46px;height:46px;border-radius:50%}
    .person strong,.person span{display:block;font-size:13px}
    .person span{color:var(--muted);font-size:12px}
    .story-side{background:#f1dfd1;border-radius:14px;overflow:hidden;display:grid;grid-template-rows:235px auto}
    .story-side img{width:100%;height:100%;object-fit:cover}
    .story-side-content{padding:28px}
    .story-side-content h3{font-size:22px;margin:8px 0 12px}
    .story-side-content p{font-size:14px;margin-bottom:18px}
    .faq{background:#fff}
    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
    .faq-copy h2{margin-top:14px}
    .faq-copy p{max-width:340px}
    details{border-bottom:1px solid var(--line)}
    summary{list-style:none;cursor:pointer;padding:20px 32px 20px 0;font-family:Manrope,sans-serif;font-size:15px;font-weight:700;position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:2px;font-size:22px;font-weight:400;top:15px}
    details[open] summary:after{content:"−"}
    details p{font-size:14px;line-height:1.7;padding:0 25px 20px 0;margin:0}
    .cta-band{padding:75px 0;background:var(--lime)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-inner h2{margin:10px 0 10px}
    .cta-inner p{color:#4d684b;margin:0}
    footer{background:var(--ink-dark);color:white;padding:65px 0 25px}
    footer .brand-tagline{color:#a5bbb0}
    .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:45px;padding-bottom:50px}
    .footer-about p{color:#a5bbb0;font-size:13px;max-width:280px;margin:20px 0}
    .footer-col h4{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.04em;margin:0 0 19px}
    .footer-col a,.footer-col span{display:block;color:#b7c9bf;font-size:13px;margin:10px 0}
    .footer-col a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid #35544a;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#a5bbb0;font-size:12px}
    .footer-bottom div{display:flex;gap:20px}
    @media(max-width:1050px){.nav{gap:14px}.header-inner{gap:20px}.nav a{font-size:12px}.hero-grid{gap:35px}.split{gap:45px}.skill-grid{gap:45px}}
    @media(max-width:820px){.container{width:min(100% - 40px,680px)}.header-inner{min-height:72px;flex-wrap:wrap}.menu-toggle{display:block}.nav{display:none;order:3;width:100%;margin:0;padding:0 0 20px;flex-wrap:wrap}.nav.open{display:flex}.header-cta{display:none}.hero{padding:55px 0}.hero-grid,.split,.skill-grid,.faq-grid{grid-template-columns:1fr;gap:35px}.hero-image{height:420px}.hero-visual{max-width:590px}.section{padding:75px 0}.job-grid,.resource-grid{grid-template-columns:repeat(2,1fr)}.story-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-about{grid-column:1/-1}.faq-grid{gap:15px}.image-block>img{height:430px}}
    @media(max-width:560px){.container{width:calc(100% - 32px)}.topbar{font-size:11px}.hero-copy>p{font-size:16px}.hero-image{height:350px;border-radius:120px 12px 12px 12px}.hero-visual{padding-left:12px}.search-grid{grid-template-columns:1fr}.search-grid .btn{width:100%}.section-heading{display:block}.section-heading p,.section-heading .text-link{margin-top:18px}.job-grid,.resource-grid,.story-grid{grid-template-columns:1fr}.job-card{min-height:245px}.job-summary{align-items:flex-start;flex-direction:column}.image-block>img{height:360px}.image-label{padding:16px;max-width:195px}.quote-card{padding:30px}.cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-about{grid-column:1/-1}.footer-bottom{flex-direction:column}.footer-bottom div{flex-wrap:wrap}.section{padding:65px 0}}
  </style>
</head>
<body>
  <div class="topbar">A more meaningful next move starts here. <a href="#jobs">Explore opportunities <span aria-hidden="true">↗</span></a></div>
  <header class="site-header">
    <div class="container header-inner">
      <a class="brand" href="#top" aria-label="Northstar Careers home">
        <img src="https://placehold.co/48x48/183d35/d8f18a?text=N&font=montserrat" alt="">
        <span><span class="brand-name">northstar<span style="color:#86a94b">.</span></span><span class="brand-tagline">Make your next move matter.</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="#jobs">Job Search</a>
        <a href="#how-it-works">How It Works</a>
        <a href="#skills">Skills</a>
        <a href="#resources">Resume Guide</a>
        <a href="#stories">Stories</a>
        <a href="#resources">Blog</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a class="btn btn-dark header-cta" href="#skills">Find your direction <span class="arrow">↗</span></a>
    </div>
  </header>

  <main id="top">
    <section class="hero">
      <div class="container hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">A better way to work</span>
          <h1>Find work that <em>moves you forward.</em></h1>
          <p>A fulfilling career isn’t built in a day. Discover thoughtful opportunities, practical advice, and the confidence to take your next step—on your terms.</p>
          <div class="hero-actions">
            <a class="btn btn-dark" href="#jobs">Explore open roles <span class="arrow">↗</span></a>
            <a class="btn btn-outline" href="#how-it-works">Get to know us <span class="arrow">→</span></a>
          </div>
          <div class="hero-note">
            <div class="avatar-stack" aria-hidden="true">
              <img src="https://i.pravatar.cc/68?u=northstar1" alt="">
              <img src="https://i.pravatar.cc/68?u=northstar2" alt="">
              <img src="https://i.pravatar.cc/68?u=northstar3" alt="">
            </div>
            <span><strong>Made for people with ambition.</strong><br>Wherever you are in your career.</span>
          </div>
        </div>
        <div class="hero-visual">
          <img class="hero-image" src="https://picsum.photos/seed/northstar-work/900/1000" alt="A quiet, inspiring view for thinking about what comes next">
          <div class="floating-card">
            <div class="floating-icon" aria-hidden="true">✳</div>
            <div><strong>Your next chapter</strong><span>Let’s make it a good one.</span></div>
          </div>
        </div>
      </div>
    </section>

    <section class="search-wrap" aria-label="Search jobs">
      <div class="container">
        <form id="job-search" class="search-grid">
          <div class="search-field">
            <label for="keyword">What are you looking for?</label>
            <input id="keyword" type="search" placeholder="Job title, skill, or company">
          </div>
          <div class="search-field">
            <label for="location">Where?</label>
            <select id="location">
              <option value="">All locations</option>
              <option value="remote">Remote</option>
              <option value="new york">New York, NY</option>
              <option value="san francisco">San Francisco, CA</option>
            </select>
          </div>
          <button class="btn btn-lime" type="submit">Search jobs <span class="arrow">↗</span></button>
        </form>
        <p class="search-caption">Not sure where to start? <a href="#skills">Explore your skills</a> or browse our latest openings below.</p>
      </div>
    </section>

    <section class="section jobs" id="jobs">
      <div class="container">
        <div class="section-heading">
          <div><span class="eyebrow">The opportunity board</span><h2>Good work is out there.</h2></div>
          <p>Explore a selection of opportunities from teams doing interesting things. Find a role that fits your skills—and the life you want to build.</p>
        </div>
        <div class="filter-row" role="group" aria-label="Filter jobs by work arrangement">
          <button class="filter active" type="button" data-filter="all" aria-pressed="true">All roles</button>
          <button class="filter" type="button" data-filter="remote" aria-pressed="false">Remote</button>
          <button class="filter" type="button" data-filter="hybrid" aria-pressed="false">Hybrid</button>
          <button class="filter" type="button" data-filter="onsite" aria-pressed="false">On-site</button>
        </div>
        <div class="job-grid" id="job-list">
          <article class="job-card" data-keywords="senior product designer figma research design lumen studio" data-location="remote" data-type="remote">
            <div class="job-top"><div class="company-icon icon-1" aria-hidden="true">L</div><button class="save-job" type="button" aria-label="Save Senior Product Designer" aria-pressed="false">☆</button></div>
            <div class="company">Lumen Studio</div><h3>Senior Product Designer</h3>
            <p class="job-meta">Remote · United States<br>$135k–$165k / year</p>
            <div class="job-bottom"><span class="tag">Full-time · Remote</span><a href="mailto:careers@northstarcareers.example?subject=Senior%20Product%20Designer%20inquiry">Apply today ↗</a></div>
          </article>
          <article class="job-card" data-keywords="people operations manager human resources culture moss and co" data-location="new york" data-type="hybrid">
            <div class="job-top"><div class="company-icon icon-2" aria-hidden="true">M</div><button class="save-job" type="button" aria-label="Save People Operations Manager" aria-pressed="false">☆</button></div>
            <div class="company">Moss &amp; Co.</div><h3>People Operations Manager</h3>
            <p class="job-meta">New York, NY · Hybrid<br>$105k–$125k / year</p>
            <div class="job-bottom"><span class="tag">Full-time · Hybrid</span><a href="mailto:careers@northstarcareers.example?subject=People%20Operations%20Manager%20inquiry">Apply today ↗</a></div>
          </article>
          <article class="job-card" data-keywords="growth marketing lead strategy analytics marketing orbit health" data-location="san francisco" data-type="onsite">
            <div class="job-top"><div class="company-icon icon-3" aria-hidden="true">O</div><button class="save-job" type="button" aria-label="Save Growth Marketing Lead" aria-pressed="false">☆</button></div>
            <div class="company">Orbit Health</div><h3>Growth Marketing Lead</h3>
            <p class="job-meta">San Francisco, CA · On-site<br>$120k–$150k / year</p>
            <div class="job-bottom"><span class="tag">Full-time · On-site</span><a href="mailto:careers@northstarcareers.example?subject=Growth%20Marketing%20Lead%20inquiry">Apply today ↗</a></div>
          </article>
        </div>
        <p class="empty-state" id="empty-state" hidden>No roles match those filters. Try a broader keyword or choose another location.</p>
        <div class="job-summary"><span id="job-count" aria-live="polite">Showing 3 thoughtfully selected opportunities</span><a class="text-link" href="#job-search">Refine your search <span class="arrow">↗</span></a></div>
      </div>
    </section>

    <section class="section" id="how-it-works">
      <div class="container split">
        <div class="image-block">
          <img src="https://picsum.photos/seed/northstar-journey/900/1000" alt="An open landscape representing the possibilities ahead">
          <div class="image-label"><strong>Progress, not pressure.</strong><span>Small, intentional steps make a meaningful difference.</span></div>
        </div>
        <div class="split-copy">
          <span class="eyebrow">Your career, in your hands</span>
          <h2>A little direction goes a long way.</h2>
          <p>There’s no single right path to a rewarding career. Whether you’re making a bold pivot or looking for room to grow, we help you connect the dots between what you’re good at and what matters to you.</p>
          <p>Think of Northstar as your practical companion: clear advice, relevant opportunities, and encouragement for every stage of your career trajectory.</p>
          <div class="steps">
            <div class="step"><span class="step-number">01</span><div><strong>Get clear on your strengths</strong><p>Take a moment to identify the skills and work that energize you.</p></div></div>
            <div class="step"><span class="step-number">02</span><div><strong>Explore with intention</strong><p>Find roles and resources that align with your goals and priorities.</p></div></div>
            <div class="step"><span class="step-number">03</span><div><strong>Make your next move</strong><p>Show up prepared, tell your story, and put yourself out there.</p></div></div>
          </div>
          <a class="btn btn-dark" href="#skills">Start with your skills <span class="arrow">↗</span></a>
        </div>
      </div>
    </section>

    <section class="section resources" id="resources">
      <div class="container">
        <div class="section-heading">
          <div><span class="eyebrow">The career toolkit</span><h2>Advice for the road ahead.</h2></div>
          <p>Practical guidance, without the jargon. Build a stronger application, make meaningful connections, and navigate your next move with clarity.</p>
        </div>
        <div class="resource-grid">
          <article class="resource-card">
            <img src="https://picsum.photos/seed/northstar-notebook/700/420" alt="A setting for planning and reflection" loading="lazy">
            <div class="resource-body"><span class="resource-meta">Resume guide · 6 min read</span><h3>A resume that tells your story</h3><p>Lead with impact, not just responsibilities. Learn how to tailor your experience, quantify results, and make your strengths easy for hiring teams to see.</p><a class="text-link" href="#resume-tips">Read the key tips <span class="arrow">↗</span></a></div>
          </article>
          <article class="resource-card">
            <img src="https://picsum.photos/seed/northstar-conversation/700/420" alt="A calm space for a conversation" loading="lazy">
            <div class="resource-body"><span class="resource-meta">Networking · 5 min read</span><h3>Build a network that feels natural</h3><p>Networking doesn’t have to feel transactional. Start genuine conversations, reconnect with your community, and follow up in a way that lasts.</p><a class="text-link" href="#networking-tips">Read the key tips <span class="arrow">↗</span></a></div>
          </article>
          <article class="resource-card">
            <img src="https://picsum.photos/seed/northstar-interview/700/420" alt="A fresh perspective for preparing for an interview" loading="lazy">
            <div class="resource-body"><span class="resource-meta">Interviewing · 7 min read</span><h3>Walk into your next interview ready</h3><p>Prepare examples that show how you work, ask better questions, and assess whether the opportunity is as good a fit for you as you are for it.</p><a class="text-link" href="#interview-tips">Read the key tips <span class="arrow">↗</span></a></div>
          </article>
        </div>
      </div>
    </section>

    <section class="section skill-section" id="skills">
      <div class="container skill-grid">
        <div class="skill-copy">
          <span class="eyebrow">A moment of clarity</span>
          <h2>Know your strengths.<br>Grow what’s next.</h2>
          <p>The best next step starts with understanding where you are. Try our quick skill assessment for a practical suggestion tailored to your current focus.</p>
          <p>It’s not a test or a score—it’s a starting point for a more intentional conversation about your career.</p>
          <div class="skill-benefits"><span>Reflect on your current strengths</span><span>Get a useful next step in seconds</span><span>No account or personal details required</span></div>
        </div>
        <form class="assessment" id="assessment">
          <span class="resource-meta">Your next step · 30 seconds</span>
          <h3>Let’s find your focus.</h3>
          <p>Choose the options that feel closest to where you are today.</p>
          <label for="strength">What’s a strength you want to use more?</label>
          <select id="strength" required>
            <option value="">Select a strength</option>
            <option value="creative">Creative problem-solving</option>
            <option value="analytical">Analysis and decision-making</option>
            <option value="people">Communication and collaboration</option>
            <option value="leadership">Leadership and organization</option>
          </select>
          <label for="goal">What’s your main career goal?</label>
          <select id="goal" required>
            <option value="">Select a goal</option>
            <option value="grow">Grow in my current field</option>
            <option value="pivot">Explore a career change</option>
            <option value="search">Find a new opportunity</option>
          </select>
          <button class="btn btn-dark" type="submit">Get my next step <span class="arrow">↗</span></button>
          <div class="assessment-result" id="assessment-result" role="status" aria-live="polite" hidden></div>
        </form>
      </div>
    </section>

    <section class="section" id="stories">
      <div class="container">
        <div class="section-heading">
          <div><span class="eyebrow">Real people, real progress</span><h2>Every path has a story.</h2></div>
          <p>Careers rarely move in a straight line. A little perspective from people who have navigated change can make all the difference.</p>
        </div>
        <div class="story-grid">
          <article class="quote-card">
            <div><span class="quote-mark" aria-hidden="true">“</span><blockquote>I stopped asking, ‘What job should I have?’ and started asking, ‘What kind of work makes me feel useful?’ That changed everything.</blockquote></div>
            <div class="person"><img src="https://i.pravatar.cc/100?u=northstar-maya" alt=""><div><strong>Maya R.</strong><span>From operations to product management</span></div></div>
          </article>
          <article class="story-side">
            <img src="https://picsum.photos/seed/northstar-path/800/500" alt="A path leading toward a new horizon" loading="lazy">
            <div class="story-side-content"><span class="resource-meta">A career pivot</span><h3>It’s okay to take the scenic route.</h3><p>After years in operations, Maya used her transferable skills and a few honest networking conversations to find a new direction. Her advice: stay curious, and don’t underestimate what you already know.</p><a class="text-link" href="#skills">Find your starting point <span class="arrow">↗</span></a></div>
          </article>
        </div>
      </div>
    </section>

    <section class="section faq" id="faq">
      <div class="container faq-grid">
        <div class="faq-copy"><span class="eyebrow">Good to know</span><h2>Questions? We’ve got you.</h2><p>Finding your way can bring up a lot of questions. Here are a few answers to help you get started.</p><a class="text-link" href="mailto:hello@northstarcareers.example">Get in touch <span class="arrow">↗</span></a></div>
        <div>
          <details id="resume-tips"><summary>How can I make my resume stand out?</summary><p>Start with a concise summary that matches the role, then use specific accomplishments to show your impact. Where possible, include numbers, tools, and outcomes. Tailor your resume to the job description and proofread it before sending.</p></details>
          <details id="networking-tips"><summary>How do I start networking without feeling awkward?</summary><p>Begin with people you already know and ask thoughtful, specific questions. Reach out to someone whose work interests you for a short conversation, rather than immediately asking for a job. Follow up with a thank-you and keep the relationship going.</p></details>
          <details id="interview-tips"><summary>What should I do before an interview?</summary><p>Research the organization, review the job description, and prepare a few examples of challenges you’ve handled and the results you achieved. Bring questions about the team, expectations, and how success is measured.</p></details>
          <details><summary>Is Northstar free for job seekers?</summary><p>Yes. Browsing the opportunities shown here, reading our career advice, and using the quick skill assessment are free. Our assessment works in your browser and does not require an account.</p></details>
          <details><summary>How do I apply for a role?</summary><p>Choose “Apply today” on a listing to open an email inquiry about that role. Include a short introduction and your resume, and our team will help you understand the next steps. Always review the role and compensation details before applying.</p></details>
        </div>
      </div>
    </section>

    <section class="cta-band">
      <div class="container cta-inner">
        <div><span class="eyebrow">Ready when you are</span><h2>Your next chapter starts here.</h2><p>Make room for work that works for you. We’ll help you get there.</p></div>
        <a class="btn btn-dark" href="#jobs">Find your next role <span class="arrow">↗</span></a>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-about">
          <a class="brand" href="#top"><img src="https://placehold.co/48x48/d8f18a/183d35?text=N&font=montserrat" alt=""><span><span class="brand-name">northstar<span style="color:#d8f18a">.</span></span><span class="brand-tagline">Make your next move matter.</span></span></a>
          <p>Thoughtful opportunities and honest advice for building a career that feels like yours.</p>
          <a class="text-link" href="mailto:hello@northstarcareers.example">Say hello <span class="arrow">↗</span></a>
        </div>
        <div class="footer-col"><h4>Explore</h4><a href="#jobs">Job Search</a><a href="#skills">Skills assessment</a><a href="#resources">Career resources</a><a href="#stories">Success stories</a></div>
        <div class="footer-col"><h4>Northstar</h4><a href="#how-it-works">Our approach</a><a href="#faq">Help &amp; FAQ</a><a href="mailto:hello@northstarcareers.example">Contact us</a><a href="mailto:partners@northstarcareers.example">For employers</a></div>
        <div class="footer-col"><h4>Stay connected</h4><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram ↗</a><span>hello@northstarcareers.example</span><span>Portland, Oregon</span></div>
      </div>
      <div class="footer-bottom"><span>© 2026 Northstar Careers. All rights reserved.</span><div><a href="mailto:hello@northstarcareers.example?subject=Privacy%20inquiry">Privacy</a><a href="mailto:hello@northstarcareers.example?subject=Terms%20inquiry">Terms</a><span>Made for the journey ahead.</span></div></div>
    </div>
  </footer>
  <script>
    const menuButton = document.querySelector('.menu-toggle');
    const nav = document.querySelector('#primary-nav');
    menuButton.addEventListener('click', () => {
      const open = menuButton.getAttribute('aria-expanded') === 'true';
      menuButton.setAttribute('aria-expanded', String(!open));
      nav.classList.toggle('open', !open);
    });
    nav.addEventListener('click', event => {
      if (event.target.closest('a')) {
        nav.classList.remove('open');
        menuButton.setAttribute('aria-expanded', 'false');
      }
    });

    const search = document.querySelector('#job-search');
    const cards = [...document.querySelectorAll('.job-card')];
    const filters = [...document.querySelectorAll('.filter')];
    let activeFilter = 'all';
    function updateJobs() {
      const keyword = document.querySelector('#keyword').value.trim().toLowerCase();
      const location = document.querySelector('#location').value;
      let count = 0;
      cards.forEach(card => {
        const searchable = (card.dataset.keywords + ' ' + card.dataset.location + ' ' + card.textContent).toLowerCase();
        const matches = (!keyword || searchable.includes(keyword)) &&
          (!location || card.dataset.location === location) &&
          (activeFilter === 'all' || card.dataset.type === activeFilter);
        card.hidden = !matches;
        if (matches) count++;
      });
      document.querySelector('#job-count').textContent = `Showing ${count} ${count === 1 ? 'opportunity' : 'opportunities'}`;
      document.querySelector('#empty-state').hidden = count !== 0;
    }
    search.addEventListener('submit', event => {
      event.preventDefault();
      activeFilter = 'all';
      filters.forEach(button => {
        const selected = button.dataset.filter === 'all';
        button.classList.toggle('active', selected);
        button.setAttribute('aria-pressed', String(selected));
      });
      updateJobs();
      document.querySelector('#jobs').scrollIntoView({behavior:'smooth'});
    });
    filters.forEach(button => button.addEventListener('click', () => {
      activeFilter = button.dataset.filter;
      filters.forEach(item => {
        const selected = item === button;
        item.classList.toggle('active', selected);
        item.setAttribute('aria-pressed', String(selected));
      });
      updateJobs();
    }));
    document.querySelectorAll('.save-job').forEach(button => button.addEventListener('click', () => {
      const saved = button.getAttribute('aria-pressed') !== 'true';
      button.setAttribute('aria-pressed', String(saved));
      button.textContent = saved ? '★' : '☆';
      const title = button.closest('.job-card').querySelector('h3').textContent;
      button.setAttribute('aria-label', `${saved ? 'Unsave' : 'Save'} ${title}`);
    }));

    document.querySelector('#assessment').addEventListener('submit', event => {
      event.preventDefault();
      const strength = document.querySelector('#strength').value;
      const goal = document.querySelector('#goal').value;
      const strengths = {
        creative: 'creative problem-solving',
        analytical: 'analysis and decision-making',
        people: 'communication and collaboration',
        leadership: 'leadership and organization'
      };
      const suggestions = {
        grow: 'Choose one project where you can put this strength to work, then ask a colleague or manager for specific feedback. Document the outcome for your next career conversation.',
        pivot: 'Look for roles that value this transferable strength. Arrange a short conversation with someone in a field that interests you, and ask which skills matter most day to day.',
        search: 'Add an accomplishment that demonstrates this strength to your resume. Use a concrete example and measurable result, then look for openings that call for similar skills.'
      };
      const result = document.querySelector('#assessment-result');
      result.replaceChildren();
      const heading = document.createElement('strong');
      heading.textContent = 'Your next step';
      const text = document.createElement('span');
      text.textContent = `Build on your strength in ${strengths[strength]}. ${suggestions[goal]}`;
      result.append(heading, text);
      result.hidden = false;
    });
  </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:17:00.375Z",
  "url": "https://benchmark.aimac.invalid/c6c6a3f3129678ed0ee18d0fc93bbaec17a0efdb1d895daeeb71b2c7c548abd4.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers 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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by work arrangement\">",
          "target": [
            ".filter-row"
          ]
        }
      ]
    },
    {
      "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 aria-hidden=\"true\">\u2197</span>",
          "target": [
            "a[href$=\"#jobs\"] > span[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by work arrangement\">",
          "target": [
            ".filter-row"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by work arrangement\">",
          "target": [
            ".filter-row"
          ]
        }
      ]
    },
    {
      "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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers 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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers home\"]"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span style=\"color:#86a94b\">.</span>",
          "target": [
            "a[aria-label=\"Northstar Careers home\"] > span > .brand-name > span"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-lime\" type=\"submit\">Search jobs <span class=\"arrow\">\u2197</span></button>",
          "target": [
            ".btn-lime"
          ]
        }
      ]
    },
    {
      "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>Find work that <em>moves you forward.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Good work is out there.</h2>",
                  "target": [
                    "#jobs > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Senior Product Designer</h3>",
                  "target": [
                    "article[data-location=\"remote\"] > h3"
                  ]
                },
                {
                  "html": "<h3>People Operations Manager</h3>",
                  "target": [
                    "article[data-location=\"new york\"] > h3"
                  ]
                },
                {
                  "html": "<h3>Growth Marketing Lead</h3>",
                  "target": [
                    "article[data-location=\"san francisco\"] > h3"
                  ]
                },
                {
                  "html": "<h2>A little direction goes a long way.</h2>",
                  "target": [
                    ".split-copy > h2"
                  ]
                },
                {
                  "html": "<h2>Advice for the road ahead.</h2>",
                  "target": [
                    "#resources > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>A resume that tells your story</h3>",
                  "target": [
                    ".resource-card:nth-child(1) > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h3>Build a network that feels natural</h3>",
                  "target": [
                    ".resource-card:nth-child(2) > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h3>Walk into your next interview ready</h3>",
                  "target": [
                    ".resource-card:nth-child(3) > .resource-body > h3"
                  ]
                },
                {
                  "html": "<h2>Know your strengths.<br>Grow what\u2019s next.</h2>",
                  "target": [
                    ".skill-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Let\u2019s find your focus.</h3>",
                  "target": [
                    "#assessment > h3"
                  ]
                },
                {
                  "html": "<h2>Every path has a story.</h2>",
                  "target": [
                    "#stories > .container > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>It\u2019s okay to take the scenic route.</h3>",
                  "target": [
                    ".story-side-content > h3"
                  ]
                },
                {
                  "html": "<h2>Questions? We\u2019ve got you.</h2>",
                  "target": [
                    ".faq-copy > h2"
                  ]
                },
                {
                  "html": "<h2>Your next chapter starts here.</h2>",
                  "target": [
                    ".cta-inner > div > h2"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Northstar</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Stay connected</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "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": "#e3eee5",
                "bgColor": "#102e28",
                "contrastRatio": 12.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 12.21"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"topbar\">A more meaningful next move starts here. <a href=\"#jobs\">Explore opportunities <span aria-hidden=\"true\">\u2197</span></a></div>",
          "target": [
            ".topbar"
          ]
        }
      ]
    },
    {
      "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=\"keyword\">What are you looking for?</label>",
                  "target": [
                    "label[for=\"keyword\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"keyword\" type=\"search\" placeholder=\"Job title, skill, or company\">",
          "target": [
            "#keyword"
          ]
        }
      ]
    },
    {
      "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/48x48/183d35/d8f18a?text=N&amp;font=montserrat\" alt=\"\">",
          "target": [
            "a[aria-label=\"Northstar Careers 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": "What are you looking for?"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"keyword\">What are you looking for?</label>",
                  "target": [
                    "label[for=\"keyword\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"keyword\" type=\"search\" placeholder=\"Job title, skill, or company\">",
          "target": [
            "#keyword"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"topbar\">A more meaningful next move starts here. <a href=\"#jobs\">Explore opportunities <span aria-hidden=\"true\">\u2197</span></a></div>",
                  "target": [
                    ".topbar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#jobs\">Explore opportunities <span aria-hidden=\"true\">\u2197</span></a>",
          "target": [
            ".topbar > a[href$=\"#jobs\"]"
          ]
        }
      ]
    },
    {
      "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=\"#jobs\">Explore opportunities <span aria-hidden=\"true\">\u2197</span></a>",
          "target": [
            ".topbar > a[href$=\"#jobs\"]"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img class=\"hero-image\" src=\"https://picsum.photos/seed/northstar-work/900/1000\" alt=\"A quiet, inspiring view for thinking about what comes next\">",
          "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": "Where?"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"location\">Where?</label>",
                  "target": [
                    "label[for=\"location\"]"
                  ]
                }
              ],
              "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=\"location\">\n              <option value=\"\">All locations</option>\n              <option value=\"remote\">Remote</option>\n              <option value=\"new york\">New York, NY</option>\n              <option value=\"san francisco\">San Francisco, CA</option>\n            </select>",
          "target": [
            "#location"
          ]
        }
      ]
    },
    {
      "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 can I make my resume stand out?</summary>",
          "target": [
            "#resume-tips > 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": 181.9,
                "height": 44
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (181.9px by 44px, 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=\"Northstar Careers home\">",
          "target": [
            "a[aria-label=\"Northstar Careers home\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "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": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"arrow\">\u2192</span>",
          "target": [
            ".btn-outline > .arrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": {
                "messageKey": "bgOverlap"
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"footer-about\">",
                  "target": [
                    ".footer-about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's contrast ratio could not be determined because of element overlap"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"brand\" href=\"#top\"><img src=\"https://placehold.co/48x48/d8f18a/183d35?text=N&amp;font=montserrat\" alt=\"\"><span><span class=\"brand-name\">northstar<span style=\"color:#d8f18a\">.</span></span><span class=\"brand-tagline\">Make your next move matter.</span></span></a>",
          "target": [
            ".footer-about > .brand[href$=\"#top\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's contrast ratio could not be determined because of element overlap"
        }
      ]
    }
  ],
  "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": "#7b9d42",
                "bgColor": "#f7f7f0",
                "contrastRatio": 2.89,
                "fontSize": "57.6pt (76.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.89 (foreground color: #7b9d42, background color: #f7f7f0, font size: 57.6pt (76.8px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>moves you forward.</em>",
          "target": [
            "em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.89 (foreground color: #7b9d42, background color: #f7f7f0, font size: 57.6pt (76.8px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b7c72",
                "bgColor": "#ffffff",
                "contrastRatio": 4.41,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"search-field\">\n            <label for=\"keyword\">What are you looking for?</label>\n            <input id=\"keyword\" type=\"search\" placeholder=\"Job title, skill, or company\">\n          </div>",
                  "target": [
                    ".search-field:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7c72, background color: #ffffff, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<label for=\"keyword\">What are you looking for?</label>",
          "target": [
            "label[for=\"keyword\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #6b7c72, background color: #ffffff, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b7c72",
                "bgColor": "#ffffff",
                "contrastRatio": 4.41,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"search-field\">",
                  "target": [
                    ".search-field:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7c72, background color: #ffffff, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<label for=\"location\">Where?</label>",
          "target": [
            "label[for=\"location\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.41 (foreground color: #6b7c72, background color: #ffffff, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6d8e42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.75,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"resource-card\">",
                  "target": [
                    ".resource-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-meta\">Resume guide \u00b7 6 min read</span>",
          "target": [
            ".resource-card:nth-child(1) > .resource-body > .resource-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6d8e42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.75,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"resource-card\">",
                  "target": [
                    ".resource-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-meta\">Networking \u00b7 5 min read</span>",
          "target": [
            ".resource-card:nth-child(2) > .resource-body > .resource-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6d8e42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.75,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"resource-card\">",
                  "target": [
                    ".resource-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-meta\">Interviewing \u00b7 7 min read</span>",
          "target": [
            ".resource-card:nth-child(3) > .resource-body > .resource-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6d8e42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.75,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<form class=\"assessment\" id=\"assessment\">",
                  "target": [
                    "#assessment"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-meta\">Your next step \u00b7 30 seconds</span>",
          "target": [
            "#assessment > .resource-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #6d8e42, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#61716a",
                "bgColor": "#e7efdf",
                "contrastRatio": 4.36,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"quote-card\">",
                  "target": [
                    ".quote-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #61716a, background color: #e7efdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>From operations to product management</span>",
          "target": [
            ".person > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #61716a, background color: #e7efdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6d8e42",
                "bgColor": "#f1dfd1",
                "contrastRatio": 2.89,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"story-side\">",
                  "target": [
                    ".story-side"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.89 (foreground color: #6d8e42, background color: #f1dfd1, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"resource-meta\">A career pivot</span>",
          "target": [
            ".story-side-content > .resource-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.89 (foreground color: #6d8e42, background color: #f1dfd1, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#61716a",
                "bgColor": "#f1dfd1",
                "contrastRatio": 3.97,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"story-side\">",
                  "target": [
                    ".story-side"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.97 (foreground color: #61716a, background color: #f1dfd1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>After years in operations, Maya used her transferable skills and a few honest networking conversations to find a new direction. Her advice: stay curious, and don\u2019t underestimate what you already know.</p>",
          "target": [
            ".story-side-content > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.97 (foreground color: #61716a, background color: #f1dfd1, 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": 5872
      },
      {
        "y": 576,
        "height": 5872
      },
      {
        "y": 1152,
        "height": 5872
      },
      {
        "y": 1728,
        "height": 5872
      },
      {
        "y": 2304,
        "height": 5872
      },
      {
        "y": 2880,
        "height": 5872
      },
      {
        "y": 3456,
        "height": 5872
      },
      {
        "y": 4032,
        "height": 5872
      },
      {
        "y": 4608,
        "height": 5872
      },
      {
        "y": 5152,
        "height": 5872
      }
    ],
    "scans": 11,
    "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 "Careers" 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: "Careers"
- Description: Job boards, career advice, resume tips, and professional resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Careers" 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: "Blog", "Job Search", "Skills".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Careers" category. Consider themes similar to: "Current Openings", "Success Stories", "Resume Guide".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "career trajectory", "networking", "skill assessment".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Apply Today", "Upload Resume", "Create Profile".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Careers" sector. Ideas similar but not limited to: "skills assessment".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "popular searches", "skill courses", "hiring trends".
-   **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.