/* findvisionproviders.com landing page (Outlook Vision Services). Colors come from the site profile (theme.php). */

.lp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgb(var(--c-ltgray));
}
.lp-wordmark { display: flex; align-items: center; gap: 12px; color: rgb(var(--c-primary-head)); }
.lp-wordmark:hover { color: rgb(var(--c-primary-head)); }
.lp-wordmark svg { width: 54px; height: 54px; flex: none; fill: currentColor; }
.lp-wordmark span { font: 600 1.15rem/1.1 var(--font-head); color: rgb(var(--c-black)); }
.lp-wordmark strong { display: block; color: rgb(var(--c-primary-head)); font-weight: 800; font-size: 2rem; letter-spacing: -.01em; }
.lp-contact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lp-contact-label { color: rgb(var(--c-primary-head)); font: 600 1rem var(--font-head); }
.lp-phone { color: rgb(var(--c-black)); font: 800 1.75rem/1.2 var(--font-head); }
.lp-phone:hover { color: rgb(var(--c-primary-text)); }
.lp-group { color: rgb(var(--c-black)); font: 600 .95rem var(--font-head); }

.lp-intro { max-width: 800px; margin: 36px auto 28px; text-align: center; }
.lp-intro h1 { margin: 0 0 12px; color: rgb(var(--c-primary-head)); font: 800 clamp(1.6rem, 3.2vw, 2.4rem)/1.2 var(--font-head); }
.lp-intro p { margin: 0; font-size: 16px; }

.lp-section { margin-top: 56px; }
.lp-section h2 { margin: 0 0 24px; text-align: center; color: rgb(var(--c-primary-head)); font: 800 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--font-head); }

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.lp-steps li {
  position: relative;
  padding: 20px 20px 20px 72px;
  background: rgb(var(--c-ltblue));
  border-radius: var(--radius);
  font-size: 15px;
  counter-increment: step;
}
.lp-steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-primary-ink));
  font: 800 1.1rem/38px var(--font-head);
  text-align: center;
}
.lp-steps strong { display: block; margin-bottom: 2px; color: rgb(var(--c-black)); font: 800 1rem var(--font-head); }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lp-card {
  padding: 20px 22px;
  background: #fff;
  border: 2px solid rgb(var(--c-ltgray));
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 rgba(var(--c-primary), .12);
}
.lp-card h3 { margin: 0 0 12px; color: rgb(var(--c-primary-head)); font: 800 1.1rem/1.3 var(--font-head); }
.lp-card p { margin: 0; font-size: 15px; }
.lp-card dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.lp-card dt { color: rgb(var(--c-text)); }
.lp-card dd { margin: 0; text-align: right; color: rgb(var(--c-black)); font-weight: 700; }
.lp-note { margin-top: 10px !important; font-size: 13px !important; opacity: .8; }
.lp-card-accent { border-left: 6px solid rgb(var(--c-ancillary)); }
.lp-card p + p, .lp-card p + dl { margin-top: 10px; }
.lp-legend { grid-template-columns: auto 1fr !important; }
.lp-legend dt { color: rgb(var(--c-ancillary-text)); font: 800 .8rem/1.9 var(--font-head); }
.lp-legend dd { text-align: left !important; font-weight: 400 !important; }
.lp-link { margin-top: 12px !important; font: 600 .95rem var(--font-head); }

.lp-disclosures {
  margin-top: 48px;
  padding: 18px 20px;
  background: rgb(var(--c-ltblue));
  border-radius: var(--radius);
  font-size: 13px;
  color: rgba(var(--c-text), .9);
}
.lp-disclosures p { margin: 0; }

@media (max-width: 760px) {
  .lp-header { justify-content: center; }
  .lp-contact { align-items: center; text-align: center; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-card dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-card dd { text-align: left; margin-bottom: 6px; }
}