/* Custom agent assessment (Custom Agent Assessment.dc.html). Class prefix ma-. Values are the design's inline styles. */

html:not(.ma-js) [data-ma-grid], html:not(.ma-js) .ma-stepper { display: none; }
html.ma-js .ma-noscript { display: none; }
.ma-sent .ma-header__save { display: none !important; }
.ma-body { margin: 0; background: var(--gds-slate-75); font-family: var(--font-sans); color: var(--fg-primary); -webkit-font-smoothing: antialiased; }
.ma-body h1, .ma-body h2, .ma-body h3, .ma-body p, .ma-body ul, .ma-body dl, .ma-body dd { margin: 0; }
.ma-body img { display: block; max-width: 100%; }
.ma-body [hidden] { display: none !important; }
.ma-body a { color: var(--gds-blue); text-decoration: none; }
.ma-body a:hover { text-decoration: underline; color: var(--gds-navy-deep); }
.ma-body input:focus, .ma-body textarea:focus, .ma-body button:focus-visible, .ma-body a:focus-visible { outline: 2px solid var(--gds-blue); outline-offset: 1px; }
.ma-body [tabindex="-1"]:focus { outline: none; }
@keyframes gdsUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes maSpin { to { transform: rotate(360deg); } }

/* Header */
.ma-header { position: sticky; top: 0; z-index: 50; background: var(--gds-navy); }
.ma-header__in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 24px; }
.ma-header__logo { display: flex; flex: none; }
.ma-header__logo img { height: 32px; width: auto; }
.ma-header__page { display: none; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.ma-header__right { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14px; }
.ma-header__save { display: none; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.7); }
.ma-body .ma-header__help { color: #fff; font-weight: 500; }
.ma-body .ma-header__help:hover { color: var(--gds-yellow); text-decoration: none; }

/* Stepper */
.ma-stepper { position: sticky; top: 68px; z-index: 40; background: #fff; border-bottom: 1px solid var(--border-default); }
.ma-stepper__in { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 12px; overflow-x: auto; }
.ma-stepper__item { display: flex; align-items: center; gap: 12px; flex: none; }
.ma-stepper__sep { width: 24px; height: 1px; background: var(--border-default); }
.ma-stepper__count { margin-left: auto; flex: none; font-size: 13px; color: var(--fg-tertiary); }
.ma-step { font: inherit; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; border: none; cursor: pointer; background: transparent; color: var(--gds-navy); }
.ma-step__label { white-space: nowrap; display: none; }
.ma-step__dot { width: 26px; height: 26px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: #fff; color: var(--fg-tertiary); border: 1px solid var(--border-default); }
.ma-step__check { display: none; }
.ma-step.is-done .ma-step__dot { background: var(--gds-navy); color: #fff; border: none; }
.ma-step.is-done .ma-step__n { display: none; }
.ma-step.is-done .ma-step__check { display: flex; }
.ma-step.is-current { background: var(--gds-navy); color: #fff; }
.ma-step.is-current .ma-step__dot { background: var(--gds-yellow); color: var(--gds-navy); border: none; }
.ma-step.is-current .ma-step__label { display: inline; }
.ma-step:disabled { cursor: default; color: var(--fg-tertiary); }

/* Layout */
/* The page fills the viewport so a short step keeps the footer at the bottom: main takes the free height.
   border-box with max-width 1344px = the design's 1280px content + 2 × 32px padding. */
body.ma-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.ma-main { flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 1344px; margin: 0 auto; padding: 40px 32px 96px; }
.ma-noscript { max-width: 720px; margin: 0 auto; padding: 24px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.ma-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.ma-col { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ma-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.ma-head__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gds-blue); }
.ma-head__title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--gds-navy); text-wrap: balance; }
.ma-head__sub { font-size: 17px; line-height: 1.6; color: var(--fg-secondary); text-wrap: pretty; }
.ma-form { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.ma-body-step { display: flex; flex-direction: column; gap: 20px; }
.ma-body-step.is-fresh { animation: gdsUp 250ms ease-out both; }
.ma-body-step--areas { gap: 16px; }

/* Cards, chips */
.ma-card { margin: 0; min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ma-card legend { float: left; padding: 0; font-size: 16px; font-weight: 600; color: var(--gds-navy); }
.ma-card__h2 { font-size: 18px; font-weight: 600; color: var(--gds-navy); margin-bottom: 8px; }
.ma-opt { font-size: 13px; font-weight: 400; color: var(--fg-tertiary); }
.ma-req { color: #D92D20; }
.ma-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-chip { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-default); background: #fff; color: var(--gds-navy); }
.ma-chip[aria-pressed="true"] { background: var(--gds-navy); border-color: var(--gds-navy); color: #fff; }
.ma-err { font-size: 13px; color: #D92D20; }
.ma-err:empty { display: none; }
.ma-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.ma-label { font-size: 14px; font-weight: 500; color: var(--gds-navy); }
.ma-label--tight { margin-top: 6px; }
.ma-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #fff; color: var(--gds-navy); }
.ma-input[aria-invalid="true"] { border-color: #D92D20; }
textarea.ma-input { line-height: 1.5; resize: vertical; }

/* Hosting radio cards */
.ma-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ma-radio { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: #fff; }
.ma-radio[aria-checked="true"] { border: 1.5px solid var(--gds-blue); background: #F3F7FF; padding: 17.5px; }
.ma-radio__t { font-size: 15px; font-weight: 600; color: var(--gds-navy); }
.ma-radio__d { font-size: 13.5px; line-height: 1.45; color: var(--fg-secondary); }

/* Capability areas */
.ma-area { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.ma-area.is-open { border: 1.5px solid var(--gds-blue); }
.ma-area__head { font: inherit; text-align: left; width: 100%; cursor: pointer; background: none; border: none; padding: 22px 24px; display: flex; align-items: center; gap: 16px; }
.ma-area.is-open .ma-area__head { padding: 21.5px 23.5px; }
.ma-area__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-area__name { font-size: 18px; font-weight: 600; color: var(--gds-navy); }
.ma-area__desc { font-size: 14px; color: var(--fg-secondary); }
.ma-area__preview { font-size: 13px; color: var(--fg-tertiary); margin-top: 4px; }
.ma-area__count { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: transparent; color: var(--fg-tertiary); }
.ma-area.has-picks .ma-area__count { background: var(--gds-blue-50); color: var(--gds-blue); }
.ma-area__switch { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #CFD3DA; position: relative; transition: background 200ms ease-out; }
.ma-area__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left 200ms ease-out; }
.ma-area.is-open .ma-area__switch { background: var(--gds-blue); }
.ma-area.is-open .ma-area__switch::after { left: 21px; }
.ma-area__caps { padding: 0 24px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.ma-cap { font: inherit; text-align: left; cursor: pointer; display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: #fff; transition: background 200ms ease-out, border-color 200ms ease-out; }
.ma-cap[aria-checked="true"] { background: #F3F7FF; border-color: var(--gds-blue); }
.ma-cap__box { width: 20px; height: 20px; flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.ma-cap__box::before { content: ""; width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid #9AA3B2; background: #fff; }
.ma-cap[aria-checked="true"] .ma-cap__box::before { border-color: var(--gds-blue); background: var(--gds-blue); }
.ma-cap__tick { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #fff; }
.ma-cap[aria-checked="true"] .ma-cap__tick { display: flex; }
.ma-cap__box { position: relative; }
.ma-cap__tick svg { stroke-width: 3.5; }
.ma-cap__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ma-cap__t { font-size: 15px; font-weight: 600; color: var(--gds-navy); }
.ma-cap__d { font-size: 13.5px; line-height: 1.45; color: var(--fg-secondary); }
.ma-cap__a { align-self: flex-start; margin-top: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--gds-blue-50); color: var(--gds-blue); }
.ma-process { background: #fff; border: 1px dashed var(--gds-navy); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ma-process label { font-size: 18px; font-weight: 600; color: var(--gds-navy); }
.ma-process p { font-size: 14px; line-height: 1.5; color: var(--fg-secondary); }

/* Contact step */
.ma-contact { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 20px; }
.ma-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ma-field--wide { grid-column: 1 / -1; }
.ma-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg-secondary); }
.ma-consent__box { font: inherit; cursor: pointer; width: 20px; height: 20px; flex: none; margin: 1px 0 0; padding: 0; border-radius: 5px; border: 1.5px solid #9AA3B2; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; box-sizing: border-box; }
.ma-consent__box[aria-checked="true"] { background: var(--gds-blue); border-color: var(--gds-blue); }
.ma-consent__box[aria-invalid="true"] { border-color: #D92D20; }
.ma-consent__box svg { display: none; width: 13px; height: 13px; stroke-width: 2.5; }
.ma-consent__box[aria-checked="true"] svg { display: block; }
.ma-consent__text { display: block; cursor: pointer; }
.ma-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ma-review { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.ma-review__row { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto; gap: 16px; padding: 12px 0; border-top: 1px solid #E6E9EE; align-items: start; }
.ma-review__label { font-size: 13px; font-weight: 600; color: var(--fg-tertiary); }
.ma-review__value { font-size: 14px; line-height: 1.5; color: var(--gds-navy); white-space: pre-line; overflow-wrap: anywhere; }
.ma-review__edit { font: inherit; font-size: 13px; font-weight: 600; color: var(--gds-blue); background: none; border: none; cursor: pointer; padding: 0; }
.ma-captcha { display: flex; }

/* Buttons */
.ma-fail { padding: 14px 18px; border-radius: var(--radius-md); background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318; font-size: 14px; line-height: 1.5; }
.ma-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 8px; }
.ma-nav .ma-btn--next { margin-left: auto; }
.ma-btn { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; }
.ma-btn svg { flex: none; }
.ma-btn--back { border-color: var(--border-default); background: #fff; color: var(--gds-navy); }
.ma-btn--back:hover { border-color: var(--gds-navy); }
.ma-btn--next { padding: 14px 26px; border: none; background: var(--gds-navy); color: #fff; }
.ma-btn--next.is-send { background: var(--gds-yellow); color: var(--gds-navy); }
.ma-btn--next:disabled { cursor: progress; opacity: 0.75; }
.ma-btn--next[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: maSpin 700ms linear infinite; }
.ma-btn--yellow { border: none; background: var(--gds-yellow); color: var(--gds-navy); }
.ma-btn--yellow:hover { background: #E0B400; }
.ma-body a.ma-btn--outline { border: 1px solid var(--gds-navy); color: var(--gds-navy); padding: 12px 24px; text-decoration: none; }
.ma-body a.ma-btn--outline:hover { background: var(--gds-navy); color: #fff; text-decoration: none; }

/* Summary aside */
.ma-aside { background: var(--gds-navy); color: #fff; border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.ma-aside__top { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ma-aside__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: #8FB3FF; }
.ma-aside__top .ma-aside__label { letter-spacing: 0.14em; }
.ma-aside__label--yellow { color: var(--gds-yellow); }
.ma-aside__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ma-aside__note { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.ma-aside__block { display: flex; flex-direction: column; gap: 10px; }
.ma-aside__block--rule { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ma-aside__rows { display: flex; flex-direction: column; gap: 10px; }
.ma-aside__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ma-aside__row span:last-child { flex: none; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ma-aside__empty { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.ma-aside__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-body .ma-aside__chips a { font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; }
.ma-body .ma-aside__chips a:hover { border-color: var(--gds-yellow); color: #fff; text-decoration: none; }
.ma-aside__text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ma-tier { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(242, 195, 0, 0.4); }
.ma-tier__name { font-size: 18px; font-weight: 700; }
.ma-tier__duration { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.65); }
.ma-tier__desc { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.ma-tier__note { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); margin-top: 4px; }

/* Success */
.ma-done { max-width: 720px; margin: 40px auto 0; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 48px; display: flex; flex-direction: column; gap: 20px; animation: gdsUp 300ms ease-out both; }
.ma-done__tick { width: 56px; height: 56px; border-radius: 999px; background: var(--gds-yellow); color: var(--gds-navy); display: flex; align-items: center; justify-content: center; }
.ma-done__title { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.ma-done__text { font-size: 17px; line-height: 1.6; color: var(--fg-secondary); overflow-wrap: anywhere; }
.ma-done__text strong { color: var(--gds-navy); font-weight: 600; }
.ma-done__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ma-done__reset { align-self: flex-start; font: inherit; font-size: 13px; color: var(--fg-tertiary); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }

/* Footer */
.ma-footer { background: #08122A; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.ma-footer__in { max-width: 1280px; margin: 0 auto; padding: 24px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.ma-body .ma-footer a { color: rgba(255, 255, 255, 0.72); }
.ma-body .ma-footer a:hover { color: #fff; }

/* Wide: two columns with the sticky summary, the labels of the stepper, the extra header items */
@media (min-width: 1024px) {
	.ma-grid { grid-template-columns: minmax(0, 1fr) 360px; }
	.ma-aside { position: sticky; top: 150px; }
	.ma-header__page { display: block; }
	.ma-header__save { display: flex; }
	.ma-step__label { display: inline; }
}
@media (max-width: 600px) {
	.ma-header__in { padding: 0 16px; gap: 12px; }
	.ma-header__logo img { height: 28px; }
	.ma-header__right { font-size: 13px; text-align: right; }
	.ma-stepper__in { padding: 12px 16px; }
	.ma-main { padding: 28px 16px 64px; }
	.ma-footer__in { padding: 24px 16px; }
	.ma-card, .ma-contact, .ma-review, .ma-process { padding: 20px; }
	.ma-area__head { padding: 18px 20px; }
	.ma-area.is-open .ma-area__head { padding: 17.5px 19.5px; }
	.ma-area__caps { padding: 0 20px 20px; }
	.ma-review__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
	.ma-review__value { grid-column: 1; grid-row: 2; }
	.ma-review__edit { grid-column: 2; grid-row: 1; }
	.ma-done { padding: 28px 22px; margin-top: 8px; }
	.ma-nav .ma-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-body-step.is-fresh, .ma-done { animation: none; }
	.ma-area__switch, .ma-area__switch::after, .ma-cap { transition: none; }
	.ma-btn--next[aria-busy="true"]::after { animation-duration: 2s; }
}