/* AZ Collision — paid-search landing pages (lp.css)
   ---------------------------------------------------------------------------
   Styles ONLY for the .lp-* blocks the landing pages add on top of the
   existing system. Everything else on those pages -- sections, containers,
   buttons, cards, accordions, review cards, footer, action bar -- reuses the
   site's own classes from az-collision.css / custom.css, so the pages stay in
   the same visual language as the homepage by construction.

   Loads after estimate-wizard.css. All selectors are .lp-*-prefixed and can
   leak nowhere: the homepage never links this file. */

/* --- hero ---------------------------------------------------------------- */

/* Text-first hero: the H1 and both actions must be readable immediately, so
   there is deliberately no large media here (LCP is the heading itself). */
.lp-hero {
  padding-bottom: 8px;
}

.lp-hero .inner-container {
  padding-top: 24px;
}

.lp-kicker {
  color: #a8adb8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* The one-sentence direct answer under the H1 keeps the site's subtitle look
   (.display-2.mid) and only gets a measure so it wraps into readable lines. */
.lp-answer {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Call is a real button next to the estimate CTA, styled as the quiet twin of
   .primary-button: same geometry, outline instead of fill. */
.lp-btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.lp-btn-call:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

.lp-btn-call svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Route line under the CTAs ("Going through insurance? …"). */
.lp-route-line {
  margin: 18px 0 0;
  color: #c7cbd4;
  font-size: 16px;
  line-height: 1.5;
}

.lp-route-line a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- route cards (insurance page: "already have a claim" / "need next steps") */

.lp-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 26px auto 0;
  max-width: 720px;
  text-align: left;
}

.lp-route-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.lp-route-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: #12151a;
}

.lp-route-kicker {
  color: #a8adb8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-route-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.lp-route-desc {
  color: #c7cbd4;
  font-size: 15px;
  line-height: 1.5;
}

.lp-route-cta {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* --- trust strip ---------------------------------------------------------- */

/* Compact §8.7 facts, shown under the hero and again beside the form. Reuses
   the .rating-chip vocabulary (custom.css) but as plain non-link chips. */
.lp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
}

/* R5 splits the strip into one list per category (facts, warranty, hours).
   The follow-on lists sit tight under the first so the three groups still read
   as one chip cluster instead of three stacked bands. */
.lp-trust-more {
  margin-top: 10px;
}

.lp-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #d6d9e0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.lp-trust li a {
  color: #fff;
  text-decoration: none;
}

.lp-trust li a:hover {
  text-decoration: underline;
}

.lp-trust .stars {
  color: #f5b942;
  letter-spacing: 1px;
  font-size: 13px;
}

/* --- hero expectations panel ("Damage first. Decisions second.") -----------
   Ported from build-b. Under the hero rather than beside it: this hero is a
   centred single column, so a side panel would force a layout rewrite for no
   gain on mobile, where most paid traffic lands. */
.lp-hero-panel {
  /* The hero container carries no side gutter at phone widths, so the panel
     keeps its own: a bordered card must never touch the screen edge. */
  max-width: min(560px, calc(100% - 32px));
  margin: 32px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.lp-panel-kicker {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-hero-panel h2 {
  margin: 6px 0 16px;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}

.lp-hero-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.lp-hero-panel ol li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lp-hero-panel ol li > span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.lp-hero-panel ol li strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.lp-hero-panel ol li small {
  display: block;
  color: #d6d9e0;
  font-size: 14px;
  line-height: 1.45;
}

.lp-panel-note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.45;
}

/* --- generic landing sections --------------------------------------------- */

.lp-section {
  padding: 56px 0 8px;
}

.lp-section .container-default {
  max-width: 1100px;
}

.lp-section-head {
  max-width: 720px;
  margin: 0 auto 8px;
  text-align: center;
}

.lp-section-head .lp-sub {
  margin: 14px auto 0;
  max-width: 620px;
  color: #c7cbd4;
  font-size: 17px;
  line-height: 1.6;
}

/* Two-column info cards (visible vs hidden damage, cost vs timing, …). */
.lp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 30px auto 0;
  max-width: 900px;
}

/* Single wide card (the why-us list on the insurance page). */
.lp-cols.lp-cols-1 {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.lp-col {
  padding: 24px;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

.lp-col h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}

.lp-col p {
  margin: 0 0 10px;
  color: #c7cbd4;
  font-size: 15.5px;
  line-height: 1.6;
}

.lp-col p:last-child {
  margin-bottom: 0;
}

.lp-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c7cbd4;
  font-size: 15.5px;
  line-height: 1.6;
}

.lp-col ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.lp-col ul li:last-child {
  margin-bottom: 0;
}

/* images/check-icon.svg strokes near-black for light surfaces; these cards are
   dark, so the same check ships inline with a light stroke instead. */
.lp-col ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19336 7.5437L5.36865 9.71899L10.8069 4.28076' stroke='%23c7cbd4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- numbered process steps ------------------------------------------------ */

.lp-steps {
  counter-reset: lp-step;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
  max-width: 1060px;
}

.lp-steps li {
  counter-increment: lp-step;
  padding: 20px 18px;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

.lp-steps li::before {
  content: counter(lp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.lp-steps h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

.lp-steps p {
  margin: 0;
  color: #b9bec9;
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- shop-choice rights + incentive contrast (insurance page) -------------- */

.lp-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
  counter-reset: lp-fact;
  text-align: left;
}

.lp-facts li {
  counter-increment: lp-fact;
  position: relative;
  padding: 22px 24px 22px 74px;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

.lp-facts li::before {
  content: counter(lp-fact);
  position: absolute;
  left: 24px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

.lp-facts h3 {
  margin: 0 0 6px;
  font-size: 17.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.lp-facts p {
  margin: 0;
  color: #c7cbd4;
  font-size: 15.5px;
  line-height: 1.6;
}

.lp-cite {
  display: block;
  margin-top: 8px;
  color: #8c92a0;
  font-size: 13.5px;
  font-style: normal;
}

/* --- shop-choice comparison table (insurance page, inside #your-rights) -----
   No new tokens: the wrapper is the .lp-facts card shell one block up, same
   #0e1013 ground, same rgba(255,255,255,.09) hairline, same 14px radius and
   the same 780px measure, so the table reads as the fourth card in the stack
   rather than as a new component.

   The wrapper owns the horizontal scroll, not the page. .lp-compare keeps a
   min-width floor because three columns collapsing to one word per line is
   worse than a short sideways scroll; below that floor the wrapper scrolls
   inside its own box and the document stays at 100% width. Measured at 375px:
   no page-level overflow. */

.lp-compare-head {
  max-width: 780px;
  margin: 30px auto 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}

.lp-compare-scroll {
  max-width: 780px;
  margin: 12px auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

/* The wrapper is a tab stop, because a region that scrolls has to be reachable
   without a mouse. Same pattern the homepage's .services-viewport already uses
   (tabindex="0" + role="region"), and the same focus ring custom.css gives that
   element - repeated here only because that rule is a list of concrete
   selectors, not a class this one can join. */
.lp-compare-scroll:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.lp-compare {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.lp-compare th,
.lp-compare td {
  padding: 13px 18px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.lp-compare tr:last-child th,
.lp-compare tr:last-child td {
  border-bottom: 0;
}

.lp-compare thead th {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.lp-compare tbody th {
  font-weight: 600;
  color: #fff;
}

.lp-compare tbody td {
  font-weight: 400;
  color: #c7cbd4;
}

/* --- shop-choice centrepiece (insurance page, position two) ----------------
   Owner review 2026-08-30: "the main selling point but it's buried in the
   middle of the page and not readable at all." It used to be the page's fourth
   section, wearing the same .display-8 heading and the same #0e1013 card as
   every block around it, with 16px paragraphs inside. Nothing about it said
   "this is the argument".

   The words are owner-verbatim and byte-pinned by the suite, so all of the
   promotion is done here. Three levers, no new ones:

     1. Scale. The heading runs above every other h2 on the page and at or just
        under the H1 (measured: h1 is 60px on desktop and 48px at 375px); the
        paragraphs run a full step above body copy, and the middle one -- the
        incentive contrast the whole page rests on -- is larger again, white,
        and semibold.
     2. Measure and air. 62ch of line length and 28px between paragraphs, in a
        panel with 52px of internal padding, so it reads as a statement rather
        than a dense card.
     3. Surface. The same #0e1013 as the other cards, lifted by a white wash at
        6% and a slightly brighter hairline. Palette and type family unchanged:
        greys and white only, no accent colour anywhere. */
.lp-choice {
  padding: 34px 0 12px;
}

.lp-choice-inner {
  /* The container carries no side gutter at phone widths (same reason the hero
     panel keeps its own), and a bordered panel must never touch the edge. */
  max-width: min(820px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 52px 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  text-align: left;
}

.lp-choice-head {
  margin: 0;
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Measured at 375px: without it the heading breaks as "You don't have to /
     use the insurer's / shop." and strands one word on the last line. Ignored
     by browsers that do not implement it, which get the ragged break above. */
  text-wrap: balance;
}

.lp-choice-lede {
  margin: 28px 0 0;
  max-width: 62ch;
  color: #d6d9e0;
  font-size: 20px;
  line-height: 1.62;
}

/* The emotional core: same three sentences, more weight on the page. */
.lp-choice-core {
  margin: 28px 0 0;
  max-width: 62ch;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.45;
}

/* --- work-proof placeholders (owner assets pending) ------------------------ */

.lp-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 30px auto 0;
  max-width: 900px;
}

/* Deliberately reads as a reserved slot, not a broken image: real before/after
   photos require owner authorization (plan §8) and are never faked. */
.lp-proof-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: #8c92a0;
  text-align: center;
  padding: 20px;
}

.lp-proof-tile strong {
  color: #d6d9e0;
  font-size: 16px;
  font-weight: 600;
}

.lp-proof-tile span {
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
}

.lp-proof-note {
  margin: 14px auto 0;
  max-width: 640px;
  text-align: center;
  color: #8c92a0;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- insurer names strip (factual claims-handling list) -------------------- */

.lp-insurers {
  margin: 22px auto 0;
  max-width: 720px;
  text-align: center;
  color: #c7cbd4;
  font-size: 15.5px;
  line-height: 1.7;
}

.lp-insurers strong {
  color: #fff;
  font-weight: 600;
}

.lp-disclosure {
  margin: 14px auto 0;
  max-width: 680px;
  text-align: center;
  color: #8c92a0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- inline CTA row after proof sections (§8.2: actions after key proof) ---- */

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* --- estimate section trust line ------------------------------------------- */

.lp-form-trust {
  margin: 22px auto 0;
  text-align: center;
  color: #8c92a0;
  font-size: 14px;
  line-height: 1.7;
  max-width: 640px;
}

.lp-form-trust a {
  color: #c7cbd4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- FAQ block ------------------------------------------------------------- */

/* Accordions themselves reuse the homepage classes; this only spaces the
   section and left-aligns the answers. */
.lp-faq .accordion-main {
  margin-top: 10px;
}

/* --- responsive ------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .lp-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-steps li:last-child {
    grid-column: 1 / -1;
  }
  /* The panel steps on the site's own breakpoints rather than on a viewport
     clamp, so it tracks the type scale it lives in. Measured, because that
     scale is not monotonic -- az-collision.css takes .display-8 down 60 / 36 /
     32 and then back UP to 40 below 480, and .display-10 runs 60 / 56 / 40 /
     48. The heading is set to sit above every sibling h2 and at or just under
     the H1 at each step: 64 (h1 60) / 52 (h1 56) / 40 (h1 40) / 44 (h1 48). */
  .lp-choice-inner {
    padding: 40px 40px 44px;
  }
  .lp-choice-head {
    font-size: 52px;
  }
  .lp-choice-core {
    font-size: 24px;
  }
}

@media screen and (max-width: 767px) {
  .lp-cols,
  .lp-routes,
  .lp-proof {
    grid-template-columns: 1fr;
  }
  .lp-section {
    padding-top: 44px;
  }
  .lp-choice-inner {
    padding: 30px 26px 32px;
  }
  .lp-choice-head {
    font-size: 40px;
  }
  .lp-choice-lede {
    font-size: 19px;
  }
  .lp-choice-core {
    font-size: 23px;
  }
  .lp-choice-lede,
  .lp-choice-core {
    margin-top: 22px;
  }
}

@media screen and (max-width: 479px) {
  .lp-steps {
    grid-template-columns: 1fr;
  }
  .lp-steps li:last-child {
    grid-column: auto;
  }
  /* Not a typo and not a missing step: below 480 the site's own headings go
     back up (h2 32 -> 40, h1 40 -> 48), so the panel follows them up to 44.
     Measured at 320px, the narrowest viewport worth supporting: the panel is
     256px wide, 216px of it text, and the longest word in the heading
     ("insurer's") sets ~190px at 44px. It fits without a hyphen. */
  .lp-choice-inner {
    padding: 26px 20px 28px;
    border-radius: 16px;
  }
  .lp-choice-head {
    font-size: 44px;
    letter-spacing: -0.015em;
  }
  .lp-choice-lede {
    font-size: 18.5px;
  }
  .lp-choice-core {
    font-size: 23px;
  }
  .lp-facts li {
    padding: 20px 18px 20px 64px;
  }
  .lp-facts li::before {
    left: 18px;
    top: 20px;
  }
  /* Both CTAs full-width and stacked on phones, matching the primary button's
     own <=479px spread; nothing moves when either wraps. */
  .lp-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-cta-row .primary-button,
  .lp-btn-call {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}