/* MKT-602 / EC-236 — Instant Quote landing (/online-pawn-quote)
   Ported from the ez-quote-landing prototype (ezquote-frontend 1.6.1).
   Everything is scoped to .ezquote-landing so it can't leak into the site
   header/footer or into the <ez-quote> widget (which lives in a shadow root). */

.ezquote-landing {
  --ezl-primary: #2154A3;
  --ezl-light-bg: #F0F4F8;
  --ezl-border-outline: #B8D1F7;
  --ezl-hover: #E3EEFF;
  --ezl-tint: rgba(0, 106, 255, 0.05);
  --ezl-icon-bg: #F0F4F8;
  --ezl-value: #111215;
  --ezl-secondary-text: #7A7A7A;
  --ezl-subtext: #8C8F94;
  --ezl-border: #ECEDEE;
  --ezl-shadow: rgba(0, 0, 0, 0.05);
  --ezl-white: #FFFFFF;
  --ezl-radius: 16px;
  --ezl-round: 9999px;

  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ezl-value);
  background: var(--ezl-white);
}
.ezquote-landing[data-brand="valuepawn"] {
  --ezl-primary: #108B50;
  --ezl-light-bg: #ECF6EC;
  --ezl-border-outline: #9CD4A5;
  --ezl-hover: #F8FCF8;
  --ezl-tint: #ECF6EC;
  --ezl-icon-bg: #ECF6EC;
}

.ezquote-landing *,
.ezquote-landing *::before,
.ezquote-landing *::after { box-sizing: border-box; }

.ezquote-landing h1,
.ezquote-landing h2,
.ezquote-landing h3 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
}
.ezquote-landing p { margin: 0; text-wrap: pretty; }

.ezquote-landing .landing-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .ezquote-landing .landing-shell { padding: 0 32px; } }

.ezquote-landing .landing-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ezquote-landing .landing-section { padding: 56px 0; }
@media (min-width: 768px) { .ezquote-landing .landing-section { padding: 72px 0; } }
.ezquote-landing .landing-section__head { max-width: 720px; margin: 0 0 32px; }
.ezquote-landing .landing-section__head h2 { font-size: 29px; }
.ezquote-landing .landing-section__head p { margin-top: 14px; font-size: 16px; color: var(--ezl-secondary-text); }
@media (min-width: 768px) { .ezquote-landing .landing-section__head { margin-bottom: 40px; } }

.ezquote-landing .landing-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ezl-primary);
}

.ezquote-landing .landing-card {
  background: var(--ezl-white);
  border: 1px solid var(--ezl-border-outline);
  border-radius: var(--ezl-radius);
  box-shadow: 0 4px 12px var(--ezl-shadow);
  padding: 24px;
}

/* Store bar */
.ezquote-landing .landing-store-bar { background: var(--ezl-primary); color: var(--ezl-white); }
.ezquote-landing .landing-store-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 768px) { .ezquote-landing .landing-store-bar__inner { min-height: 52px; } }
.ezquote-landing .landing-store-bar__text {
  min-width: 0; flex: 1 1 auto; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ezl-white);
}
@media (min-width: 768px) { .ezquote-landing .landing-store-bar__text { font-size: 14px; } }

/* Hero */
.ezquote-landing .landing-hero { background: var(--ezl-light-bg); padding: 40px 0 48px; }
@media (min-width: 768px) { .ezquote-landing .landing-hero { padding: 60px 0 72px; } }
.ezquote-landing .landing-hero__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) {
  .ezquote-landing .landing-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 48px; }
  .ezquote-landing .landing-hero__copy { position: sticky; top: 96px; }
}
.ezquote-landing .landing-hero__title { font-size: 29px; }
@media (min-width: 768px) { .ezquote-landing .landing-hero__title { font-size: 44px; } }
@media (min-width: 1024px) { .ezquote-landing .landing-hero__title { font-size: 52px; } }
.ezquote-landing .landing-hero__title-accent { color: var(--ezl-primary); }
.ezquote-landing .landing-hero__lede { margin-top: 18px; max-width: 46ch; font-size: 16px; color: var(--ezl-secondary-text); }
.ezquote-landing .landing-hero__kicker { margin-top: 14px; font-size: 16px; font-weight: 600; }
.ezquote-landing .landing-hero__quote { scroll-margin-top: 110px; }
.ezquote-landing .landing-hero__disclaimer { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--ezl-subtext); }
.ezquote-landing .landing-hero__disclaimer a { color: var(--ezl-primary); text-decoration: underline; }

/* Tool mount point — the <ez-quote> widget (EZQuote team) renders in here */
.ezquote-landing .landing-hero__tool {
  min-height: 320px;
  background: var(--ezl-white);
  border: 1px solid var(--ezl-border-outline);
  border-radius: var(--ezl-radius);
  box-shadow: 0 8px 28px var(--ezl-shadow);
  padding: 16px;
}
@media (min-width: 768px) { .ezquote-landing .landing-hero__tool { padding: 22px; } }
.ezquote-landing .landing-hero__loader {
  width: 40px; height: 40px; margin: 120px auto;
  border: 4px solid var(--ezl-border);
  border-top-color: var(--ezl-primary);
  border-radius: 50%;
  animation: ezl-spin 1s linear infinite;
}
.ezquote-landing .landing-hero__tool.is-ready { min-height: 0; }
.ezquote-landing .landing-hero__tool.is-ready .landing-hero__loader { display: none; }
.ezquote-landing .landing-hero__tool:not(.is-ready) ez-quote { display: block; height: 0; overflow: hidden; }
@keyframes ezl-spin { to { transform: rotate(360deg); } }

/* How it works */
.ezquote-landing .landing-steps__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .ezquote-landing .landing-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ezquote-landing .landing-step h3 { margin: 0 0 10px; font-size: 18px; }
.ezquote-landing .landing-step__body { font-size: 14px; color: var(--ezl-secondary-text); }

/* Comparison table */
.ezquote-landing .landing-compare { background: var(--ezl-light-bg); }
.ezquote-landing .landing-compare__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--ezl-white);
  border: 1px solid var(--ezl-border-outline);
  border-radius: var(--ezl-radius);
  box-shadow: 0 4px 12px var(--ezl-shadow);
}
.ezquote-landing .landing-compare__table { width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; font-size: 14px; background: none; }
.ezquote-landing .landing-compare__table th,
.ezquote-landing .landing-compare__table td {
  padding: 14px 16px; text-align: left; vertical-align: middle;
  border: 0; border-bottom: 1px solid var(--ezl-border);
  background: none;
}
.ezquote-landing .landing-compare__table thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ezquote-landing .landing-compare__table thead th.landing-compare__col-us { background: var(--ezl-primary); color: var(--ezl-white); }
.ezquote-landing .landing-compare__table thead th.landing-compare__col-other { color: var(--ezl-secondary-text); }
.ezquote-landing .landing-compare__table tbody th { width: 34%; font-weight: 500; color: var(--ezl-value); }
.ezquote-landing .landing-compare__table tbody td.landing-compare__col-us {
  background: var(--ezl-tint); font-weight: 600; color: var(--ezl-primary);
  box-shadow: inset 1px 0 0 var(--ezl-border-outline), inset -1px 0 0 var(--ezl-border-outline);
}
.ezquote-landing .landing-compare__table tbody td.landing-compare__col-other { color: var(--ezl-secondary-text); }
.ezquote-landing .landing-compare__table tbody tr:last-child th,
.ezquote-landing .landing-compare__table tbody tr:last-child td { border-bottom: none; }

/* Safety + proof grids */
.ezquote-landing .landing-safety__grid,
.ezquote-landing .landing-proof__grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .ezquote-landing .landing-safety__grid,
  .ezquote-landing .landing-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ezquote-landing .landing-safety__grid,
  .ezquote-landing .landing-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ezquote-landing .landing-stat h3 { margin: 0 0 8px; font-size: 18px; }
.ezquote-landing .landing-stat__body { font-size: 14px; color: var(--ezl-secondary-text); }

.ezquote-landing .landing-proof { background: var(--ezl-light-bg); }
.ezquote-landing .landing-proof__card h3 { margin: 10px 0 8px; font-size: 18px; }
.ezquote-landing .landing-proof__card--feature { border-color: var(--ezl-primary); }
.ezquote-landing .landing-proof__body { font-size: 14px; color: var(--ezl-secondary-text); }
.ezquote-landing .landing-proof__stars { font-size: 16px; letter-spacing: 3px; color: var(--ezl-primary); }
.ezquote-landing .landing-proof__number { margin-top: 6px; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--ezl-primary); }
.ezquote-landing .landing-proof__icon { display: inline-flex; color: var(--ezl-primary); }
.ezquote-landing .landing-proof__icon svg { display: block; width: 44px; height: 44px; }

/* FAQ */
.ezquote-landing .landing-faq__list { display: grid; gap: 12px; }
.ezquote-landing .landing-faq__item { padding: 18px 20px; }
.ezquote-landing .landing-faq__item summary { cursor: pointer; font-size: 16px; font-weight: 600; color: var(--ezl-value); }
.ezquote-landing .landing-faq__item summary::marker { color: var(--ezl-primary); }
.ezquote-landing .landing-faq__item p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ezl-secondary-text); }
.ezquote-landing .landing-faq__item a { color: var(--ezl-primary); text-decoration: underline; }

/* Closing CTA */
.ezquote-landing .landing-cta { background: var(--ezl-primary); color: var(--ezl-white); padding: 52px 0; text-align: center; }
@media (min-width: 768px) { .ezquote-landing .landing-cta { padding: 72px 0; } }
.ezquote-landing .landing-cta h2 { font-size: 29px; color: var(--ezl-white); }
.ezquote-landing .landing-cta p { margin: 14px auto 26px; max-width: 44ch; font-size: 16px; color: var(--ezl-white); opacity: .85; }
.ezquote-landing .landing-cta__button,
.ezquote-landing .landing-cta__button:visited {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px;
  background: var(--ezl-white); color: var(--ezl-primary);
  border-radius: var(--ezl-round);
  font-size: 16px; font-weight: 600; letter-spacing: -0.14px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.ezquote-landing .landing-cta__button:hover,
.ezquote-landing .landing-cta__button:focus { background: var(--ezl-hover); color: var(--ezl-primary); }

/* Fine print */
.ezquote-landing .landing-fine-print { padding: 32px 0; }
.ezquote-landing .landing-fine-print p { font-size: 12px; line-height: 1.8; color: var(--ezl-subtext); }
.ezquote-landing .landing-fine-print a { color: var(--ezl-primary); text-decoration: underline; }
.ezquote-landing .landing-fine-print__recaptcha { margin-top: 10px; }

/* Keep the tool inside the shell on phones (2026-10-20). Without an explicit column the grid track grew to the
   widget's min-content (.ezquote-container: min-width 300px + 16px padding = 332px, inside its shadow root), so the
   card overflowed on the right. Cap the track, and trim the card padding so the widget's 332px still fits down to 360px. */
.ezquote-landing .landing-hero__grid { grid-template-columns: minmax(0, 1fr); }
.ezquote-landing .landing-hero__grid > * { min-width: 0; }
.ezquote-landing .landing-hero__tool ez-quote { display: block; max-width: 100%; }
@media (max-width: 479px) { .ezquote-landing .landing-hero__tool { padding: 4px; } }
@media (max-width: 389px) {
  .ezquote-landing .landing-hero .landing-shell { padding: 0 12px; }
  .ezquote-landing .landing-hero__tool { padding: 0; }
}
@media (min-width: 1024px) {
  .ezquote-landing .landing-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
