/* Only the Request a Security Assessment page loads this stylesheet, on top of
   contact.css for the shared banner, panels, and fields. The assessment types
   are radio cards that turn navy when chosen, like the options on the
   Security Assessments page. */
.ra-next { display: grid; gap: 1.25rem; margin: 0 0 clamp(1.5rem, 3vw, 2rem); padding: 0; list-style: none; counter-reset: ra-step; }
.ra-next li { position: relative; padding-left: 3.5rem; counter-increment: ra-step; }
.ra-next li::before { content: counter(ra-step); position: absolute; top: -.25rem; left: 0; color: transparent; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; line-height: 1; -webkit-text-stroke: 1.5px #8db8e8; }
.ra-next h3 { margin: 0 0 .25rem; font-size: 1.125rem; line-height: 1.3; }
.ra-next p { margin: 0; color: rgb(255 255 255 / .78); font-size: 1rem; line-height: 1.55; }

.ra-options, .ra-areas { min-width: 0; margin: 0 0 1.75rem; padding: 0; border: 0; }
.ra-options legend, .ra-areas legend { margin-bottom: .75rem; padding: 0; font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.ra-options ul, .ra-areas ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ra-areas { margin-top: 1.75rem; }

.ra-option { position: relative; display: flex; gap: .875rem; height: 100%; padding: 1.125rem 1.25rem; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ra-option input, .ra-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: .125rem 0 0; accent-color: var(--accent); cursor: pointer; }
.ra-option input:focus-visible, .ra-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ra-option-text { display: grid; gap: .125rem; min-width: 0; }
.ra-option-text strong { font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.3; }
.ra-option-text > span:last-child { color: var(--muted); font-size: .9375rem; line-height: 1.5; transition: color .3s ease; }
.ra-option-label { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: color .3s ease; }
.ra-option:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.ra-option:has(input:checked) .ra-option-label { color: #ff8da1; }
.ra-option:has(input:checked) .ra-option-text > span:last-child { color: rgb(255 255 255 / .88); }
.ra-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.ra-options.is-invalid .ra-option { border-color: var(--cu-error); }
.ra-options .quote-error { margin-top: .75rem; }

.ra-check { display: flex; align-items: center; gap: .75rem; min-height: 44px; line-height: 1.35; cursor: pointer; }

/* The sites field only appears for multi-site requests once the script runs. */
#ra-sites-field[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ra-option:not(:has(input:checked)):hover { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .ra-option, .ra-option-text > span:last-child, .ra-option-label { transition: none; }
}
@media (min-width: 40rem) {
  .ra-options ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
}