/*
 * Mobile Rooted Rocket Difference layout.
 * Loaded after the homepage styles so the cards use normal document flow
 * instead of inheriting the desktop minimum height and vertical centering.
 */

/* Only this specific call to action stays Copper before and during interaction. */
.rr-v2.route-home #difference-panel-inside .text-link[href="/process/#process"],
.rr-v2.route-home #difference-panel-inside .text-link[href="/process/#process"]:visited,
.rr-v2.route-home #difference-panel-inside .text-link[href="/process/#process"]:hover,
.rr-v2.route-home #difference-panel-inside .text-link[href="/process/#process"]:focus-visible {
  color: var(--rr-copper) !important;
}

@media (max-width: 700px) {
  .rr-v2.route-home #rooted-rocket-difference .rr-difference__panel[hidden] {
    display: none !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__panel:not([hidden]) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: initial !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy,
  .rr-v2.route-home #rooted-rocket-difference .rr-difference__proof {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 1.25rem 1.25rem 1.4rem !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy {
    justify-content: initial !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy > span,
  .rr-v2.route-home #rooted-rocket-difference .rr-difference__proof > span {
    margin: 0 0 .7rem !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy h3 {
    display: block !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 .85rem !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--rr-primary-navy) !important;
    font-size: 1.5rem !important;
    line-height: 1.16 !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy p {
    display: block !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__copy .text-link {
    display: inline-flex !important;
    margin-top: 1rem !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__proof {
    justify-content: initial !important;
    border-top: 1px solid rgba(var(--rr-primary-navy-rgb), .16) !important;
    border-left: 0 !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__proof h4 {
    margin: 0 0 .9rem !important;
  }

  .rr-v2.route-home #rooted-rocket-difference .rr-difference__proof ul {
    gap: .65rem !important;
    margin: 0 !important;
  }
}