/* ============================================================
   MOTAVIO VEHICLE HISTORY STRUCTURE V2
   ============================================================ */

body.mv-public {
  --vh2-page:#030a11;
  --vh2-alt:#06111a;
  --vh2-card:#081722;
  --vh2-card2:#0b1d2a;
  --vh2-head:#f5f7fa;
  --vh2-text:#afc0cb;
  --vh2-muted:#7f94a2;
  --vh2-line:#193447;

  --vh2-accent:#e2b449;
  --vh2-accent-hi:#f1c85e;
  --vh2-contrast:#071019;

  --vh2-shadow:
    0 20px 58px rgba(0,0,0,.20);
}


html[data-mv-theme="light"] body.mv-public {
  --vh2-page:#ffffff;
  --vh2-alt:#f4f9fc;
  --vh2-card:#ffffff;
  --vh2-card2:#eef6fb;
  --vh2-head:#071a2c;
  --vh2-text:#526a7d;
  --vh2-muted:#718594;
  --vh2-line:#d8e5ee;

  --vh2-accent:#168fe6;
  --vh2-accent-hi:#2da2f3;
  --vh2-contrast:#ffffff;

  --vh2-shadow:
    0 18px 52px rgba(7,26,44,.08);
}


.mvh-section {
  position:relative;

  padding:
    96px 0;

  color:
    var(--vh2-text);

  background:
    var(--vh2-page);

  border-bottom:
    1px solid
    var(--vh2-line);
}


.mvh-section:nth-of-type(even) {
  background:
    var(--vh2-alt);
}


.mvh-section-head {
  max-width:
    850px;

  margin:
    0 auto
    47px;

  text-align:center;
}


.mvh-section-head h2,
.mvh-detail-copy h2,
.mvh-price-copy h2,
.mvh-final h2 {
  margin:
    18px 0
    16px;

  color:
    var(--vh2-head) !important;

  font-size:
    clamp(
      40px,
      4vw,
      59px
    ) !important;

  line-height:
    1.03 !important;

  font-weight:
    820 !important;

  letter-spacing:
    -.045em !important;

  text-wrap:
    balance;
}


.mvh-section-head h2 span,
.mvh-detail-copy h2 span,
.mvh-price-copy h2 span,
.mvh-final h2 span {
  color:
    var(--vh2-accent) !important;
}


.mvh-section-head > p:last-child,
.mvh-detail-copy > p,
.mvh-price-copy > p,
.mvh-final > p {
  max-width:
    720px;

  color:
    var(--vh2-text) !important;

  font-size:
    16px;

  line-height:
    1.65;
}


/* ============================================================
   REPORT GRID
   ============================================================ */

.mvh-report-grid {
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    16px;
}


.mvh-report-card {
  min-height:
    235px;

  padding:
    28px;

  border:
    1px solid
    var(--vh2-line);

  border-radius:
    20px;

  background:
    var(--vh2-card);

  box-shadow:
    var(--vh2-shadow);

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.mvh-report-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--vh2-accent) 40%,
      var(--vh2-line)
    );
}


.mvh-card-icon {
  width:
    42px;

  height:
    42px;

  display:grid;

  place-items:center;

  border-radius:
    12px;

  color:
    var(--vh2-accent);

  background:
    color-mix(
      in srgb,
      var(--vh2-accent) 10%,
      transparent
    );

  font-size:
    11px;

  font-weight:
    950;
}


.mvh-report-card h3 {
  margin:
    35px 0
    11px;

  color:
    var(--vh2-head) !important;

  font-size:
    20px;

  line-height:
    1.2;
}


.mvh-report-card p {
  margin:0;

  color:
    var(--vh2-text) !important;

  font-size:
    14px;

  line-height:
    1.65;
}


/* ============================================================
   BENEFITS
   ============================================================ */

.mvh-benefit-grid {
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    18px;
}


.mvh-benefit-grid article {
  min-height:
    280px;

  padding:
    31px;

  border:
    1px solid
    var(--vh2-line);

  border-radius:
    22px;

  background:
    var(--vh2-card);

  box-shadow:
    var(--vh2-shadow);
}


.mvh-benefit-number {
  color:
    var(--vh2-accent);

  font-size:
    11px;

  font-weight:
    950;

  letter-spacing:
    .1em;
}


.mvh-benefit-grid h3 {
  margin:
    62px 0
    13px;

  color:
    var(--vh2-head) !important;

  font-size:
    23px;

  line-height:
    1.16;
}


.mvh-benefit-grid p {
  margin:0;

  color:
    var(--vh2-text) !important;

  font-size:
    14px;

  line-height:
    1.65;
}


/* ============================================================
   LARGE DETAIL ROWS
   ============================================================ */

.mvh-detail {
  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(0,1.12fr);

  gap:
    76px;

  align-items:center;
}


.mvh-detail--reverse
.mvh-detail-copy {
  order:2;
}


.mvh-detail--reverse
.mvh-demo-card {
  order:1;
}


.mvh-detail-copy {
  max-width:
    520px;
}


.mvh-detail-copy ul {
  margin:
    28px 0
    0;

  padding:0;

  list-style:none;

  display:grid;

  gap:
    12px;
}


.mvh-detail-copy li {
  position:relative;

  padding-left:
    30px;

  color:
    var(--vh2-head) !important;

  font-size:
    14px;

  line-height:
    1.5;
}


.mvh-detail-copy li::before {
  content:"✓";

  position:absolute;

  left:0;
  top:0;

  width:21px;
  height:21px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  color:
    var(--vh2-contrast);

  background:
    var(--vh2-accent);

  font-size:
    10px;

  font-weight:
    950;
}


/* ============================================================
   PRODUCT MOCKUPS
   ============================================================ */

.mvh-demo-card {
  min-height:
    420px;

  padding:
    28px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vh2-accent) 25%,
      var(--vh2-line)
    );

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      var(--vh2-card),
      var(--vh2-card2)
    );

  box-shadow:
    0 28px 75px
    color-mix(
      in srgb,
      var(--vh2-head) 10%,
      transparent
    );
}


.mvh-demo-top {
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    16px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid
    var(--vh2-line);
}


.mvh-demo-top span {
  color:
    var(--vh2-accent);

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    .1em;
}


.mvh-demo-top b {
  color:
    var(--vh2-muted);

  font-size:
    9px;

  font-weight:
    750;
}


.mvh-mileage-chart {
  margin-top:
    32px;

  display:grid;

  gap:
    24px;
}


.mvh-mileage-bar {
  display:grid;

  grid-template-columns:
    45px
    minmax(0,1fr)
    90px;

  gap:
    13px;

  align-items:center;
}


.mvh-mileage-bar span {
  color:
    var(--vh2-muted);

  font-size:
    11px;
}


.mvh-mileage-bar i {
  position:relative;

  height:
    9px;

  overflow:hidden;

  border-radius:
    999px;

  background:
    color-mix(
      in srgb,
      var(--vh2-line) 70%,
      transparent
    );
}


.mvh-mileage-bar i::after {
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:
    var(--bar);

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--vh2-accent),
      var(--vh2-accent-hi)
    );
}


.mvh-mileage-bar strong {
  color:
    var(--vh2-head);

  font-size:
    12px;

  text-align:right;
}


.mvh-demo-card > small,
.mvh-demo-disclaimer {
  display:block;

  margin-top:
    28px;

  color:
    var(--vh2-muted) !important;

  font-size:
    9px;

  line-height:
    1.5;
}


/* Events */

.mvh-event-demo {
  display:flex;

  flex-direction:column;
}


.mvh-event-demo article {
  margin-top:
    14px;

  padding:
    17px;

  display:grid;

  grid-template-columns:
    43px
    minmax(0,1fr);

  gap:
    15px;

  border:
    1px solid
    var(--vh2-line);

  border-radius:
    14px;

  background:
    color-mix(
      in srgb,
      var(--vh2-card) 75%,
      transparent
    );
}


.mvh-event-status {
  width:43px;
  height:43px;

  display:grid;

  place-items:center;

  border-radius:
    12px;

  color:
    var(--vh2-accent);

  background:
    color-mix(
      in srgb,
      var(--vh2-accent) 10%,
      transparent
    );

  font-size:
    10px;

  font-weight:
    950;
}


.mvh-event-demo article small {
  color:
    var(--vh2-muted);

  font-size:
    9px;

  font-weight:
    750;
}


.mvh-event-demo article strong {
  display:block;

  margin-top:
    4px;

  color:
    var(--vh2-head);

  font-size:
    14px;
}


.mvh-event-demo article p {
  margin:
    5px 0
    0;

  color:
    var(--vh2-text) !important;

  font-size:
    11px;

  line-height:
    1.5;
}


/* ============================================================
   PROCESS
   ============================================================ */

.mvh-process-grid {
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    14px;
}


.mvh-process-grid::before {
  content:"";

  position:absolute;

  left:
    12.5%;

  right:
    12.5%;

  top:
    25px;

  height:
    1px;

  background:
    var(--vh2-line);
}


.mvh-process-grid article {
  position:relative;

  z-index:1;

  padding:
    0 13px;

  text-align:center;
}


.mvh-process-grid article > span {
  width:
    50px;

  height:
    50px;

  margin:
    0 auto
    25px;

  display:grid;

  place-items:center;

  border:
    1px solid
    var(--vh2-accent);

  border-radius:
    50%;

  color:
    var(--vh2-contrast);

  background:
    var(--vh2-accent);

  box-shadow:
    0 10px 25px
    color-mix(
      in srgb,
      var(--vh2-accent) 18%,
      transparent
    );

  font-weight:
    950;
}


.mvh-process-grid h3 {
  margin:
    0 0
    10px;

  color:
    var(--vh2-head) !important;

  font-size:
    17px;
}


.mvh-process-grid p {
  margin:0;

  color:
    var(--vh2-text) !important;

  font-size:
    12.5px;

  line-height:
    1.6;
}


/* ============================================================
   PRICE
   ============================================================ */

.mvh-price-card {
  max-width:
    1040px;

  margin:
    0 auto;

  padding:
    42px 46px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    50px;

  align-items:center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vh2-accent) 36%,
      var(--vh2-line)
    );

  border-radius:
    25px;

  background:
    var(--vh2-card);

  box-shadow:
    var(--vh2-shadow);
}


.mvh-price {
  margin-top:
    27px;

  display:flex;

  align-items:baseline;

  gap:
    11px;
}


.mvh-price strong {
  color:
    var(--vh2-accent);

  font-size:
    38px;

  line-height:
    1;

  letter-spacing:
    -.04em;
}


.mvh-price span {
  color:
    var(--vh2-muted);

  font-size:
    12px;
}


.mvh-price-action {
  display:flex;

  flex-direction:column;

  align-items:center;

  gap:
    10px;
}


.mvh-price-action .mv-primary {
  min-width:
    230px;

  text-align:center;
}


.mvh-price-action small {
  color:
    var(--vh2-muted);

  font-size:
    9.5px;
}


/* ============================================================
   FAQ
   ============================================================ */

.mvh-faq-list {
  max-width:
    900px;

  margin:
    0 auto;

  display:grid;

  gap:
    10px;
}


.mvh-faq-list details {
  overflow:hidden;

  border:
    1px solid
    var(--vh2-line);

  border-radius:
    15px;

  background:
    var(--vh2-card);

  box-shadow:
    0 10px 28px
    color-mix(
      in srgb,
      var(--vh2-head) 4%,
      transparent
    );
}


.mvh-faq-list summary {
  min-height:
    64px;

  padding:
    0 21px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    16px;

  color:
    var(--vh2-head);

  font-size:
    14px;

  font-weight:
    780;

  cursor:pointer;

  list-style:none;
}


.mvh-faq-list summary::-webkit-details-marker {
  display:none;
}


.mvh-faq-list summary::after {
  content:"+";

  width:28px;
  height:28px;

  flex:
    0 0 28px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  color:
    var(--vh2-contrast);

  background:
    var(--vh2-accent);

  font-size:
    17px;

  font-weight:
    900;
}


.mvh-faq-list details[open]
summary::after {
  content:"−";
}


.mvh-faq-list details p {
  max-width:
    760px;

  margin:
    0;

  padding:
    0 21px
    21px;

  color:
    var(--vh2-text) !important;

  font-size:
    13.5px;

  line-height:
    1.65;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.mvh-final {
  padding:
    92px 0;

  text-align:center;

  color:
    var(--vh2-head);

  background:
    radial-gradient(
      circle at 50% 0%,
      color-mix(
        in srgb,
        var(--vh2-accent) 13%,
        transparent
      ),
      transparent 46%
    ),
    var(--vh2-page);
}


.mvh-final .mv-shell {
  max-width:
    820px;
}


.mvh-final > .mv-shell > p {
  margin-left:auto;
  margin-right:auto;
}


.mvh-final .mv-primary {
  margin-top:
    13px;

  display:inline-flex;
}


/* ============================================================
   LIGHT MODE POLISH
   ============================================================ */

html[data-mv-theme="light"]
.mvh-demo-card {
  box-shadow:
    0 22px 65px
    rgba(7,26,44,.10);
}


html[data-mv-theme="light"]
.mvh-report-card,
html[data-mv-theme="light"]
.mvh-benefit-grid article,
html[data-mv-theme="light"]
.mvh-faq-list details {
  border-color:
    #d8e5ee;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px) {

  .mvh-report-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .mvh-detail {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .mvh-detail-copy {
    max-width:
      720px;
  }


  .mvh-detail--reverse
  .mvh-detail-copy,
  .mvh-detail--reverse
  .mvh-demo-card {
    order:
      initial;
  }


  .mvh-process-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      38px 18px;
  }


  .mvh-process-grid::before {
    display:none;
  }


  .mvh-price-card {
    grid-template-columns:
      1fr;
  }


  .mvh-price-action {
    align-items:
      flex-start;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:680px) {

  .mvh-section {
    padding:
      70px 0;
  }


  .mvh-section-head {
    margin-bottom:
      34px;
  }


  .mvh-report-grid,
  .mvh-benefit-grid,
  .mvh-process-grid {
    grid-template-columns:
      1fr;
  }


  .mvh-report-card,
  .mvh-benefit-grid article {
    min-height:
      0;
  }


  .mvh-benefit-grid h3 {
    margin-top:
      32px;
  }


  .mvh-demo-card {
    min-height:
      0;

    padding:
      21px;
  }


  .mvh-mileage-bar {
    grid-template-columns:
      38px
      minmax(0,1fr);

    gap:
      9px;
  }


  .mvh-mileage-bar strong {
    grid-column:
      2;

    text-align:left;
  }


  .mvh-price-card {
    padding:
      29px 23px;
  }


  .mvh-price-action {
    align-items:
      stretch;
  }


  .mvh-price-action
  .mv-primary {
    min-width:0;
    width:100%;
  }


  .mvh-final {
    padding:
      72px 0;
  }

}