:root { --purple: #1b0b60; --border: #021942; --blue: #e4f4f9; --font: 'cofo-sans-variable', 'Arial', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #000; background: #fff; font-family: var(--font); font-size: 18px; line-height: 20px; }
p, h1, h2, h3, ul { margin: 0; }
strong { font-weight: 700; }
a { color: inherit; text-underline-offset: 2px; overflow-wrap: anywhere; }
a:hover { color: var(--purple); }
.site-header { max-width: 1440px; margin: auto; padding: 50px 50px 0; }
.brand { position: relative; width: 201.919px; height: 51px; }
.brand-symbol { position: absolute; left: 0; top: -.255px; }
.brand-wordmark { position: absolute; left: 36.629px; top: 13.352px; }
main { max-width: 1100px; margin: 50px auto; }
h1 { font-size: 56px; font-weight: 400; line-height: 62px; color: var(--purple); margin-bottom: 30px; }
h2 { font-size: 40px; font-weight: 400; line-height: 45px; color: var(--purple); margin: 30px 0; }
.copy p + p { margin-top: 10px; }
.declaration { margin-bottom: 30px; }
.panel { background: var(--blue); padding: 30px 34px; }
.note { font-style: italic; font-weight: 700; }
.preferences .note { margin-bottom: 10px; }
.preference-head, .preference-row { display: grid; grid-template-columns: minmax(0, 1fr) 47px 224px; column-gap: 90px; align-items: center; }
.preference-head { align-items: start; color: var(--purple); }
.preference-head > :last-child { text-align: center; }
.preference-row { margin-top: 20px; min-height: 40px; }
.preference-head + .preference-row { margin-top: 15px; }
.channel { display: flex; min-height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.channel input { appearance: none; flex: 0 0 35px; width: 35px; height: 35px; margin: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-content: center; }
.channel input:checked { background: var(--purple); border-color: var(--purple); }
.channel input:checked::after { content: ''; width: 9px; height: 17px; border: solid white; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.channel span, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.unsubscribe { margin: 30px 0 27px; }
.unsubscribe ul { padding-left: 27px; margin-top: 10px; }
.email-link { text-decoration: none; }
.mandatory { margin-bottom: 24px; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.field { min-width: 0; }
.field input, .select-field { height: 40px; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--purple); font: 500 18px/1.2 var(--font); }
.field input { padding: 8px 13px; }
.field input::placeholder { color: var(--purple); opacity: 1; }
.select-field { position: relative; display: flex; align-items: center; }
.select-field select { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 1; appearance: none; padding: 8px 38px 8px 13px; border: 0; border-radius: 10px; background: white; color: var(--purple); cursor: pointer; font: 500 18px var(--font); }
.select-field.enhanced select { opacity: 0; }
.select-field:not(.enhanced) .select-display { visibility: hidden; }
.select-display { padding: 8px 38px 8px 13px; overflow-wrap: anywhere; pointer-events: none; }
.select-arrow { position: absolute; right: 13px; top: calc(50% - 6px); transform: scaleY(-1); pointer-events: none; }
:focus-visible { outline: 3px solid #4a3aff; outline-offset: 4px; }
.select-field:focus-within { outline: 3px solid #4a3aff; outline-offset: 4px; }
.details h3 { font-size: 18px; color: var(--purple); margin: 29px 0 19px; }
.submit-row { display: flex; justify-content: center; margin-top: 30px; }
button { border: 0; border-radius: 10px; padding: 10px 20px; min-height: 60px; color: #fff; background: var(--purple); font: 400 30px/1.2 var(--font); cursor: pointer; }
button:hover { background: #312078; }
button:active { transform: translateY(1px); }
.form-status { margin-top: 24px; padding: 16px; border-left: 3px solid var(--purple); background: #fff; color: var(--purple); }
[hidden] { display: none !important; }
.site-footer { background: #f9f9f9; min-height: 127px; padding: 33px max(50px, calc((100% - 1340px) / 2)); display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.reporting { max-width: 867px; }
.copyright { text-align: right; flex-shrink: 0; }
.skip-link { position: absolute; left: 20px; top: -100px; background: #fff; color: var(--purple); padding: 12px; z-index: 10; }
.skip-link:focus { top: 12px; }
@media (max-width: 1199px) {
    main { margin-inline: 40px; }
    .preference-head, .preference-row { column-gap: 40px; grid-template-columns: minmax(0, 1fr) 60px 210px; }
    .site-footer { padding-inline: 40px; }
    .select-field { min-height: 40px; height: auto; }
}
@media (max-width: 767px) {
    body { font-size: 17px; line-height: 1.4; }
    .site-header { padding: 28px 24px 0; }
    main { margin: 36px 24px; }
    h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.12; margin-bottom: 26px; }
    h2 { font-size: 32px; line-height: 1.2; margin-block: 28px 22px; }
    .panel { padding: 24px 20px; }
    .preference-head { display: none; }
    .preference-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #b6d5df; }
    .channel { justify-content: start; gap: 12px; min-height: 44px; }
    .channel span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
    .details-grid { grid-template-columns: 1fr; gap: 18px; }
    .field input { min-height: 48px; font-size: 17px; }
    .select-field { min-height: 48px; font-size: 17px; }
    .select-display { padding-block: 12px; }
    .mandatory { margin-bottom: 20px; }
    .details h3 { margin-block: 26px 18px; }
    button { font-size: 26px; min-height: 54px; padding-inline: 26px; }
    .site-footer { display: block; padding: 28px 24px; font-size: 15px; line-height: 1.4; }
    .copyright { text-align: left; margin-top: 24px; }
}
@media (forced-colors: active) {
    .channel input { appearance: auto; }
    .channel input:checked::after { content: none; }
    .select-field.enhanced select { opacity: 1; }
    .select-display, .select-arrow { visibility: hidden; }
}
/* Give long field names their own line on the narrowest phones. */
@media (max-width: 380px) {
    .field:has(input) > label { position: static; display: block; width: auto; height: auto; margin: 0 0 6px; overflow: visible; clip-path: none; white-space: normal; color: var(--purple); font-size: 16px; }
    .field input::placeholder { color: transparent; }
    .field input { font-size: 16px; }
}
.field-error { color: #9b1c31; font-size: 16px; line-height: 1.3; margin-top: 8px; }
[aria-invalid="true"] { border-color: #9b1c31 !important; }
.error-summary { border-color: #9b1c31; margin: 24px 0; }
.error-summary ul { padding-left: 24px; margin-top: 8px; }
button:disabled { opacity: .7; cursor: wait; }