Insurance — Insurance FAQ

:root {
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --blue-50: #eef4ff;
  --green: #15a06b;
  --ink: #0f1a2b;
  --muted: #5a6b82;
  --bg: #f3f7fc;
  --white: #ffffff;
  --line: #e3ebf6;
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.04), 0 12px 28px rgba(15, 26, 43, 0.06);
  --radius: 18px;
  --mark: #fde68a;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 460px at 50% -120px, #e2edff 0%, rgba(226, 237, 255, 0) 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* Hero + search */
.hero { text-align: center; margin-bottom: 28px; }
.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-d);
  background: var(--blue-50);
  padding: 6px 12px;
  border-radius: 999px;
}
.hero__title {
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 16px 0 8px;
}
.hero__sub {
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 24px;
  font-size: 15px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}
.search__icon {
  position: absolute;
  left: 16px;
  color: var(--muted);
  pointer-events: none;
}
.search__input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 15px 44px 15px 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search__input::placeholder { color: #93a2b8; }
.search__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.search__clear {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #eef2f9;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.search__clear:hover { background: #e1e8f4; color: var(--ink); }
.search__status {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* Groups */
.group { margin-top: 28px; }
.group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.group__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--blue);
}
.group__dot[data-tone="claims"] { background: var(--blue); }
.group__dot[data-tone="billing"] { background: var(--green); }
.group__dot[data-tone="coverage"] { background: #7c3aed; }
.group__dot[data-tone="cancel"] { background: #e0773a; }
.group__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Accordion item */
.item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.15s;
}
.item.is-open { border-color: rgba(37, 99, 235, 0.4); }
.item__h { margin: 0; }
.item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 18px 20px;
  cursor: pointer;
}
.item__trigger:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: -3px;
  border-radius: var(--radius);
}
.item__q mark {
  background: var(--mark);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.22s ease, color 0.15s;
}
.item.is-open .chev { transform: rotate(180deg); color: var(--blue); }
.item__panel {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 14.5px;
}
.item__panel p { margin: 0; }
.item__panel strong { color: var(--ink); font-weight: 700; }

/* Empty state */
.empty {
  text-align: center;
  padding: 48px 20px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin-top: 24px;
}
.empty__icon { font-size: 32px; }
.empty__title { font-weight: 700; margin: 12px 0 4px; }
.empty__sub { color: var(--muted); font-size: 14px; margin: 0; }

/* Contact card */
.contact {
  margin-top: 36px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: var(--white);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact__title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.contact__sub { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 14.5px; max-width: 48ch; }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 11px;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--white); color: var(--blue-d); }
.btn--primary:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }
.btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

.contact__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.stat { text-align: center; }
.stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}
.stat__value { font-size: 22px; font-weight: 800; margin-top: 4px; }

@media (max-width: 520px) {
  .page { padding: 32px 14px 48px; }
  .item__trigger { padding: 16px; font-size: 15px; }
  .item__panel { padding: 0 16px 16px; }
  .contact { padding: 22px; }
  .contact__actions .btn { flex: 1 1 100%; }
  .contact__stats { gap: 8px; }
  .stat__value { font-size: 18px; }
}

(function () {
  'use strict';

  var faq = document.getElementById('faq');
  if (!faq) return;

  var triggers = Array.prototype.slice.call(faq.querySelectorAll('.item__trigger'));
  var items = Array.prototype.slice.call(faq.querySelectorAll('[data-item]'));
  var groups = Array.prototype.slice.call(faq.querySelectorAll('[data-group]'));
  var search = document.getElementById('faq-search');
  var clearBtn = document.getElementById('faq-clear');
  var status = document.getElementById('faq-status');
  var empty = document.getElementById('faq-empty');
  var total = items.length;

  // Cache each question's original text so we can re-render highlights.
  items.forEach(function (item) {
    var q = item.querySelector('.item__q');
    item._qText = q ? q.textContent : '';
    item._panelText = (item.querySelector('.item__panel') || {}).textContent || '';
  });

  /* ---- Accordion ---- */
  function setOpen(item, open) {
    var trigger = item.querySelector('.item__trigger');
    var panel = item.querySelector('.item__panel');
    item.classList.toggle('is-open', open);
    trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
    if (open) {
      panel.hidden = false;
    } else {
      panel.hidden = true;
    }
  }

  function toggle(item) {
    var isOpen = item.classList.contains('is-open');
    // Single-open within the same group.
    var group = item.closest('[data-group]');
    if (group) {
      group.querySelectorAll('[data-item].is-open').forEach(function (other) {
        if (other !== item) setOpen(other, false);
      });
    }
    setOpen(item, !isOpen);
  }

  triggers.forEach(function (trigger, i) {
    var item = trigger.closest('[data-item]');

    trigger.addEventListener('click', function () {
      toggle(item);
    });

    trigger.addEventListener('keydown', function (e) {
      var visible = triggers.filter(function (t) {
        return !t.closest('[data-item]').hidden;
      });
      var idx = visible.indexOf(trigger);
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        (visible[idx + 1] || visible[0]).focus();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        (visible[idx - 1] || visible[visible.length - 1]).focus();
      } else if (e.key === 'Home') {
        e.preventDefault();
        visible[0].focus();
      } else if (e.key === 'End') {
        e.preventDefault();
        visible[visible.length - 1].focus();
      }
    });
  });

  /* ---- Search filter ---- */
  function escapeHtml(s) {
    return s.replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }

  function escapeReg(s) {
    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }

  function highlight(item, term) {
    var q = item.querySelector('.item__q');
    if (!q) return;
    var text = item._qText;
    if (!term) {
      q.textContent = text;
      return;
    }
    var re = new RegExp('(' + escapeReg(term) + ')', 'ig');
    q.innerHTML = escapeHtml(text).replace(re, '<mark>$1</mark>');
  }

  function filter() {
    var term = (search.value || '').trim().toLowerCase();
    clearBtn.hidden = term.length === 0;

    var visibleCount = 0;
    items.forEach(function (item) {
      var hay = (item._qText + ' ' + item._panelText).toLowerCase();
      var match = !term || hay.indexOf(term) !== -1;
      item.hidden = !match;
      highlight(item, term);
      if (!match) setOpen(item, false);
      if (match) visibleCount++;
    });

    // Hide groups that have no visible items.
    groups.forEach(function (group) {
      var any = group.querySelector('[data-item]:not([hidden])');
      group.hidden = !any;
    });

    empty.hidden = visibleCount !== 0;

    if (!term) {
      status.textContent = 'Showing all ' + total + ' questions';
    } else if (visibleCount === 0) {
      status.textContent = 'No questions match "' + term + '"';
    } else {
      status.textContent =
        visibleCount + ' of ' + total + ' question' + (visibleCount === 1 ? '' : 's') + ' match "' + term + '"';
    }
  }

  search.addEventListener('input', filter);

  clearBtn.addEventListener('click', function () {
    search.value = '';
    search.focus();
    filter();
  });

  search.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && search.value) {
      e.preventDefault();
      search.value = '';
      filter();
    }
  });

  // Initialize.
  filter();
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Insurance FAQ</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="page">
    <header class="hero">
      <span class="hero__eyebrow">Help center</span>
      <h1 class="hero__title">How can we help?</h1>
      <p class="hero__sub">Answers about claims, billing, coverage and cancellation — usually solved in a couple of minutes.</p>

      <form class="search" role="search" aria-label="Search frequently asked questions">
        <svg class="search__icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.3-4.3" />
        </svg>
        <input id="faq-search" type="search" class="search__input" placeholder="Search questions… e.g. deductible, refund, claim status" autocomplete="off" />
        <button type="button" id="faq-clear" class="search__clear" aria-label="Clear search" hidden>&times;</button>
      </form>
      <p id="faq-status" class="search__status" role="status" aria-live="polite">Showing all 14 questions</p>
    </header>

    <div class="faq" id="faq">
      <section class="group" data-group>
        <h2 class="group__title"><span class="group__dot" data-tone="claims"></span>Claims</h2>
        <div class="group__items">
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p1" id="t1">
                <span class="item__q">How do I file a new claim?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p1" role="region" aria-labelledby="t1" hidden>
              <p>Open the app, tap <strong>File a claim</strong>, and follow the guided steps. Most auto and home claims take under 6 minutes to submit. Have your policy number and any photos ready.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p2" id="t2">
                <span class="item__q">How long does a claim take to process?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p2" role="region" aria-labelledby="t2" hidden>
              <p>Straightforward claims are reviewed within <strong>48 hours</strong>. Complex cases involving inspections may take up to 10 business days. You'll get push and email updates at every stage.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p3" id="t3">
                <span class="item__q">Where can I check my claim status?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p3" role="region" aria-labelledby="t3" hidden>
              <p>Go to <strong>My claims</strong> in the dashboard. Each claim shows a live timeline: Received, Reviewing, Adjuster assigned, and Payout. Reference number CLM-2026-… appears at the top.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p4" id="t4">
                <span class="item__q">What documents do I need to upload?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p4" role="region" aria-labelledby="t4" hidden>
              <p>Typically a photo of the damage, a police or incident report if applicable, and any repair estimates. You can add files later — partial claims are saved as drafts for 30 days.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="group" data-group>
        <h2 class="group__title"><span class="group__dot" data-tone="billing"></span>Billing</h2>
        <div class="group__items">
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p5" id="t5">
                <span class="item__q">When is my premium charged?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p5" role="region" aria-labelledby="t5" hidden>
              <p>Your premium is billed on the same date each month — the day your policy began. For Maya R., that's the <strong>14th</strong>. We send a reminder 3 days before every charge.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p6" id="t6">
                <span class="item__q">How do I update my payment method?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p6" role="region" aria-labelledby="t6" hidden>
              <p>Go to <strong>Billing → Payment method</strong> and add a new card or bank account. Changes apply to your next cycle. We accept all major cards and ACH transfers.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p7" id="t7">
                <span class="item__q">Can I switch to annual billing to save money?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p7" role="region" aria-labelledby="t7" hidden>
              <p>Yes. Paying annually saves <strong>8%</strong> versus monthly. Switch under <strong>Billing → Schedule</strong>; we'll prorate your current cycle and apply the discount immediately.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p8" id="t8">
                <span class="item__q">A payment failed — what happens now?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p8" role="region" aria-labelledby="t8" hidden>
              <p>We retry automatically after 3 days, and your coverage stays active during a <strong>14-day grace period</strong>. Update your card any time to clear the balance and avoid a lapse.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="group" data-group>
        <h2 class="group__title"><span class="group__dot" data-tone="coverage"></span>Coverage</h2>
        <div class="group__items">
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p9" id="t9">
                <span class="item__q">What is a deductible?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p9" role="region" aria-labelledby="t9" hidden>
              <p>It's the amount you pay before coverage kicks in. With a <strong>$500</strong> deductible, on a $3,200 claim you'd pay $500 and we cover the remaining $2,700. A higher deductible lowers your premium.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p10" id="t10">
                <span class="item__q">Can I add a family member to my policy?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p10" role="region" aria-labelledby="t10" hidden>
              <p>Yes. Under <strong>Coverage → Members</strong> you can add a spouse, partner or dependent. The premium adjustment is shown before you confirm, and coverage starts the next day.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p11" id="t11">
                <span class="item__q">Does my policy cover rental cars?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p11" role="region" aria-labelledby="t11" hidden>
              <p>Comprehensive plans include rental reimbursement up to <strong>$40/day</strong> for 30 days while your vehicle is being repaired after a covered claim. Add-on coverage extends this limit.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="group" data-group>
        <h2 class="group__title"><span class="group__dot" data-tone="cancel"></span>Cancellation</h2>
        <div class="group__items">
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p12" id="t12">
                <span class="item__q">How do I cancel my policy?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p12" role="region" aria-labelledby="t12" hidden>
              <p>Go to <strong>Policy → Cancel coverage</strong>, choose an end date, and confirm. There are no cancellation fees, and you'll get a confirmation email plus a final statement within 24 hours.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p13" id="t13">
                <span class="item__q">Will I get a refund if I cancel early?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p13" role="region" aria-labelledby="t13" hidden>
              <p>Yes — we refund any <strong>unused premium</strong>, prorated to the day. Refunds are returned to your original payment method within 5–7 business days. No hidden deductions.</p>
            </div>
          </div>
          <div class="item" data-item>
            <h3 class="item__h">
              <button class="item__trigger" aria-expanded="false" aria-controls="p14" id="t14">
                <span class="item__q">Can I reactivate a cancelled policy?</span>
                <svg class="chev" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9 6 6 6-6"/></svg>
              </button>
            </h3>
            <div class="item__panel" id="p14" role="region" aria-labelledby="t14" hidden>
              <p>Within <strong>30 days</strong> you can reinstate the same policy with no new application — just settle any outstanding balance. After that, you'll start a fresh quote, which may differ.</p>
            </div>
          </div>
        </div>
      </section>

      <div class="empty" id="faq-empty" hidden>
        <div class="empty__icon" aria-hidden="true">🔍</div>
        <p class="empty__title">No matches found</p>
        <p class="empty__sub">Try a different keyword, or reach out to our team below.</p>
      </div>
    </div>

    <aside class="contact" aria-labelledby="contact-h">
      <div class="contact__body">
        <h2 class="contact__title" id="contact-h">Still need help?</h2>
        <p class="contact__sub">Our licensed support specialists are here 7 days a week. No bots, no hold music maze.</p>
        <div class="contact__actions">
          <a class="btn btn--primary" href="tel:+18005550142">Call us</a>
          <a class="btn btn--ghost" href="#chat">Start live chat</a>
          <a class="btn btn--ghost" href="mailto:[email protected]">Email support</a>
        </div>
      </div>
      <dl class="contact__stats">
        <div class="stat"><dt class="stat__label">Avg. wait</dt><dd class="stat__value">&lt; 2 min</dd></div>
        <div class="stat"><dt class="stat__label">Satisfaction</dt><dd class="stat__value">96%</dd></div>
        <div class="stat"><dt class="stat__label">Available</dt><dd class="stat__value">7am–11pm</dd></div>
      </dl>
    </aside>
  </main>

  <script src="script.js"></script>
</body>
</html>