/* =====================================================================
   The phone quote engine sits in a double frame.

   A thick light-green band runs around the engine, with a thin gold line just
   inside it - the green frame marks the engine as one block on the dark band,
   the gold hairline is the accent the rest of the site uses for its edges.

   Both lines are drawn by #quote-form itself: the light green as its own
   border, the gold as an inset shadow, so no extra markup is needed and the
   engine's contents keep the whole inner area.

   Phone/tablet only: the desk card keeps its white panel.
   ===================================================================== */
@media (max-width: 1024px) {
  html body[data-mobile="true"] #quote-form,
  html body[data-mobile="true"] #quote-form.quote-wrapper {
    border: 3px solid #a5d4d6 !important;
    border-top: 3px solid #a5d4d6 !important;
    border-radius: 22px !important;
    padding: 12px !important;
    /* The engine keeps its dark interior so its own white type stays legible
       against the light band it now sits on. */
    background: #013947 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px #d4af37 !important;
  }

  /* Everything around the engine wears the same pale green as the header and
     the Compare & Apply panel, so the engine reads as one framed block on the
     page rather than a dark hole in it. */
  html body[data-mobile="true"] #hero,
  html body[data-mobile="true"] #hero .container,
  html body[data-mobile="true"] #hero .hero-grid {
    background: #f0f7f7 !important;
    background-image: none !important;
  }

  /* The pale band carries on to the next panel, so no slice of the page's dark
     backdrop shows between the engine and the Compare & Apply panel. */
  html body[data-mobile="true"] #hero {
    padding-bottom: 12px !important;
  }
}

/* =====================================================================
   The desk card's own border.

   The engine's card sits on the hero's green-to-gold band, so its border
   follows that band: the house green on the left, the dark golden of the
   right-hand panel on the right, blended across the middle. A gradient border
   cannot be drawn with border-image without squaring the card's rounded
   corners, so the border itself is left transparent and the gradient is painted
   as a second background clipped to the border box, with the card's white
   sitting inside it on the padding box.
   ===================================================================== */
@media (min-width: 1025px) {
  #quote-form.quote-wrapper {
    border: 2.5px solid transparent !important;
    background-image:
      linear-gradient(#ffffff, #ffffff),
      linear-gradient(90deg, #0d393b 0%, #013947 20%, #4a4318 52%, #8f6c14 78%, #a37d1a 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    /* The glow follows the gold the border lands on. */
    box-shadow: 0 20px 44px rgba(143, 108, 20, 0.26), 0 0 0 6px rgba(255, 255, 255, 0.34) !important;
  }
}