/* ============================================================================
   visitor-info.css — standalone /visitor-info page
   Loaded after index.css - reuses .kicker/.cta-button/.link-underline/
   .checklist/.checklist-item/.footer-cta-section/main{max-width} from there,
   plus tokens from base.css. The first-fold hero reuses .hero-section/
   .hero-grid/.hero-main/.hero-title/.hero-sub/.hero-actions/.hero-media.
   duotone wholesale (same markup as the homepage/about hero), so no hero
   rules live in this file. This file covers what's unique to this page.
   ========================================================================== */

/* ---------- Zoom vs in-person comparison -------------------------------- */

.vi-compare {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  border-bottom: 1px solid var(--color-line);
}

.vi-compare-card h2 {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--color-ink);
}

.vi-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.vi-list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--color-line-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.vi-list li:last-child {
  border-bottom: 1px solid var(--color-line-soft);
}

.vi-list .check {
  flex: none;
  color: var(--color-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.vi-list strong {
  color: var(--color-ink);
}

/* Photo gallery + lightbox now live in the reusable photo-gallery.css/.js +
   partials/photo-gallery.html - loaded separately, see this page's
   {% block css %}/{% block scripts %}. */

/* ---------- Agenda flow --------------------------------------------------- */

.vi-flow {
  padding: 40px 20px;
  border-bottom: 1px solid var(--color-line);
}

.vi-flow h2 {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--color-ink);
}

.vi-flow-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.vi-flow-list li {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--color-line-soft);
}

.vi-flow-list li:last-child {
  border-bottom: 1px solid var(--color-line-soft);
}

.vi-flow-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--color-text-faint);
  padding-top: 2px;
}

.vi-flow-list strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}

.vi-flow-list p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 520px;
}

/* ---------- "Good to know" checklist ------------------------------------- */

.vi-checklist {
  padding: 40px 20px;
  border-bottom: 1px solid var(--color-line);
}

.vi-checklist h2 {
  margin: 8px 0 24px;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--color-ink);
}

@media screen and (min-width: 1024px) {
  .vi-compare,
  .vi-flow,
  .vi-checklist {
    padding-left: 60px;
    padding-right: 60px;
  }

  .vi-compare {
    flex-direction: row;
    gap: 60px;
  }

  .vi-compare-card {
    flex: 1;
  }

  .vi-compare-card h2 {
    font-size: 32px;
  }

  .vi-flow h2,
  .vi-checklist h2 {
    font-size: 44px;
  }

  .vi-flow-list {
    max-width: 760px;
  }

  .vi-checklist .checklist {
    max-width: 760px;
  }
}