Anthropic Claude Haiku 5.5 – Travel

via Anthropic · Generated

  • AIMAC Debt 5.53
  • Cost $0.012
  • Total Violations 6
  • HTML Size 58 KB
  • Em Dashes 0

Screenshot

View Anthropic Claude Haiku 5.5 Travel page View Live Page

Accessibility Issues Found

6 Serious

  • color-contrast serious 5 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="tag">Culinary</span>
  • link-in-text-block serious 1 instance

    Links must be distinguishable without relying on color

    Example HTML <a href="#faq">Full advisory details →</a>

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">
  <title>Meridian Wayfarer | Journeys Curated. Horizons Within Reach.</title>
  <meta name="description" content="Meridian Wayfarer offers curated travel guides, flight deals, adventure itineraries, cultural experiences, and a free trip planner with currency tools.">
  <style>
    :root {
      --teal: #0f766e;
      --teal-dark: #0b5650;
      --teal-soft: #e6f4f2;
      --sand: #f7f3ec;
      --ink: #1d2a2c;
      --muted: #5b6b6e;
      --line: #e3e8e8;
      --white: #ffffff;
      --accent: #e0893a;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(15, 40, 40, 0.08);
      --container: 1200px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--white);
      line-height: 1.65;
      font-size: 16px;
    }
    h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; line-height: 1.2; color: var(--ink); }
    h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
    h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 0.75rem; }
    h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
    p { margin-bottom: 1rem; color: var(--muted); }
    a { color: var(--teal); text-decoration: none; }
    a:hover { text-decoration: underline; }
    img { max-width: 100%; display: block; }

    .container { width: min(var(--container), 92%); margin: 0 auto; }
    .eyebrow {
      display: inline-block;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.5rem;
    }
    .section { padding: 5.5rem 0; }
    .section-alt { background: var(--sand); }
    .section-head { max-width: 680px; margin-bottom: 3rem; }
    .section-head p { font-size: 1.05rem; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
      border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease;
      font-family: inherit;
    }
    .btn-primary { background: var(--teal); color: var(--white); }
    .btn-primary:hover { background: var(--teal-dark); text-decoration: none; transform: translateY(-1px); }
    .btn-accent { background: var(--accent); color: var(--white); }
    .btn-accent:hover { filter: brightness(0.95); text-decoration: none; }
    .btn-outline { border-color: var(--teal); color: var(--teal); background: transparent; }
    .btn-outline:hover { background: var(--teal); color: var(--white); text-decoration: none; }
    .btn-light { background: var(--white); color: var(--teal-dark); }
    .btn-light:hover { background: var(--teal-soft); text-decoration: none; }
    .btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

    /* ---------- HEADER ---------- */
    .topbar {
      background: var(--teal-dark); color: #d7ecea; font-size: 0.85rem; padding: 0.45rem 0;
    }
    .topbar .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
    .topbar a { color: #d7ecea; }
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
    }
    .header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 1.5rem; }
    .brand { display: flex; align-items: center; gap: 0.75rem; }
    .brand img { width: 48px; height: 48px; border-radius: 12px; }
    .brand-text strong { display: block; font-family: "Playfair Display", serif; font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
    .brand-text span { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
    .brand:hover { text-decoration: none; }

    .primary-nav ul { list-style: none; display: flex; gap: 1.6rem; align-items: center; }
    .primary-nav a { color: var(--ink); font-weight: 600; font-size: 0.93rem; position: relative; }
    .primary-nav a::after {
      content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
      background: var(--teal); transition: width 0.2s ease;
    }
    .primary-nav a:hover { color: var(--teal); text-decoration: none; }
    .primary-nav a:hover::after { width: 100%; }
    .primary-nav a.nav-cta {
      background: var(--teal); color: var(--white); padding: 0.55rem 1.1rem; border-radius: 999px;
    }
    .primary-nav a.nav-cta::after { display: none; }
    .primary-nav a.nav-cta:hover { background: var(--teal-dark); color: var(--white); }

    .menu-toggle {
      display: none; background: none; border: 1px solid var(--line); border-radius: 10px;
      padding: 0.5rem 0.75rem; cursor: pointer; font-size: 1.1rem; color: var(--ink);
    }

    /* ---------- HERO ---------- */
    .hero {
      position: relative; color: var(--white); min-height: 620px;
      display: flex; align-items: center; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(100deg, rgba(8, 40, 40, 0.88) 0%, rgba(11, 86, 80, 0.55) 55%, rgba(11, 86, 80, 0.2) 100%);
    }
    .hero-content { max-width: 720px; padding: 5rem 0 9rem; }
    .hero .eyebrow { color: #9fe3da; }
    .hero h1 { color: var(--white); margin-bottom: 1.25rem; }
    .hero p.lead { font-size: 1.15rem; color: #e4f3f1; max-width: 600px; margin-bottom: 2rem; }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

    .search-card {
      position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%);
      width: min(1040px, 92%); background: var(--white); border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.18); padding: 1.5rem; z-index: 5;
    }
    .search-card form {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr auto; gap: 1rem; align-items: end;
    }
    .field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
    .field input, .field select {
      width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
      font: inherit; color: var(--ink); background: #fbfcfc;
    }
    .field input:focus, .field select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
    .search-card .btn { height: 48px; }

    .hero-spacer { height: 48px; background: var(--white); }

    /* ---------- TRUST STRIP ---------- */
    .trust-strip { padding: 3.5rem 0 2rem; }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
    .stat strong { display: block; font-family: "Playfair Display", serif; font-size: 2.2rem; color: var(--teal); }
    .stat span { font-size: 0.92rem; color: var(--muted); }

    /* ---------- FEATURE GRID ---------- */
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
    .feature {
      background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 2rem; transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .feature-icon {
      width: 52px; height: 52px; border-radius: 14px; background: var(--teal-soft);
      display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.2rem;
    }

    /* ---------- DESTINATIONS ---------- */
    .dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .dest-card {
      position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink);
      aspect-ratio: 4 / 5; color: var(--white);
    }
    .dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .dest-card:hover img { transform: scale(1.05); }
    .dest-overlay {
      position: absolute; inset: auto 0 0 0; padding: 1.5rem;
      background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    }
    .dest-overlay h3 { color: var(--white); margin-bottom: 0.2rem; }
    .dest-overlay p { color: #dfe9e8; font-size: 0.9rem; margin-bottom: 0.6rem; }
    .dest-overlay a { color: #9fe3da; font-weight: 700; font-size: 0.9rem; }

    /* ---------- FLIGHT DEALS ---------- */
    .deal-list { display: grid; gap: 1.25rem; }
    .deal {
      display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1.5rem; align-items: center;
      background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 1.5rem 1.75rem; transition: box-shadow 0.2s ease;
    }
    .deal:hover { box-shadow: var(--shadow); }
    .deal-route { display: flex; align-items: center; gap: 1rem; }
    .deal-route .code { font-family: "Oswald", sans-serif; font-size: 1.6rem; color: var(--ink); letter-spacing: 0.04em; }
    .deal-route .line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px); position: relative; min-width: 60px; }
    .deal-route .line::after { content: "✈"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: var(--teal); background: var(--white); padding: 0 4px; font-size: 1rem; }
    .deal-meta { font-size: 0.9rem; color: var(--muted); }
    .deal-meta span { display: inline-block; margin-right: 1rem; }
    .badge {
      display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 0.25rem 0.6rem; border-radius: 999px; background: #fde9d7; color: #9a4f12; margin-bottom: 0.5rem;
    }
    .badge.green { background: var(--teal-soft); color: var(--teal-dark); }
    .deal-price { text-align: right; min-width: 170px; }
    .deal-price small { display: block; color: var(--muted); font-size: 0.8rem; }
    .deal-price strong { font-family: "Playfair Display", serif; font-size: 1.9rem; color: var(--teal); display: block; margin-bottom: 0.5rem; }
    .deals-footer { margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
    .deals-footer p { margin: 0; font-size: 0.92rem; }

    /* ---------- ADVENTURE ---------- */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .split-media { position: relative; }
    .split-media img.main { border-radius: 20px; box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
    .split-media img.inset {
      position: absolute; right: -24px; bottom: -24px; width: 42%; border-radius: 16px;
      border: 6px solid var(--white); box-shadow: var(--shadow); aspect-ratio: 1 / 1; object-fit: cover;
    }
    .checklist { list-style: none; margin: 1.5rem 0 2rem; display: grid; gap: 0.8rem; }
    .checklist li { position: relative; padding-left: 2rem; color: var(--muted); }
    .checklist li::before {
      content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
      background: var(--teal); color: var(--white); font-size: 0.8rem; display: grid; place-items: center; font-weight: 700;
    }
    .level-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.93rem; }
    .level-table th, .level-table td { text-align: left; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--line); }
    .level-table th { color: var(--ink); font-weight: 700; }
    .level-table td { color: var(--muted); }

    /* ---------- CULTURE ---------- */
    .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
    .culture-card {
      background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
      display: flex; flex-direction: column;
    }
    .culture-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .culture-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
    .culture-body p { font-size: 0.93rem; }
    .culture-body .btn { margin-top: auto; align-self: flex-start; }
    .culture-body .tag { font-size: 0.78rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
    .culture-cta {
      margin-top: 3rem; background: var(--teal-dark); color: var(--white); border-radius: 20px;
      padding: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
    }
    .culture-cta h3 { color: var(--white); margin: 0 0 0.4rem; font-size: 1.7rem; }
    .culture-cta p { color: #cde8e4; margin: 0; }

    /* ---------- MAIN + SIDEBAR ---------- */
    .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; align-items: start; }
    .sidebar { position: sticky; top: 110px; display: grid; gap: 1.5rem; }
    .widget { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
    .widget h4 { font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
    .widget-spotlight img { border-radius: 10px; margin-bottom: 1rem; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
    .widget-spotlight p { font-size: 0.92rem; }
    .hack-list { list-style: none; display: grid; gap: 0.9rem; counter-reset: hack; }
    .hack-list li { counter-increment: hack; display: grid; grid-template-columns: 32px 1fr; gap: 0.75rem; font-size: 0.92rem; color: var(--muted); }
    .hack-list li::before {
      content: counter(hack); width: 32px; height: 32px; border-radius: 10px; background: var(--teal-soft);
      color: var(--teal-dark); font-weight: 700; display: grid; place-items: center;
    }
    .hack-list strong { color: var(--ink); display: block; font-size: 0.97rem; }
    .weather { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; text-align: center; }
    .weather div { background: var(--sand); border-radius: 10px; padding: 0.6rem 0.2rem; font-size: 0.8rem; color: var(--muted); }
    .weather strong { display: block; color: var(--ink); font-size: 0.95rem; margin-top: 0.25rem; }
    .advisory { border-left: 4px solid var(--teal); }
    .advisory p { font-size: 0.9rem; margin-bottom: 0.6rem; }
    .advisory .status { font-weight: 700; color: var(--teal-dark); }

    /* ---------- CURRENCY / PLANNER ---------- */
    .planner-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
    .converter {
      background: var(--white); border-radius: 20px; padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--line);
    }
    .converter h3 { margin-bottom: 0.25rem; }
    .converter .note { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
    .conv-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: end; }
    .conv-row .field { margin-bottom: 1rem; }
    .swap-btn {
      width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--teal-soft);
      color: var(--teal-dark); font-size: 1.1rem; cursor: pointer; margin-bottom: 1rem; transition: transform 0.3s ease;
    }
    .swap-btn:hover { transform: rotate(180deg); }
    .conv-result {
      background: var(--teal-soft); border-radius: 12px; padding: 1.25rem; text-align: center; margin-top: 0.5rem;
    }
    .conv-result span { font-size: 0.85rem; color: var(--muted); display: block; }
    .conv-result strong { font-family: "Playfair Display", serif; font-size: 2rem; color: var(--teal-dark); }
    .rate-line { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 0.75rem; }
    .planner-list { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.5rem; }
    .planner-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; }
    .planner-list .pi {
      width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--line);
      display: grid; place-items: center; font-size: 1.2rem;
    }
    .planner-list strong { display: block; color: var(--ink); }
    .planner-list span { font-size: 0.93rem; color: var(--muted); }

    /* ---------- REVIEWS ---------- */
    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
    .review {
      background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem;
      display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .stars { color: #f2a93b; letter-spacing: 0.15em; font-size: 1rem; margin-bottom: 0.9rem; }
    .review blockquote { font-size: 0.97rem; color: var(--ink); font-style: italic; margin-bottom: 1.5rem; flex: 1; }
    .review-author { display: flex; align-items: center; gap: 0.85rem; }
    .review-author img { width: 48px; height: 48px; border-radius: 50%; }
    .review-author strong { display: block; color: var(--ink); font-size: 0.95rem; }
    .review-author span { font-size: 0.82rem; color: var(--muted); }
    .review-summary {
      margin-top: 2.5rem; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;
      padding: 1.5rem; background: var(--sand); border-radius: var(--radius); text-align: center;
    }
    .review-summary strong { font-family: "Playfair Display", serif; font-size: 2rem; color: var(--teal-dark); display: block; }
    .review-summary span { font-size: 0.9rem; color: var(--muted); }

    /* ---------- FAQ ---------- */
    .faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
    .faq-list { display: grid; gap: 0.9rem; }
    .faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
    .faq-item summary {
      list-style: none; cursor: pointer; padding: 1.2rem 1.4rem; font-weight: 700; color: var(--ink);
      display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+"; font-size: 1.4rem; color: var(--teal); transition: transform 0.2s ease; line-height: 1;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item[open] { border-color: var(--teal); box-shadow: 0 6px 18px rgba(15,118,110,0.08); }
    .faq-item .answer { padding: 0 1.4rem 1.3rem; }
    .faq-item .answer p { margin: 0; font-size: 0.95rem; }

    /* ---------- NEWSLETTER / CTA ---------- */
    .cta-band {
      background: linear-gradient(120deg, var(--teal-dark), var(--teal));
      color: var(--white); padding: 4.5rem 0;
    }
    .cta-band .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
    .cta-band h2 { color: var(--white); }
    .cta-band p { color: #d5efeb; }
    .subscribe { display: flex; gap: 0.6rem; }
    .subscribe input {
      flex: 1; padding: 0.95rem 1.1rem; border-radius: 999px; border: none; font: inherit;
    }
    .subscribe input:focus { outline: 3px solid var(--accent); }
    .subscribe .btn { white-space: nowrap; }
    .form-note { font-size: 0.8rem; color: #bfe3dd; margin-top: 0.6rem; }

    /* ---------- FOOTER ---------- */
    .site-footer { background: #0f2526; color: #b7c9c7; padding: 4.5rem 0 1.5rem; font-size: 0.93rem; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; margin-bottom: 3rem; }
    .site-footer h4 { color: var(--white); font-family: "Open Sans", sans-serif; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
    .site-footer ul { list-style: none; display: grid; gap: 0.6rem; }
    .site-footer a { color: #b7c9c7; }
    .site-footer a:hover { color: #9fe3da; }
    .footer-brand strong { font-family: "Playfair Display", serif; color: var(--white); font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
    .footer-brand p { color: #93a9a7; margin-bottom: 1.2rem; }
    .socials { display: flex; gap: 0.6rem; }
    .socials a {
      width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2b4647;
      display: grid; place-items: center; color: #d7ecea; font-weight: 700; font-size: 0.85rem;
    }
    .socials a:hover { background: var(--teal); border-color: var(--teal); color: var(--white); text-decoration: none; }
    .footer-bottom {
      border-top: 1px solid #1f3a3b; padding-top: 1.5rem; display: flex; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: #8ea4a2;
    }
    .footer-bottom nav { display: flex; gap: 1.2rem; }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 1080px) {
      .primary-nav ul { gap: 1.1rem; }
      .primary-nav a { font-size: 0.87rem; }
      .culture-grid { grid-template-columns: repeat(2, 1fr); }
      .content-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    }
    @media (max-width: 960px) {
      .menu-toggle { display: inline-block; }
      .primary-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
        border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
      }
      .primary-nav.open { display: block; }
      .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0; }
      .primary-nav li a { display: block; padding: 0.9rem 4%; border-top: 1px solid var(--line); }
      .primary-nav a::after { display: none; }
      .primary-nav a.nav-cta { margin: 0.75rem 4%; text-align: center; border-radius: 999px; display: block; }
      .search-card form { grid-template-columns: 1fr 1fr; }
      .search-card .btn { grid-column: span 2; }
      .search-card { position: relative; left: auto; bottom: auto; transform: none; width: 92%; margin: -60px auto 0; }
      .hero-content { padding-bottom: 3rem; }
      .hero { min-height: auto; }
      .hero-spacer { display: none; }
      .feature-grid, .review-grid, .dest-grid { grid-template-columns: repeat(2, 1fr); }
      .split, .planner-wrap, .faq-wrap, .cta-band .container { grid-template-columns: 1fr; gap: 2.5rem; }
      .trust-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .deal { grid-template-columns: 1fr; }
      .deal-price { text-align: left; }
    }
    @media (max-width: 640px) {
      .section { padding: 4rem 0; }
      .feature-grid, .review-grid, .dest-grid, .culture-grid { grid-template-columns: 1fr; }
      .search-card form { grid-template-columns: 1fr; }
      .search-card .btn { grid-column: auto; }
      .sidebar { grid-template-columns: 1fr; }
      .split-media img.inset { display: none; }
      .footer-grid { grid-template-columns: 1fr; }
      .subscribe { flex-direction: column; }
      .topbar .container { justify-content: center; text-align: center; }
      .conv-row { grid-template-columns: 1fr; }
      .swap-btn { justify-self: center; margin: 0; }
      .weather { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>

  <!-- TOP BAR -->
  <div class="topbar">
    <div class="container">
      <span>Free 24/7 concierge line: +1 (800) 555-0142 &middot; Fare alerts now live</span>
      <span><a href="#faq">Help Center</a> &nbsp;|&nbsp; <a href="#bookings">Manage a Booking</a></span>
    </div>
  </div>

  <!-- HEADER -->
  <header class="site-header" id="top">
    <div class="container header-inner">
      <a href="#top" class="brand" aria-label="Meridian Wayfarer home">
        <img src="https://placehold.co/96x96/0f766e/ffffff?text=MW&font=montserrat" alt="Meridian Wayfarer logo placeholder" width="48" height="48">
        <div class="brand-text">
          <strong>Meridian Wayfarer</strong>
          <span>Journeys Curated. Horizons Within Reach.</span>
        </div>
      </a>

      <button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav" aria-label="Toggle navigation">&#9776; Menu</button>

      <nav class="primary-nav" id="primary-nav" aria-label="Primary">
        <ul>
          <li><a href="#destinations">Destinations</a></li>
          <li><a href="#deals">Flight Deals</a></li>
          <li><a href="#adventures">Adventure Travel</a></li>
          <li><a href="#culture">Cultural Experiences</a></li>
          <li><a href="#planner">Trip Planner</a></li>
          <li><a href="#reviews">Reviews</a></li>
          <li><a href="#bookings" class="nav-cta">Bookings</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>

    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <img class="hero-bg" src="https://picsum.photos/1920/1080" alt="Panoramic mountain landscape at sunrise">
      <div class="container hero-content">
        <span class="eyebrow">Independent travel guides &middot; Since 2009</span>
        <h1 id="hero-title">Travel slower. See further. Book smarter.</h1>
        <p class="lead">Meridian Wayfarer pairs vetted destination guides, live airfare intelligence, and hand-built itineraries with a team of travelers who have actually been there. Whether you are planning a first international trip or your fortieth, we help you spend less time searching and more time exploring.</p>
        <div class="hero-actions">
          <a href="#deals" class="btn btn-accent">Explore Flight Deals</a>
          <a href="#planner" class="btn btn-light">Launch Trip Planner</a>
        </div>
      </div>

      <!-- BOOKING SEARCH -->
      <div class="search-card" id="bookings" role="search">
        <form onsubmit="event.preventDefault(); this.querySelector('button').textContent='Searching...';">
          <div class="field">
            <label for="s-dest">Destination</label>
            <input id="s-dest" type="text" placeholder="City, country or region" value="Lisbon, Portugal">
          </div>
          <div class="field">
            <label for="s-depart">Depart</label>
            <input id="s-depart" type="date" value="2025-09-12">
          </div>
          <div class="field">
            <label for="s-return">Return</label>
            <input id="s-return" type="date" value="2025-09-22">
          </div>
          <div class="field">
            <label for="s-travelers">Travelers</label>
            <select id="s-travelers">
              <option>1 Adult</option>
              <option selected>2 Adults</option>
              <option>2 Adults, 1 Child</option>
              <option>Family (2+2)</option>
              <option>Group (6+)</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary">Search Trips</button>
        </form>
      </div>
    </section>
    <div class="hero-spacer"></div>

    <!-- TRUST STRIP -->
    <section class="trust-strip" aria-label="Key statistics">
      <div class="container trust-grid">
        <div class="stat"><strong>2.4M+</strong><span>Trips planned by our community</span></div>
        <div class="stat"><strong>180+</strong><span>Countries covered in our guides</span></div>
        <div class="stat"><strong>4.9/5</strong><span>Average traveler rating</span></div>
        <div class="stat"><strong>24/7</strong><span>Multilingual concierge support</span></div>
      </div>
    </section>

    <!-- FEATURE GRID -->
    <section class="section" aria-labelledby="why-title">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Why Meridian Wayfarer</span>
          <h2 id="why-title">Planning tools built around how people actually travel</h2>
          <p>Most booking platforms show you a list of prices and leave the rest to you. We combine fare data, verified destination knowledge, and protection policies so every decision is easier to make and easier to stand behind.</p>
        </div>
        <div class="feature-grid">
          <article class="feature">
            <div class="feature-icon" aria-hidden="true">&#9992;</div>
            <h3>Layover-Smart Routing</h3>
            <p>Our search engine scores every itinerary by layover length, terminal transfers, and connection reliability. We flag tight connections and recommend airports with the most forgiving transit times.</p>
            <a href="#deals">View routing guide &rarr;</a>
          </article>
          <article class="feature">
            <div class="feature-icon" aria-hidden="true">&#128737;</div>
            <h3>Verified Travel Advisories</h3>
            <p>We monitor government travel advisories, entry requirements, and visa rules across more than 180 countries. Each destination guide is reviewed quarterly so you always know what to expect before you depart.</p>
            <a href="#destinations">Check destinations &rarr;</a>
          </article>
          <article class="feature">
            <div class="feature-icon" aria-hidden="true">&#128188;</div>
            <h3>Flexible Booking Protection</h3>
            <p>Change dates, rebook a missed connection, or cancel for a covered reason with our optional protection plan. Our claims team works directly with airlines and hotels so you do not have to navigate it alone.</p>
            <a href="#faq">Read protection terms &rarr;</a>
          </article>
        </div>
      </div>
    </section>

    <!-- DESTINATIONS -->
    <section class="section section-alt" id="destinations" aria-labelledby="dest-title">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Destinations</span>
          <h2 id="dest-title">Featured destinations this season</h2>
          <p>Each destination guide is written by regional specialists and updated with seasonal pricing, neighborhood breakdowns, transit notes, and local etiquette. Start with a place that has been calling your name.</p>
        </div>
        <div class="dest-grid">
          <article class="dest-card">
            <img src="https://placehold.co/800x1000/0f766e/ffffff?text=Lisbon&font=playfair+display" alt="Placeholder image of Lisbon">
            <div class="dest-overlay">
              <h3>Lisbon, Portugal</h3>
              <p>Tiled façades, tram lines, and coastal light. Best visited April to June and September to October.</p>
              <a href="#destinations">Read Guide &rarr;</a>
            </div>
          </article>
          <article class="dest-card">
            <img src="https://placehold.co/800x1000/134e4a/ffffff?text=Kyoto&font=playfair+display" alt="Placeholder image of Kyoto">
            <div class="dest-overlay">
              <h3>Kyoto, Japan</h3>
              <p>Temple districts, seasonal kaiseki, and early-morning bamboo groves. Book cherry blossom stays early.</p>
              <a href="#destinations">Read Guide &rarr;</a>
            </div>
          </article>
          <article class="dest-card">
            <img src="https://placehold.co/800x1000/1d2a2c/ffffff?text=Patagonia&font=playfair+display" alt="Placeholder image of Patagonia">
            <div class="dest-overlay">
              <h3>Patagonia, Chile &amp; Argentina</h3>
              <p>Glacier trails, wind-swept steppe, and remote lodges. Plan around weather windows and limited fuel stops.</p>
              <a href="#destinations">Read Guide &rarr;</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- FLIGHT DEALS + SIDEBAR LAYOUT -->
    <section class="section" id="deals" aria-labelledby="deals-title">
      <div class="container content-layout">

        <div class="main-column">
          <div class="section-head">
            <span class="eyebrow">Flight Deals</span>
            <h2 id="deals-title">Fare drops worth booking this week</h2>
            <p>Our fare monitoring tracks more than 400 airlines and refreshes prices several times per day. The deals below were verified at the time of publication, but airfare moves quickly. Prices include taxes and carrier fees for one adult in economy unless noted.</p>
          </div>

          <div class="deal-list">
            <article class="deal">
              <div>
                <span class="badge">Lowest in 90 days</span>
                <div class="deal-route">
                  <span class="code">JFK</span>
                  <span class="line"></span>
                  <span class="code">LIS</span>
                </div>
                <div class="deal-meta" style="margin-top:0.75rem;">
                  <span>Non-stop, 6h 55m</span>
                  <span>Economy, 1 checked bag</span>
                </div>
              </div>
              <div class="deal-meta">
                <p style="margin:0 0 0.4rem;"><strong>Dates:</strong> Sep 12 to Sep 22</p>
                <p style="margin:0;"><strong>Carrier:</strong> TAP Air Portugal</p>
              </div>
              <div class="deal-price">
                <small>from</small>
                <strong>$689</strong>
                <a href="#bookings" class="btn btn-primary btn-sm">Reserve Seat</a>
              </div>
            </article>

            <article class="deal">
              <div>
                <span class="badge green">Best value</span>
                <div class="deal-route">
                  <span class="code">LAX</span>
                  <span class="line"></span>
                  <span class="code">NRT</span>
                </div>
                <div class="deal-meta" style="margin-top:0.75rem;">
                  <span>1 stop in Seattle, 13h 40m</span>
                  <span>Layover 1h 35m</span>
                </div>
              </div>
              <div class="deal-meta">
                <p style="margin:0 0 0.4rem;"><strong>Dates:</strong> Oct 3 to Oct 14</p>
                <p style="margin:0;"><strong>Carrier:</strong> Alaska Airlines</p>
              </div>
              <div class="deal-price">
                <small>from</small>
                <strong>$812</strong>
                <a href="#bookings" class="btn btn-primary btn-sm">Reserve Seat</a>
              </div>
            </article>

            <article class="deal">
              <div>
                <span class="badge">Limited seats</span>
                <div class="deal-route">
                  <span class="code">ORD</span>
                  <span class="line"></span>
                  <span class="code">SCL</span>
                </div>
                <div class="deal-meta" style="margin-top:0.75rem;">
                  <span>1 stop in Lima, 11h 20m</span>
                  <span>Layover 2h 10m</span>
                </div>
              </div>
              <div class="deal-meta">
                <p style="margin:0 0 0.4rem;"><strong>Dates:</strong> Nov 5 to Nov 19</p>
                <p style="margin:0;"><strong>Carrier:</strong> LATAM Airlines</p>
              </div>
              <div class="deal-price">
                <small>from</small>
                <strong>$934</strong>
                <a href="#bookings" class="btn btn-primary btn-sm">Reserve Seat</a>
              </div>
            </article>
          </div>

          <div class="deals-footer">
            <p>Deals are subject to availability and may change without notice. Fare rules apply.</p>
            <a href="#bookings" class="btn btn-outline">Get Quote for Custom Route</a>
          </div>
        </div>

        <!-- SIDEBAR -->
        <aside class="sidebar" aria-label="Sidebar">
          <div class="widget widget-spotlight">
            <span class="eyebrow">Destination Spotlight</span>
            <img src="https://picsum.photos/800/500" alt="Spotlight photo of a coastal town">
            <h4>Oaxaca, Mexico</h4>
            <p>Mezcal distilleries, Zapotec ruins, and weekend markets make Oaxaca one of the most rewarding slow-travel destinations in the Americas. Stay at least five nights to explore the surrounding valleys.</p>
            <a href="#destinations" class="btn btn-outline btn-sm">Read Spotlight Guide</a>
          </div>

          <div class="widget">
            <h4>Travel Hacks</h4>
            <ol class="hack-list">
              <li><div><strong>Fly midweek</strong>Tuesday and Wednesday departures are often 15 to 25 percent cheaper than weekend flights.</div></li>
              <li><div><strong>Use a 24-hour window</strong>Most jurisdictions allow free cancellation within 24 hours of booking. Check before you pay.</div></li>
              <li><div><strong>Pack a carry-on only</strong>A single personal item and carry-on can save baggage fees and reduce connection risk.</div></li>
              <li><div><strong>Set fare alerts</strong>Track your route for two to three weeks before departure for the best pricing window.</div></li>
            </ol>
          </div>

          <div class="widget">
            <h4>5-Day Forecast: Lisbon</h4>
            <div class="weather">
              <div>Mon<strong>24&deg;</strong></div>
              <div>Tue<strong>25&deg;</strong></div>
              <div>Wed<strong>22&deg;</strong></div>
              <div>Thu<strong>21&deg;</strong></div>
            </div>
            <p style="font-size:0.8rem; margin:0.75rem 0 0;">Forecast updated daily. Coastal breezes are common after 4 p.m.</p>
          </div>

          <div class="widget advisory">
            <h4>Travel Advisory Snapshot</h4>
            <p><span class="status">Portugal:</span> Level 1, Exercise normal precautions. Passport must be valid for three months beyond departure.</p>
            <p><span class="status">Japan:</span> Level 1, Exercise normal precautions. Check current entry and tourist tax details.</p>
            <a href="#faq">Full advisory details &rarr;</a>
          </div>
        </aside>
      </div>
    </section>

    <!-- ADVENTURE TRAVEL -->
    <section class="section section-alt" id="adventures" aria-labelledby="adv-title">
      <div class="container split">
        <div class="split-media">
          <img class="main" src="https://picsum.photos/900/950" alt="Hiker crossing a rocky ridge above a valley">
          <img class="inset" src="https://picsum.photos/400/400" alt="Close view of a trail marker">
        </div>
        <div>
          <span class="eyebrow">Adventure Travel</span>
          <h2 id="adv-title">Trails, rapids, and ridgelines, planned properly</h2>
          <p>Adventure travel rewards preparation. A glacier trek in Iceland or a multi-day trail in the Dolomites demands different gear, fitness assumptions, and seasonal awareness than a city break. Our adventure itineraries are built by certified guides who factor in daylight hours, permit timelines, and safe pace for the group.</p>
          <p>Every adventure package includes a pre-departure briefing, emergency contact protocols, and a clear breakdown of what is included. We recommend reviewing the physical rating and minimum experience level before you commit to any itinerary.</p>
          <ul class="checklist">
            <li>Certified local guides with wilderness first-aid training</li>
            <li>Permit and park-entry coordination handled in advance</li>
            <li>Gear lists tailored to altitude, climate, and terrain</li>
            <li>Small group sizes capped at eight participants</li>
          </ul>
          <table class="level-table" aria-label="Adventure difficulty ratings">
            <thead>
              <tr><th>Trip</th><th>Difficulty</th><th>Best Season</th></tr>
            </thead>
            <tbody>
              <tr><td>Dolomites Via Ferrata Week</td><td>Moderate to Hard</td><td>June to September</td></tr>
              <tr><td>Icelandic Glacier Expedition</td><td>Moderate</td><td>May to September</td></tr>
              <tr><td>Costa Rica Canopy &amp; Rainforest</td><td>Easy to Moderate</td><td>December to April</td></tr>
            </tbody>
          </table>
          <div style="display:flex; gap:1rem; flex-wrap:wrap;">
            <a href="#adventures" class="btn btn-primary">Read Guide</a>
            <a href="#planner" class="btn btn-outline">Get Quote</a>
          </div>
        </div>
      </div>
    </section>

    <!-- CULTURAL EXPERIENCES -->
    <section class="section" id="culture" aria-labelledby="culture-title">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Cultural Experiences</span>
          <h2 id="culture-title">Meaningful encounters with local life</h2>
          <p>Our cultural experiences are led by residents, artisans, and historians who share context you will not find in a standard guidebook. Each experience is capped in size to keep the focus on conversation, craft, and respectful participation in local traditions.</p>
        </div>

        <div class="culture-grid">
          <article class="culture-card">
            <img src="https://placehold.co/600x450/0f766e/ffffff?text=Cooking+Class&font=lato" alt="Placeholder for a cooking class experience">
            <div class="culture-body">
              <span class="tag">Culinary</span>
              <h3>Home Kitchen Cooking Class</h3>
              <p>Learn regional recipes from a family cook in Oaxaca, including mole preparation and hand-pressed tortillas.</p>
              <a href="#culture" class="btn btn-outline btn-sm">Read Guide</a>
            </div>
          </article>
          <article class="culture-card">
            <img src="https://placehold.co/600x450/e0893a/ffffff?text=Tea+Ceremony&font=lato" alt="Placeholder for a tea ceremony experience">
            <div class="culture-body">
              <span class="tag">Tradition</span>
              <h3>Tea Ceremony in Uji</h3>
              <p>Sit with a licensed tea master near Kyoto and learn the etiquette, history, and seasonal rhythms of matcha.</p>
              <a href="#culture" class="btn btn-outline btn-sm">Read Guide</a>
            </div>
          </article>
          <article class="culture-card">
            <img src="https://placehold.co/600x450/134e4a/ffffff?text=Fado+Night&font=lato" alt="Placeholder for a fado music evening">
            <div class="culture-body">
              <span class="tag">Music</span>
              <h3>Fado Evening in Alfama</h3>
              <p>Attend an intimate evening in a historic house where fado singers perform in a setting built for listening.</p>
              <a href="#culture" class="btn btn-outline btn-sm">Read Guide</a>
            </div>
          </article>
          <article class="culture-card">
            <img src="https://placehold.co/600x450/1d2a2c/ffffff?text=Pottery+Studio&font=lato" alt="Placeholder for a pottery workshop">
            <div class="culture-body">
              <span class="tag">Craft</span>
              <h3>Artisan Pottery Workshop</h3>
              <p>Spend an afternoon at a working studio, shaping and glazing pieces with a master potter who has taught for decades.</p>
              <a href="#culture" class="btn btn-outline btn-sm">Read Guide</a>
            </div>
          </article>
        </div>

        <div class="culture-cta">
          <div>
            <h3>Want a cultural itinerary built around you?</h3>
            <p>Share your interests and our specialists will assemble a custom plan with private guides, reservations, and transfers.</p>
          </div>
          <a href="#planner" class="btn btn-light">Get Quote</a>
        </div>
      </div>
    </section>

    <!-- TRIP PLANNER + CURRENCY CONVERTER -->
    <section class="section section-alt" id="planner" aria-labelledby="planner-title">
      <div class="container planner-wrap">
        <div>
          <span class="eyebrow">Trip Planner</span>
          <h2 id="planner-title">Budget with confidence before you leave home</h2>
          <p>Currency movements can quietly change the cost of a trip. Use the converter to estimate prices in your destination's currency, then compare against the budget you set during planning. Our rates are indicative and refreshed regularly for planning purposes.</p>
          <p>Pair the converter with a daily budget target and a cash-versus-card plan. Many travelers find that a no-foreign-fee card and a small reserve of local cash covers most situations, from market stalls to rural transit.</p>
          <ul class="planner-list">
            <li><div class="pi" aria-hidden="true">&#128176;</div><div><strong>Budget Builder</strong><span>Break your trip into flights, lodging, food, transit, and activities for a realistic total.</span></div></li>
            <li><div class="pi" aria-hidden="true">&#128197;</div><div><strong>Itinerary Timeline</strong><span>Lay out each day with check-in times, reservations, and buffer windows for delays.</span></div></li>
            <li><div class="pi" aria-hidden="true">&#128203;</div><div><strong>Document Checklist</strong><span>Passport validity, visa requirements, and travel insurance reminders sent automatically.</span></div></li>
          </ul>
        </div>

        <div class="converter" aria-labelledby="conv-title">
          <h3 id="conv-title">Currency Converter</h3>
          <p class="note">Indicative mid-market rates for planning purposes. Your bank or card issuer will apply the final rate.</p>

          <div class="conv-row">
            <div class="field">
              <label for="amount">Amount</label>
              <input id="amount" type="number" min="0" value="500" step="any">
            </div>
            <button class="swap-btn" id="swap" type="button" aria-label="Swap currencies">&#8644;</button>
            <div class="field">
              <label for="from">From</label>
              <select id="from">
                <option value="USD" selected>USD - US Dollar</option>
                <option value="EUR">EUR - Euro</option>
                <option value="GBP">GBP - British Pound</option>
                <option value="JPY">JPY - Japanese Yen</option>
                <option value="MXN">MXN - Mexican Peso</option>
                <option value="CLP">CLP - Chilean Peso</option>
              </select>
            </div>
          </div>

          <div class="field">
            <label for="to">To</label>
            <select id="to">
              <option value="USD">USD - US Dollar</option>
              <option value="EUR" selected>EUR - Euro</option>
              <option value="GBP">GBP - British Pound</option>
              <option value="JPY">JPY - Japanese Yen</option>
              <option value="MXN">MXN - Mexican Peso</option>
              <option value="CLP">CLP - Chilean Peso</option>
            </select>
          </div>

          <div class="conv-result" aria-live="polite">
            <span id="conv-from-label">500 USD equals</span>
            <strong id="conv-output">460.00 EUR</strong>
          </div>
          <p class="rate-line" id="rate-line">1 USD = 0.9200 EUR</p>
        </div>
      </div>
    </section>

    <!-- REVIEWS -->
    <section class="section" id="reviews" aria-labelledby="reviews-title">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Traveler Reviews</span>
          <h2 id="reviews-title">Stories from the road</h2>
          <p>Every review is collected after a completed trip and verified against booking records. We publish both praise and constructive feedback because honest information is what helps the next traveler plan well.</p>
        </div>

        <div class="review-grid">
          <article class="review">
            <div class="stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
            <blockquote>"The layover guidance alone saved our honeymoon. The app flagged a tight connection in Frankfurt, rebooking support kicked in within minutes, and we never missed a beat."</blockquote>
            <div class="review-author">
              <img src="https://i.pravatar.cc/96?u=maya-reyes" alt="Avatar of Maya Reyes" width="48" height="48">
              <div><strong>Maya Reyes</strong><span>Honeymoon in Lisbon and Porto</span></div>
            </div>
          </article>
          <article class="review">
            <div class="stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
            <blockquote>"I booked a Kyoto tea ceremony through Meridian Wayfarer and it became the highlight of our trip. The guide spoke with us for nearly two hours about the history of the ritual."</blockquote>
            <div class="review-author">
              <img src="https://i.pravatar.cc/96?u=daniel-okafor" alt="Avatar of Daniel Okafor" width="48" height="48">
              <div><strong>Daniel Okafor</strong><span>Japan, three weeks</span></div>
            </div>
          </article>
          <article class="review">
            <div class="stars" aria-label="4 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
            <blockquote>"The Patagonia adventure was demanding and beautifully organized. Gear lists were accurate, and the guides adjusted our route when weather shifted. I docked one star only because our bus arrived late."</blockquote>
            <div class="review-author">
              <img src="https://i.pravatar.cc/96?u=lena-fischer" alt="Avatar of Lena Fischer" width="48" height="48">
              <div><strong>Lena Fischer</strong><span>Torres del Paine trek</span></div>
            </div>
          </article>
        </div>

        <div class="review-summary">
          <div><strong>4.9 / 5</strong><span>Average from 12,400+ verified reviews</span></div>
          <div><strong>96%</strong><span>Would book with us again</span></div>
          <div><strong>3 hrs</strong><span>Average response time for concierge requests</span></div>
        </div>
      </div>
    </section>

    <!-- FAQ -->
    <section class="section section-alt" id="faq" aria-labelledby="faq-title">
      <div class="container faq-wrap">
        <div>
          <span class="eyebrow">Help Center</span>
          <h2 id="faq-title">Questions travelers ask most</h2>
          <p>Can not find your answer here? Our concierge team responds to most messages within three hours, and phone support is available around the clock for active bookings.</p>
          <a href="#footer-contact" class="btn btn-primary">Contact Concierge</a>
        </div>

        <div class="faq-list">
          <details class="faq-item" open>
            <summary>How does layover protection work?</summary>
            <div class="answer">
              <p>If a delay or cancellation causes you to miss a connection on a booking made through us, our agents rebook you on the next available itinerary at no extra cost. Protection coverage applies to connections under our minimum-time standards and requires the optional protection plan.</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>When is the best time to book international flights?</summary>
            <div class="answer">
              <p>For most long-haul routes, booking between two and six months before departure offers the most consistent pricing. Domestic flights are often best booked three to eight weeks out. Our fare alerts notify you when prices fall below your target.</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>Do I need a visa or travel authorization?</summary>
            <div class="answer">
              <p>Entry requirements depend on your nationality, destination, and purpose of travel. Our destination guides list current visa and electronic authorization rules, but you should always verify requirements with the official embassy or consulate before departure.</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>Can I change or cancel my booking after purchase?</summary>
            <div class="answer">
              <p>Changes and cancellations depend on the fare class and carrier rules. Refundable fares can be cancelled at any time for a full refund. Non-refundable fares may be eligible for credit or change fees. Optional Flexible Protection allows changes for a wider range of reasons.</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>Are adventure trips suitable for beginners?</summary>
            <div class="answer">
              <p>Many of our adventure itineraries are rated for beginners, including easy to moderate hikes and guided canopy experiences. Each listing shows a physical rating, minimum fitness recommendations, and experience requirements so you can choose the right fit.</p>
            </div>
          </details>
        </div>
      </div>
    </section>

    <!-- NEWSLETTER CTA -->
    <section class="cta-band" aria-labelledby="news-title">
      <div class="container">
        <div>
          <h2 id="news-title">Receive weekly fare drops and guide updates</h2>
          <p>Join more than 180,000 travelers who receive our Thursday digest: curated deals, seasonal destination notes, and practical tips from our editorial team. Unsubscribe at any time.</p>
        </div>
        <div>
          <form class="subscribe" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed';">
            <label for="email" class="sr-only" style="position:absolute;left:-9999px;">Email address</label>
            <input id="email" type="email" placeholder="you@example.com" required>
            <button type="submit" class="btn btn-accent">Subscribe</button>
          </form>
          <p class="form-note">We respect your inbox. No spam, and no sharing of your data.</p>
        </div>
      </div>
    </section>

  </main>

  <!-- FOOTER -->
  <footer class="site-footer" id="footer-contact">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <strong>Meridian Wayfarer</strong>
          <p>Independent travel guides, flight intelligence, and curated experiences since 2009. Operating from Lisbon and Chicago with partners in more than 60 countries.</p>
          <div class="socials" aria-label="Social media">
            <a href="#" aria-label="Facebook">Fb</a>
            <a href="#" aria-label="Instagram">Ig</a>
            <a href="#" aria-label="YouTube">Yt</a>
            <a href="#" aria-label="Pinterest">Pn</a>
          </div>
        </div>

        <div>
          <h4>Explore</h4>
          <ul>
            <li><a href="#destinations">Destinations</a></li>
            <li><a href="#deals">Flight Deals</a></li>
            <li><a href="#adventures">Adventure Travel</a></li>
            <li><a href="#culture">Cultural Experiences</a></li>
            <li><a href="#planner">Trip Planner</a></li>
          </ul>
        </div>

        <div>
          <h4>Support</h4>
          <ul>
            <li><a href="#bookings">Bookings</a></li>
            <li><a href="#reviews">Reviews</a></li>
            <li><a href="#faq">Help Center</a></li>
            <li><a href="#faq">Travel Advisories</a></li>
            <li><a href="#faq">Protection Plans</a></li>
          </ul>
        </div>

        <div>
          <h4>Contact</h4>
          <ul>
            <li>Concierge: +1 (800) 555-0142</li>
            <li>Email: hello@meridianwayfarer.com</li>
            <li>Partnerships: partners@meridianwayfarer.com</li>
            <li>Chicago HQ: 214 W. Harrison Street, Suite 900, Chicago, IL 60606</li>
            <li>Mon to Sun, 24 hours</li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <span>&copy; <span id="year">2025</span> Meridian Wayfarer Travel Co. All rights reserved.</span>
        <nav aria-label="Legal">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Service</a>
          <a href="#">Cookie Settings</a>
          <a href="#">Accessibility</a>
        </nav>
      </div>
    </div>
  </footer>

  <script>
    // Footer year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Mobile navigation toggle
    (function () {
      const toggle = document.querySelector('.menu-toggle');
      const nav = document.getElementById('primary-nav');
      toggle.addEventListener('click', function () {
        const open = nav.classList.toggle('open');
        toggle.setAttribute('aria-expanded', String(open));
      });
      nav.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', function () {
          nav.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        });
      });
    })();

    // Currency converter (indicative rates per 1 USD, for planning only)
    (function () {
      const rates = { USD: 1, EUR: 0.92, GBP: 0.79, JPY: 151.4, MXN: 18.3, CLP: 935 };
      const amount = document.getElementById('amount');
      const from = document.getElementById('from');
      const to = document.getElementById('to');
      const swap = document.getElementById('swap');
      const output = document.getElementById('conv-output');
      const label = document.getElementById('conv-from-label');
      const rateLine = document.getElementById('rate-line');

      function decimalsFor(code) {
        return code === 'JPY' || code === 'CLP' ? 0 : 2;
      }

      function format(value, code) {
        return value.toLocaleString('en-US', {
          minimumFractionDigits: decimalsFor(code),
          maximumFractionDigits: decimalsFor(code)
        });
      }

      function update() {
        const value = parseFloat(amount.value);
        const f = from.value;
        const t = to.value;
        if (isNaN(value) || value < 0) {
          output.textContent = 'Enter a valid amount';
          label.textContent = '';
          rateLine.textContent = '';
          return;
        }
        const usd = value / rates[f];
        const result = usd * rates[t];
        const unitRate = rates[t] / rates[f];
        label.textContent = format(value, f) + ' ' + f + ' equals';
        output.textContent = format(result, t) + ' ' + t;
        rateLine.textContent = '1 ' + f + ' = ' + unitRate.toFixed(4) + ' ' + t + ' (indicative)';
      }

      swap.addEventListener('click', function () {
        const tmp = from.value;
        from.value = to.value;
        to.value = tmp;
        update();
      });

      amount.addEventListener('input', update);
      from.addEventListener('change', update);
      to.addEventListener('change', update);
      update();
    })();
  </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:08:05.670Z",
  "url": "https://benchmark.aimac.invalid/593845f5be4fb5fe5140679e833aff83bd27dce949b888560c27eab0552e13ef.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": "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": "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 href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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 href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"search-card\" id=\"bookings\" role=\"search\">",
          "target": [
            "#bookings"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"feature-icon\" aria-hidden=\"true\">\u2708</div>",
          "target": [
            ".feature:nth-child(1) > .feature-icon[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"search-card\" id=\"bookings\" role=\"search\">",
          "target": [
            "#bookings"
          ]
        }
      ]
    },
    {
      "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=\"search-card\" id=\"bookings\" role=\"search\">",
          "target": [
            "#bookings"
          ]
        }
      ]
    },
    {
      "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 href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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 href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"deal-meta\" style=\"margin-top:0.75rem;\">\n                  <span>Non-stop, 6h 55m</span>\n                  <span>Economy, 1 checked bag</span>\n                </div>",
          "target": [
            ".deal:nth-child(1) > div:nth-child(1) > .deal-meta"
          ]
        }
      ]
    },
    {
      "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 type=\"submit\" class=\"btn btn-primary\">Search Trips</button>",
          "target": [
            "#bookings > form > button[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-title\">Travel slower. See further. Book smarter.</h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"why-title\">Planning tools built around how people actually travel</h2>",
                  "target": [
                    "#why-title"
                  ]
                },
                {
                  "html": "<h3>Layover-Smart Routing</h3>",
                  "target": [
                    ".feature:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Verified Travel Advisories</h3>",
                  "target": [
                    ".feature:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Flexible Booking Protection</h3>",
                  "target": [
                    ".feature:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"dest-title\">Featured destinations this season</h2>",
                  "target": [
                    "#dest-title"
                  ]
                },
                {
                  "html": "<h3>Lisbon, Portugal</h3>",
                  "target": [
                    ".dest-card:nth-child(1) > .dest-overlay > h3"
                  ]
                },
                {
                  "html": "<h3>Kyoto, Japan</h3>",
                  "target": [
                    ".dest-card:nth-child(2) > .dest-overlay > h3"
                  ]
                },
                {
                  "html": "<h3>Patagonia, Chile &amp; Argentina</h3>",
                  "target": [
                    ".dest-card:nth-child(3) > .dest-overlay > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"deals-title\">Fare drops worth booking this week</h2>",
                  "target": [
                    "#deals-title"
                  ]
                },
                {
                  "html": "<h4>Oaxaca, Mexico</h4>",
                  "target": [
                    ".widget-spotlight > h4"
                  ]
                },
                {
                  "html": "<h4>Travel Hacks</h4>",
                  "target": [
                    ".widget:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>5-Day Forecast: Lisbon</h4>",
                  "target": [
                    ".widget:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Travel Advisory Snapshot</h4>",
                  "target": [
                    ".advisory > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"adv-title\">Trails, rapids, and ridgelines, planned properly</h2>",
                  "target": [
                    "#adv-title"
                  ]
                },
                {
                  "html": "<h2 id=\"culture-title\">Meaningful encounters with local life</h2>",
                  "target": [
                    "#culture-title"
                  ]
                },
                {
                  "html": "<h3>Home Kitchen Cooking Class</h3>",
                  "target": [
                    ".culture-card:nth-child(1) > .culture-body > h3"
                  ]
                },
                {
                  "html": "<h3>Tea Ceremony in Uji</h3>",
                  "target": [
                    ".culture-card:nth-child(2) > .culture-body > h3"
                  ]
                },
                {
                  "html": "<h3>Fado Evening in Alfama</h3>",
                  "target": [
                    ".culture-card:nth-child(3) > .culture-body > h3"
                  ]
                },
                {
                  "html": "<h3>Artisan Pottery Workshop</h3>",
                  "target": [
                    ".culture-card:nth-child(4) > .culture-body > h3"
                  ]
                },
                {
                  "html": "<h3>Want a cultural itinerary built around you?</h3>",
                  "target": [
                    ".culture-cta > div > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"planner-title\">Budget with confidence before you leave home</h2>",
                  "target": [
                    "#planner-title"
                  ]
                },
                {
                  "html": "<h3 id=\"conv-title\">Currency Converter</h3>",
                  "target": [
                    "#conv-title"
                  ]
                },
                {
                  "html": "<h2 id=\"reviews-title\">Stories from the road</h2>",
                  "target": [
                    "#reviews-title"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Questions travelers ask most</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2 id=\"news-title\">Receive weekly fare drops and guide updates</h2>",
                  "target": [
                    "#news-title"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".footer-grid > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Support</h4>",
                  "target": [
                    ".footer-grid > div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".footer-grid > div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d7ecea",
                "bgColor": "#0b5650",
                "contrastRatio": 6.93,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 6.93"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>Free 24/7 concierge line: +1 (800) 555-0142 \u00b7 Fare alerts now live</span>",
          "target": [
            ".topbar > .container > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "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=\"s-dest\">Destination</label>",
                  "target": [
                    "label[for=\"s-dest\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"s-dest\" type=\"text\" placeholder=\"City, country or region\" value=\"Lisbon, Portugal\">",
          "target": [
            "#s-dest"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/0f766e/ffffff?text=MW&amp;font=montserrat\" alt=\"Meridian Wayfarer logo placeholder\" width=\"48\" height=\"48\">",
          "target": [
            ".brand > img[width=\"48\"][height=\"48\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Destination"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"s-dest\">Destination</label>",
                  "target": [
                    "label[for=\"s-dest\"]"
                  ]
                }
              ],
              "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=\"s-dest\" type=\"text\" placeholder=\"City, country or region\" value=\"Lisbon, Portugal\">",
          "target": [
            "#s-dest"
          ]
        }
      ]
    },
    {
      "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=\"dest-overlay\">\n              <h3>Lisbon, Portugal</h3>\n              <p>Tiled fa\u00e7ades, tram lines, and coastal light. Best visited April to June and September to October.</p>\n              <a href=\"#destinations\">Read Guide \u2192</a>\n            </div>",
                  "target": [
                    ".dest-card:nth-child(1) > .dest-overlay"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#destinations\">Read Guide \u2192</a>",
          "target": [
            ".dest-card:nth-child(1) > .dest-overlay > a[href$=\"#destinations\"]"
          ]
        }
      ]
    },
    {
      "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=\"#faq\">Help Center</a>",
          "target": [
            "span:nth-child(2) > a[href$=\"#faq\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "#primary-nav > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#destinations\">Destinations</a></li>",
          "target": [
            "#primary-nav > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/0f766e/ffffff?text=MW&amp;font=montserrat\" alt=\"Meridian Wayfarer logo placeholder\" width=\"48\" height=\"48\">",
          "target": [
            ".brand > img[width=\"48\"][height=\"48\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Travelers"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"s-travelers\">Travelers</label>",
                  "target": [
                    "label[for=\"s-travelers\"]"
                  ]
                }
              ],
              "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=\"s-travelers\">\n              <option>1 Adult</option>\n              <option selected=\"\">2 Adults</option>\n              <option>2 Adults, 1 Child</option>\n              <option>Family (2+2)</option>\n              <option>Group (6+)</option>\n            </select>",
          "target": [
            "#s-travelers"
          ]
        }
      ]
    },
    {
      "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 does layover protection work?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 316.1,
                "height": 76.5
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (316.1px by 76.5px, 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 href=\"#top\" class=\"brand\" aria-label=\"Meridian Wayfarer home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "td-headers-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The headers attribute is exclusively used to refer to other cells in the table"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"level-table\" aria-label=\"Adventure difficulty ratings\">",
          "target": [
            "table"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "th-has-data-cells",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "All table header cells refer to data cells"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"level-table\" aria-label=\"Adventure difficulty ratings\">",
          "target": [
            "table"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-labelledby"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"converter\" aria-labelledby=\"conv-title\">",
          "target": [
            ".converter"
          ],
          "failureSummary": "Fix all of the following:\n  aria-labelledby attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Independent travel guides \u00b7 Since 2009</span>",
          "target": [
            ".hero-content > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    },
    {
      "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": "<article class=\"feature\">",
                  "target": [
                    ".feature:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's contrast ratio could not be determined because of element overlap"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#deals\">View routing guide \u2192</a>",
          "target": [
            ".feature:nth-child(1) > a[href$=\"#deals\"]"
          ],
          "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": "#e0893a",
                "bgColor": "#ffffff",
                "contrastRatio": 2.68,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"culture-card\">",
                  "target": [
                    ".culture-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Culinary</span>",
          "target": [
            ".culture-card:nth-child(1) > .culture-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e0893a",
                "bgColor": "#ffffff",
                "contrastRatio": 2.68,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"culture-card\">",
                  "target": [
                    ".culture-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Tradition</span>",
          "target": [
            ".culture-card:nth-child(2) > .culture-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e0893a",
                "bgColor": "#ffffff",
                "contrastRatio": 2.68,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"culture-card\">",
                  "target": [
                    ".culture-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Music</span>",
          "target": [
            ".culture-card:nth-child(3) > .culture-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e0893a",
                "bgColor": "#ffffff",
                "contrastRatio": 2.68,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"culture-card\">",
                  "target": [
                    ".culture-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Craft</span>",
          "target": [
            ".culture-card:nth-child(4) > .culture-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #e0893a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e0893a",
                "contrastRatio": 2.68,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"btn btn-accent\">Subscribe</button>",
                  "target": [
                    ".btn-accent[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #e0893a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"btn btn-accent\">Subscribe</button>",
          "target": [
            ".btn-accent[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #e0893a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "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": "fgContrast",
                "contrastRatio": 2.7,
                "requiredContrastRatio": 3,
                "nodeColor": "#0f766e",
                "parentColor": "#1d2a2c"
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget advisory\">",
                  "target": [
                    ".advisory"
                  ]
                }
              ],
              "impact": "serious",
              "message": "The link has insufficient color contrast of 2.7:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0f766e, surrounding text: #1d2a2c)"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"widget advisory\">",
                  "target": [
                    ".advisory"
                  ]
                }
              ],
              "impact": "serious",
              "message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#faq\">Full advisory details \u2192</a>",
          "target": [
            ".advisory > a[href$=\"#faq\"]"
          ],
          "failureSummary": "Fix any of the following:\n  The link has insufficient color contrast of 2.7:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0f766e, surrounding text: #1d2a2c)\n  The link has no styling (such as underline) to distinguish it from the surrounding text"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9966
      },
      {
        "y": 576,
        "height": 9966
      },
      {
        "y": 1152,
        "height": 9966
      },
      {
        "y": 1728,
        "height": 9966
      },
      {
        "y": 2304,
        "height": 9966
      },
      {
        "y": 2880,
        "height": 9966
      },
      {
        "y": 3456,
        "height": 9966
      },
      {
        "y": 4032,
        "height": 9966
      },
      {
        "y": 4608,
        "height": 9966
      },
      {
        "y": 5184,
        "height": 9966
      },
      {
        "y": 5760,
        "height": 9966
      },
      {
        "y": 6336,
        "height": 9966
      },
      {
        "y": 6912,
        "height": 9966
      },
      {
        "y": 7488,
        "height": 9966
      },
      {
        "y": 8064,
        "height": 9966
      },
      {
        "y": 8640,
        "height": 9966
      },
      {
        "y": 9216,
        "height": 9966
      },
      {
        "y": 9246,
        "height": 9966
      }
    ],
    "scans": 19,
    "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 "Travel" 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: "Travel"
- Description: Travel guides, destinations, booking resources, and tourism tips.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Travel" 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: "Bookings", "Reviews", "Trip Planner".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Travel" category. Consider themes similar to: "Flight Deals", "Adventure Travel", "Cultural Experiences".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "booking", "travel advisory", "layover".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Reserve Hotel", "Get Quote", "Read Guide".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Travel" sector. Ideas similar but not limited to: "currency converter".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "destination spotlights", "travel hacks", "weather forecasts".
-   **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.