/* v446G — Add-on request steps readability + compact layout.
   Scope: add-on-services.html only. Make the "How to request add-ons" area
   easier to read without letting it sprawl across the page. */

body.addon-page .addon-request-section{
  padding-top:clamp(54px, 5vw, 82px) !important;
  padding-bottom:clamp(54px, 5vw, 82px) !important;
}

body.addon-page .addon-request-section > .container{
  display:grid !important;
  grid-template-columns:minmax(460px, .92fr) minmax(0, 1.08fr) !important;
  grid-template-areas:
    "eyebrow heading"
    "steps actions" !important;
  column-gap:clamp(42px, 5vw, 84px) !important;
  row-gap:24px !important;
  align-items:center !important;
  width:min(100% - 72px, 1480px) !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.addon-page .addon-request-section > .container > .eyebrow{
  grid-area:eyebrow !important;
  margin:0 0 4px !important;
  font-size:clamp(17px, 1.2vw, 22px) !important;
  letter-spacing:.08em !important;
}

body.addon-page .addon-request-heading-desktop{
  grid-area:heading !important;
  display:block !important;
  margin:0 !important;
  max-width:780px !important;
  font-size:clamp(38px, 3.25vw, 56px) !important;
  line-height:1.05 !important;
  letter-spacing:-.045em !important;
}

body.addon-page .addon-request-heading-mobile{
  display:none !important;
}

body.addon-page .addon-request-section .step-list-card.urgent-step-list{
  grid-area:steps !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:16px !important;
  width:100% !important;
  max-width:620px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.addon-page .addon-request-section .step-item{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  gap:14px !important;
  align-items:start !important;
  min-height:98px !important;
  padding:20px 22px !important;
  border:1px solid rgba(203,213,225,.95) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.045) !important;
  box-sizing:border-box !important;
}

body.addon-page .addon-request-section .step-item b{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:62px !important;
  height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:#dbeafe !important;
  color:#2563eb !important;
  font-size:15px !important;
  font-weight:950 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

body.addon-page .addon-request-section .step-item strong{
  display:block !important;
  margin:0 0 5px !important;
  font-size:clamp(18px, 1.35vw, 24px) !important;
  line-height:1.1 !important;
  letter-spacing:-.025em !important;
}

body.addon-page .addon-request-section .step-item p.muted{
  margin:0 !important;
  max-width:100% !important;
  font-size:clamp(15px, 1vw, 18px) !important;
  line-height:1.28 !important;
  color:#475569 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

body.addon-page .addon-request-section .hero-actions{
  grid-area:actions !important;
  display:grid !important;
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) !important;
  gap:18px !important;
  align-items:center !important;
  width:min(100%, 820px) !important;
  max-width:820px !important;
  margin:0 !important;
  justify-content:start !important;
}

body.addon-page .addon-request-section .hero-actions .btn{
  width:100% !important;
  min-height:54px !important;
  padding:14px 22px !important;
  border-radius:999px !important;
  font-size:clamp(16px, 1.1vw, 20px) !important;
  font-weight:950 !important;
  line-height:1.1 !important;
}

/* Keep the background wave subtle and not visually dominant in this compact block. */
body.addon-page .addon-request-section::before,
body.addon-page .addon-request-section::after{
  opacity:.38 !important;
  pointer-events:none !important;
}

@media(max-width:1180px){
  body.addon-page .addon-request-section > .container{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "eyebrow"
      "heading"
      "steps"
      "actions" !important;
    row-gap:18px !important;
    width:min(100% - 44px, 1480px) !important;
  }

  body.addon-page .addon-request-section .step-list-card.urgent-step-list{
    max-width:100% !important;
  }

  body.addon-page .addon-request-section .hero-actions{
    width:100% !important;
    max-width:100% !important;
  }
}

@media(max-width:760px){
  body.addon-page .addon-request-section{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

  body.addon-page .addon-request-section > .container{
    width:min(100% - 32px, 1480px) !important;
  }

  body.addon-page .addon-request-heading-desktop{
    font-size:clamp(30px, 8vw, 42px) !important;
  }

  body.addon-page .addon-request-section .step-list-card.urgent-step-list{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body.addon-page .addon-request-section .step-item{
    min-height:0 !important;
    padding:16px !important;
  }

  body.addon-page .addon-request-section .hero-actions{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}