/* =====================================================================
   The phone quote engine sits in a gold frame on the same green ground as the
   hero. The thick border and rounded corners mark the engine as one block, and
   the surrounding hero colour carries straight through to the edge.

   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: 2px solid #d4af37 !important;
    border-top: 2px solid #d4af37 !important;
    border-radius: 28px !important;
    padding: 12px !important;
    /* The engine's ground is the hero's own green, so the sliver of the hero
       above the card flows straight into the panel. */
    background: #0d606b !important;
    background-image: none !important;
    box-shadow: 0 14px 34px rgba(7, 37, 41, 0.26) !important;
  }

  /* The hero ground matches the engine, so the area around the gold frame is
     one continuous green field rather than a dark band above and beside it. */
  html body[data-mobile="true"] #hero#hero,
  html body[data-mobile="true"] #hero#hero .container,
  html body[data-mobile="true"] #hero#hero .hero-grid {
    background: #0d606b !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#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;
  }
}