.en__Donation main {
    min-height: 1000px;
    margin: 60px 0px;
}

/*Donation Form*/
body {
    margin: 0px;
    padding: 0px;
    font-size: 10pt;
    /* background-image: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2421/trees_BG.jpg?v=1720539554000'); */
    background: var(--white);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.en__hidden {
    display: none !important;
}

.main-container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

/* DF Header in Pagebuilder */
body.en__Donation main {
    margin: 0px;
}
body.en__Donation main .main-container {
    max-width: 100%;
    padding: 0px;
}
body.en__Donation form.en__component--page {
    padding: 0px;
}
body.en__Donation .en__component--advrow.en__Donation {
    max-width: 1500px;
    margin: 60px auto;
    padding: 0px 20px;
}

body.en__Donation .en__component--advrow.custom-header {
    background-color: var(--white);
}
body.en__Donation .en__component--advrow.custom-header .en__component--advcolumn {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}
.en__component--advrow.custom-header .en__component--advcolumn p {
    margin: 0px;
    line-height: 0;
}

/* EN Page Editor */
#en__pagebuilder .en__hidden {
    display: inherit !important;
}
#en__pagebuilder .en__hidden .bannerImgSrc {
    max-width: 600px;
}
#en__pagebuilder .ProcessForm .en__field--donationAmt .en__field__input--radio + .en__field__label--item,
#en__pagebuilder .ProcessForm .en__field--recurrpay .en__field__input--radio + .en__field__label--item {
    background-color: var(--paletteColor2);
    color: var(--black);
}
#en__pagebuilder .ProcessForm .en__field--donationAmt .en__field__input--radio:checked + .en__field__label--item,
#en__pagebuilder .ProcessForm .en__field--recurrpay .en__field__input--radio:checked + .en__field__label--item {
    background-color: var(--paletteColor1);
    color: var(--white);
}
#en__pagebuilder .en__field__input--vgs {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: var(--paletteColor2);
    border: 1px solid var(--paletteColor1);
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    font-size: 1.6rem;
    min-height: 40px;
    padding: 7px;
    width: 100%;
}
#en__pagebuilder .en__field--ccexpire {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
#en__pagebuilder .en__field--ccexpire > .en__field__label {
    flex: 0 0 auto;
}
#en__pagebuilder .en__field--ccexpire .en__field__element--splitselect {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: 1;
}
#en__pagebuilder .en__component--row.en__component--advrow {
    /*margin: 20px 0px;*/
}

form.en__component--page {
    margin: 0px auto;
    padding-top: 20px;
}

form .ProcessForm {
    background-color: #ffffff;
    padding: 30px;
    box-shadow: 2px 4px 18px 0px rgb(0 0 0 / 35%);
}

.ProcessForm img.df-header-image {
    display: none;
}

.ProcessForm .en__field--paycurrency {
    display: none !important;
}

.ProcessForm .section-header-container, .section-header-container {
    border-top: 1px solid var(--black);
}

.ProcessForm h2.section-header-container, h2.section-header-container {
    font-size: 30px;
    font-weight: 400;
    padding: 24px 0 0;
    margin: 24px 0 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.ProcessForm h2.section-header-container svg {
    width: 36px;
}

.ProcessForm h2.section-header-container.section-header-no-border {
	border: none;
	padding: 0
}


.ProcessForm .en__field__item {
    width: 100%;
}

/*Gift Amount*/
.ProcessForm .en__field--donationAmt.one-time-selected .en__field__element--radio .en__field__item.don-level.one-time {
    display: flex;
}

.ProcessForm .en__field--donationAmt.one-time-selected .en__field__element--radio .en__field__item.don-level.monthly,
.ProcessForm .en__field--donationAmt.monthly-selected .en__field__element--radio .en__field__item.don-level.one-time {
    display: none;
}

.ProcessForm .en__field--donationAmt.monthly-selected .en__field__element--radio .en__field__item.don-level.monthly {
    display: flex;
}

.ProcessForm .en__field--donationAmt>label,
.ProcessForm .en__field--recurrpay>label {
    display: none;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio,
.ProcessForm .en__field--recurrpay .en__field__element--radio,
.ProcessForm .en__field--paymenttype .en__field__element--radio {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    text-align: center;
    align-items: start;
    font-size: 0;
    line-height: 0;
    margin: 0;
    grid-gap: 10px;
    gap: 10px;  
}

.ProcessForm .en__field--recurrpay .en__field__element--radio {
	grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}

body.en__Donation .ProcessForm .en__field__item.other-amt {
	grid-column: span 4;
}

.ProcessForm .en__field--donationAmt input[type="radio"],
.ProcessForm .en__field--recurrpay input[type="radio"],
.ProcessForm .en__field--paymenttype input[type="radio"] {
    position: absolute;
    left: -10000px;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item:not(.en__field__item--other),
.ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item,
.ProcessForm .en__field--paymenttype .en__field__element--radio>.en__field__item {
    display: flex;
    flex: 1;
    min-width: 100px;
	padding: 0;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__label--item,
.ProcessForm .en__field--recurrpay .en__field__element--radio .en__field__label--item,
.ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__label--item {
    display: block;
    background: var(--white);
    color: var(--black);
    text-align: center;
    cursor: pointer;
    font-size: 23px;
    line-height: 21px;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    padding: 16px 32px;
    border: 1px solid var(--paletteColor1);
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__label--item {
	font-size: 18px;
	padding: 12px 6px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ProcessForm .en__field--paymenttype .en__field__element--radio>.en__field__item {
	min-height: 68px
}
.ProcessForm .en__field--donationAmt .en__field__element--radio .focus .en__field__label--item,
.ProcessForm .en__field--recurrpay .en__field__element--radio .focus .en__field__label--item,
.ProcessForm .en__field--paymenttype .en__field__element--radio .focus .en__field__label--item,
.ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__input--radio:focus-visible + .en__field__label--item {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}
.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__item.active .en__field__label--item,
.ProcessForm .en__field--recurrpay .en__field__element--radio .en__field__item.active .en__field__label--item,
.ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__item.active .en__field__label--item,
.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__item .en__field__label--item:hover,
.ProcessForm .en__field--recurrpay .en__field__element--radio .en__field__item .en__field__label--item:hover,
.ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__item .en__field__label--item:hover {
    border: 1px solid var(--paletteColor1);
	color: var(--white);
	background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
	transition: color 50ms cubic-bezier(.55, .085, .68, .53), background-color 500ms ease-in-out, min-width 200ms ease;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__input--other {
    display: block;
    background: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
    color: var(--paletteColor2);
    text-align: center;
    cursor: pointer;
    font-size: 23px;
    line-height: 21px;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    padding: 16px 32px;
    border: 1px solid var(--paletteColor1);
    height: auto;
    margin: 0px;
    max-height: 55px;
}

.ProcessForm .en__field--recurrpay .en__field__label--item {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Dollar sign fix */
.ProcessForm .en__field--donationAmt .other-amt-input {
	position: relative;
}
.ProcessForm .en__field--donationAmt .other-amt-input:before {
	content: "$";
	color: #fff;
	font-size: 23px;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__input--other {
	padding-left: 30px;
	text-align: left;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio .en__field__input--other:focus-visible {
    outline: 0px;
}

.ProcessForm .en__field--donationAmt .en__field__element--radio .other-amt-input {
    padding: 0px;
}

.ProcessForm label[for="en__field_transaction_feeCover"] {
    white-space: normal;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    display: inline;
    max-width: inherit;
}

/*.ProcessForm .en__field--dirgift>label {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    line-height: inherit;
    color: var(--paletteColor1);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}*/

.ProcessForm .en__field--dirgift,
.ProcessForm .en__field--dirgift .en__field__element--radio .en__field__item {
    padding: 0px;
    display: block;
}

.ProcessForm .en__field--gftrsn label {
    display: none;
}

.ProcessForm .en__field__element--select,
.ProcessForm .en__field__element--text,
.ProcessForm .en__field__element--radio,
.ProcessForm .en__field__element--checkbox {
    width: 100%;
}

.ProcessForm select {
    border: 1px solid var(--paletteColor1);
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    padding: 11px 36px 11px 18px;
    min-height: 60px;
    width: 100%;
    max-width: 100%;
    appearance: none;
    background: var(--selectArrowSVG) calc(100% - 8px);
    background-size: 38px 110px;
    background-position: calc(100% - 16px) 50%;
    background-color: var(--white);
}

.ProcessForm input[type="text"],
.ProcessForm input[type="email"],
.ProcessForm input[type="number"],
.ProcessForm input[type="tel"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: var(--white);
    border: 1px solid var(--paletteColor1);
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    font-size: 18px;
    line-height: 27px;
    min-height: 60px;
    padding: 11px 18px;
    width: 100%;
}

.ProcessForm input[type="radio"] {
    margin: 0 5px 20px 0;
    height: 20px;
    width: 20px;
}

.ProcessForm #en__field_transaction_dirgift1 {
    margin-bottom: 0;
}

.ProcessForm .en__field__label {
    display: inline-block;
    width: auto;
}

.ProcessForm .en__field__element.en__field__element--textarea,
.ProcessForm .en__field__element.en__field__element--email,
.ProcessForm .en__field__element.en__field__element--telephone {
    width: 100%;
}

.ProcessForm .en__field__input--calendar,
.ProcessForm .en__field__input--email,
.ProcessForm .en__field__input--number,
.ProcessForm .en__field__input--password,
.ProcessForm .en__field__input--range,
.ProcessForm .en__field__input--telephone,
.ProcessForm .en__field__input--text,
.ProcessForm .en__field__input--textarea,
.ProcessForm .en__rangeFieldLabels {
    width: 100%;
}

.ProcessForm .en__field {
    padding-bottom: 0;
    margin: 12px 0 0;
}

body:not(#en__pagebuilder) .minimum-donation-amount p {
    font-size: 12px; 
    margin-bottom: 0px; 
    position: absolute; 
    bottom: -15px; 
    left: 0;
}

/* eCard */
.eCard-message {
    max-width: 600px;
    margin: 24px auto;
}
.eCard-message p {
    margin-bottom: 0;
}

/*Billing Info*/
.ProcessForm .donor-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
}

.ProcessForm .donor-info .en__field {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 0px;
}

/* .ProcessForm .donor-info:first-child .en__field:first-child {
    margin-top: 0px;
} */

.ProcessForm .donor-info .en__field .en__field__element {
    display: block;
}

.ProcessForm .donor-info .en__field input,
.ProcessForm .donor-info .en__field select {
    width: 100%;
    max-width: 100%;
    min-width: auto;
}

.ProcessForm .donor-info .en__field input[type="text"],
.ProcessForm .donor-info .en__field input[type="email"],
.ProcessForm .donor-info .en__field input[type="number"],
.ProcessForm .donor-info .en__field input[type="tel"]  {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: var(--white);
    border: 1px solid var(--paletteColor1);
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    font-size: 18px;
    min-height: 60px;
    padding: 11px 18px;
    width: 100%;
	line-height: 27px;
}

.ProcessForm .donor-info .en__field select {
    border: 1px solid var(--paletteColor1);
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    padding: 11px 36px 11px 18px;
    min-height: 60px;
    width: 100%;
    max-width: 100%;
    appearance: none;
    background: var(--selectArrowSVG) calc(100% - 8px);
    background-size: 38px 110px;
    background-position: calc(100% - 16px) 50%;
    background-color: var(--white);
}

.ProcessForm .donor-info .en__field__item {
    padding: 0px;
}

.ProcessForm .donor-info .en__field--title .en__field__item {
    width: 100%;
}

.ProcessForm .donor-info .en__field--title .en__field__item select {
    max-width: 100%;
}

.ProcessForm label {
    white-space: normal;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.ProcessForm .en__mandatory>label:before {
    content: "* ";
    color: #9c0003;
    font-size: 20px;
}

/* Address 2 progressive disclosure */
.donor-info.dgd-addr2 {
    display: none;
}
.donor-info.dgd-addr2.is-open {
    display: block;
}
.dgd-addr2-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px 0px;
}
.dgd-addr2-toggle-wrap[hidden] {
    display: none;
}
.dgd-addr2-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.dgd-addr2-toggle:hover {
    text-decoration: none;
}
.dgd-addr2-toggle svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.ProcessForm .en__field--email-sign-up-form-opt-in {
    padding: 0px;
    margin: 16px 0px 0px;
}

.ProcessForm .en__field--email-sign-up-form-opt-in>label {
    display: none;
}

.ProcessForm input[type="checkbox"] {
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px 0 0;
    vertical-align: top;
}

.ProcessForm .en__field--email-sign-up-form-opt-in .en__field__item label {
    display: inline;
    max-width: inherit;
}

body.en__Donation .en__field__element.en__field__element--checkbox .en__field__item {
    display: grid;
    grid-template-columns: max-content 1fr;
}

/*Payment Info*/
#payment_cc_type_row ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#payment_cc_type_row li {
    display: inline;
}

#payment_cc_type_row label {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    line-height: inherit;
    color: var(--paletteColor1);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.ProcessForm .en__field--paymenttype label[for="en__field_transaction_paymenttype"], .ProcessForm #payment_cc_type_row {
    display: none;
}

.ProcessForm .en__field__element--vgs,
.ProcessForm #en__field_transaction_ccnumber,
.ProcessForm #en__field_transaction_ccvv {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: var(--paletteColor2);
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    font-size: 1.6rem;
    min-height: 40px;
    padding: 0px;
    width: 100%;
}

.ProcessForm .donor-info .en__field--ccexpire .en__field__element--splitselect {
    display: flex;
    gap: 10px;
}

.ProcessForm .en__field--ccexpire .en__field__element--splitselect>.en__field__item {
    width: 50%;
}

/* .ProcessForm .donor-info .en__field--ccexpire,
.ProcessForm .donor-info .en__field--ccvv {
    margin-top: 0px;
} */

.ProcessForm #en__field_transaction_ccnumber.vgs-collect-container__focused,
.ProcessForm #en__field_transaction_ccvv.vgs-collect-container__focused {
    outline: -webkit-focus-ring-color auto 1px;
}

.ProcessForm .en__submit {
    border-top: none;
    margin-top: 24px;
    padding-top: 0;
	text-align: left;
}
.ProcessForm .en__submit button,
.transaction-details-toggle,
a.button-cta {
    background: var(--paletteColor2);
    color: var(--white) !important;
    text-align: center;
    cursor: pointer;
    font-size: 23px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    padding: 16px 32px !important;
    border: none;
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold) !important;
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%) !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-decoration: none !important;
}
a.button-cta {
    margin: 0;
    display: inline-block;
    width: auto;
}
.ProcessForm .en__submit button span {
	font-size: 23px;
    line-height: 21px;
    font-weight: 400;
    font-family: var(--fontFamilyNeusaDemiBold);
}
.ProcessForm .en__submit button::before,
.transaction-details-toggle::before,
a.button-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
.ProcessForm .en__submit button:hover::before,
.ProcessForm .en__submit button:focus::before,
.transaction-details-toggle:hover::before,
a.button-cta:hover::before,
.transaction-details-toggle:focus::before,
a.button-cta:focus::before {
	left: 100%;
}

.ProcessForm .en__captcha {
    padding: 25px 0px 0px;
}

.ProcessForm .custom-total-display {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    margin: 16px 0px 0px;
    padding: 20px;
    background-color: var(--paletteColor3);
}
.ProcessForm .custom-total-display p {
    margin-bottom: 0px;
}
.ProcessForm .custom-total-display p {
    font-weight: 700;
}

/*Error Handling*/

body .en__errorContainer {
    background: var(--white);
    border: 2px solid var(--paletteColor1);
    padding: 20px;
}
body .en__errorHeader,
body ul.en__errorList {
	background: var(--paletteColor1);
    color: var(--white);
    margin: 0 auto;
}
body .en__errorList .en__error {
	background: transparent;
	color: var(--white);
	max-width: 1500px;
	margin: 0 auto;
	padding: 16px;
}

.ProcessForm .en__field--validationFailed {
    padding: 10px !important;
    background-color: #feeaeb !important;
    border: 1px solid #990000 !important;
    border-radius: 4px !important;
}

.ProcessForm .en__field__error {
    color: #990000;
    font-size: 16px;
    margin-bottom: 4px;
}

.en__submit button:disabled,
.en__submit button:disabled:hover,
.en__submit button:disabled:focus,
.en__submit button:disabled:focus-within {
    background-color: #d5d5d5;
    color: #fff;
    border-color: #999999;
    cursor: default;
}

/*Thank You Page*/
.transaction-details {
    width: 100%;
}
.transaction-details tr {
    border-bottom: 1px solid #dddddd;
}
.transaction-details td {
    width: 50%;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
}
body.en__Donation .ProcessForm .en__field__item.other-amt.active {
    flex-direction: column;
    text-align: left;
    position: relative;
}
body.en__Donation .ProcessForm .en__field__item.other-amt p {
    display: none;
}
body.en__Donation .ProcessForm .en__field__item.other-amt.active p {
    display: block;
}

/* Campaign Form Overrides */
body.en__Donation.en__Campaign_Form .hero-banner {
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 450px;
}
body.en__Donation.en__Campaign_Form form .ProcessForm {
    background-color: #ffffff;
    padding: 0;
    box-shadow: none;
}
body.en__Donation.en__Campaign_Form .ProcessForm .donor-info .en__field input, body.en__Donation.en__Campaign_Form .ProcessForm .donor-info .en__field select {
    width: 100%;
    max-width: 100%;
}
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item:not(.en__field__item--other),
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item,
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--paymenttype .en__field__element--radio>.en__field__item {
    min-width: 315px;
}
body.en__Donation.en__Campaign_Form .ProcessForm .en__field__item.en__field__item--other.other-amt-input {
    width: 100%;
}

/* Multi-Step Form Overrides */
body.en__Donation.en__MultiStep_Form form.en__component--page {
    margin: 0px;
}
body.en__Donation.en__MultiStep_Form .en__component--advrow.en__Donation {
    max-width: 100%;
    margin: 0px;
    padding: 64px;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(30px, 6vw, 95px);
}
body.en__Donation.en__MultiStep_Form .en__component--advrow.custom-header .en__component--advcolumn {
    margin: 0px;
    padding: 20px 64px;
}
body.en__Donation.en__MultiStep_Form .ProcessFormIntro h1 {
    color: var(--white);
}
body.en__Donation.en__MultiStep_Form .ProcessFormIntro p {
    color: var(--white);
    font-size: 20px;
    line-height: 150%;
}
body.en__Donation.en__MultiStep_Form .ProcessFormIntro .ctaImage {
    display: block;
}
body.en__Donation.en__MultiStep_Form .ProcessForm {
    min-width: 620px;
    padding: 60px;
    box-shadow: none;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .page-step-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.ProcessForm .page-step-container h2 {
    margin-bottom: 0px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui .step {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--white);
    text-align: center;
    color: var(--paletteColor1);
    border: 1px solid var(--paletteColor1);
    border-radius: 18px;
    line-height: 32px;
    font-size: 18px;
    font-family: var(--fontFamilySecondary);
    font-weight: 700;
    cursor: default;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui .step.active {
    background-color: var(--paletteColor1);
    border-color: var(--paletteColor1);
    color: var(--white);
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui .step.completed {
    background-color: var(--paletteColor4);
    border-color: var(--paletteColor4);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui .step.completed:hover,
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui .step.completed:focus {
    scale: 1.1;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .progress-tracker-ui a.step:focus-visible {
    outline: 2px solid var(--paletteColor1);
    outline-offset: 3px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field.en__field--donationAmt {
    margin: 0px 0px 16px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio, 
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio {
    gap: 8px 24px;
}
/*body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item:not(.en__field__item--other), 
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item {
    flex: 0 0 calc(50% - 12px);
}*/
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item, 
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item {
    flex: 0 0 calc(50% - 12px);
}
.ProcessForm .en__field--recurrpay .en__field__item.monthly {
    flex-direction: column;
    gap: 8px;
}
.monthly-cta-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px;
    align-items: center;
}
.monthly-cta-container .monthly-cta-text {
    margin-bottom: 0px;
}

body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit__container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin: 24px 0px 0px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit__container .en__submit {
    width: 100%;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit__container .en__back {
    width: auto;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button {
    display: block;
    background: transparent;
    color: var(--black);
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    width: auto;
    height: auto;
    padding: 0px;
    border: none;
    height: 100%;
    font-family: var(--fontFamilyButton);
    position: relative;
    text-decoration: none;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:before {
    content: "\f060";
    color: var(--paletteColor1);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: static;
    opacity: 1;
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.2s ease;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:hover,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus-visible,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus-within {
    background: transparent;
    border: none;
    color: var(--paletteColor1);
    text-decoration: none;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus-visible,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus-within {
    outline: 1px solid var(--paletteColor1);
    outline-offset: 2px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:hover:before {
    transform: translateX(-4px);
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:hover .back-label,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus .back-label,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__back button:focus-visible .back-label {
    text-decoration: underline;
}

body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit {
    border: none;
    margin: 0px;
    padding: 0px;
    text-align: unset;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button {
    display: block;
    width: 100%;
    font-weight: 700;
    padding: 12px;
    position: relative;
    background: var(--paletteColor1);
    color: var(--paletteColor2);
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:before {
    content: "\f061";
    color: var(--paletteColor1);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    opacity: 0;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:hover,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-within,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-visible {
    background: var(--white);
    border: 3px solid var(--paletteColor1);
    color: var(--black);
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-within,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-visible {
    outline: 2px solid var(--paletteColor1);
    outline-offset: 3px;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:hover:before,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus:before,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-within:before,
body.en__Donation.en__MultiStep_Form .ProcessForm .en__submit button:focus-visible:before {
    color: var(--paletteColor1);
    opacity: 1;
}

body.en__Donation.en__MultiStep_Form.page-1 .ProcessForm .en__submit__container .en__back {
    display: none !important;
}
#en__pagebuilder .secure-donation {
    margin-top: 20px;
}
.ProcessForm .secure-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
body.en__Donation.en__MultiStep_Form .tribute-info-container {
    padding: 12px;
    text-align: center;
    background-color: var(--paletteColor1);
    color: var(--white);
    margin: -60px -60px 50px;
    font-size: 16px;
    font-family: var(--fontFamilyButton);
    text-transform: uppercase;
}
body.en__Donation.en__MultiStep_Form .tribute-info-container p {
    color: var(--white);
    margin: 0px;
    font-weight: 700;
}
body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--paymenttype label[for="en__field_transaction_paymenttype"] {
    display: inline-block;
}


/* eCard overrides */
.ecard {
    background-color: #ffffff;
    padding: 30px;
    box-shadow: 2px 4px 18px 0px rgb(0 0 0 / 35%);
    max-width: 1460px;
    margin: 0 auto 60px;
}
body.en__Donation.pg-ecard .en__component.en__component--ecardblock {
    max-width: 100%;
}
body.en__Donation.pg-ecard .en__ecarditems__list {
    display: none;
}
body.en__Donation.pg-ecard input[type="text"],
body.en__Donation.pg-ecard input[type="email"],
body.en__Donation.pg-ecard input[type="date"],
body.en__Donation.pg-ecard textarea,
body.en__Donation.pg-ecard .en__ecardrecipients__list, 
body.en__Donation.pg-ecard .en__ecardmessage__default  {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: var(--white);
    border: 1px solid var(--paletteColor1);
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    font-size: 18px;
    line-height: 27px;
    min-height: 60px;
    padding: 11px 18px;
    width: 100%;
    margin: 0;
}
body.en__Donation.pg-ecard .en__ecardrecipients__list,
body.en__Donation.pg-ecard .en__ecardmessage__default  {
    min-height: 200px;
    background: #fff;
}
body.en__Donation.pg-ecard label {
    white-space: normal;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}
body.en__Donation.pg-ecard .en__submit button {
    background: var(--paletteColor2);
    color: var(--white) !important;
    text-align: center;
    cursor: pointer;
    font-size: 23px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    padding: 16px 32px !important;
    border: 1px solid var(--paletteColor1);
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold) !important;
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%) !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-decoration: none !important;
}
body.en__Donation.pg-ecard .en__submit button span {
	font-size: 23px;
    line-height: 21px;
    font-weight: 400;
    font-family: var(--fontFamilyNeusaDemiBold);
}
body.en__Donation.pg-ecard .en__submit button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
body.en__Donation.pg-ecard .en__submit button:hover::before,
body.en__Donation.pg-ecard .en__submit button:focus::before {
	left: 100%;
}
body.en__Donation.pg-ecard .en__ecarditems__action button {
    display: block;
    background: var(--white);
    color: var(--black);
    text-align: center;
    cursor: pointer;
    font-size: 23px;
    line-height: 21px;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    padding: 16px 32px;
    border: 1px solid var(--paletteColor1);
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
	border-radius: 0;
}
body.en__Donation.pg-ecard .en__ecarditems__action button:hover,
body.en__Donation.pg-ecard .en__ecarditems__action button:focus {
    border: 1px solid var(--paletteColor1);
    color: var(--white);
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
    transition: color 50ms cubic-bezier(.55, .085, .68, .53), background-color 500ms ease-in-out, min-width 200ms ease;
}
body.en__Donation.pg-ecard .en__field.en__field--email.en__field--emailAddress {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 0;
}
body.en__Donation.pg-ecard label[for="en__field_supporter_emailAddress"]::before {
    content: "* ";
    color: #9c0003;
}
body.en__Donation.pg-ecard .en__ecard__sender__info-container,
body.en__Donation.pg-ecard .en__ecardrecipients__detail, .en__submit__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    gap: 10px;
    align-items: center;
}
body.en__Donation.pg-ecard .en__ecardrecipients__detail {
    grid-template-columns: 1fr 1fr auto;
    margin-bottom: 24px;
}
body.en__Donation.pg-ecard .en__ecardrecipients__email,
body.en__Donation.pg-ecard .en__ecardrecipients__name {
    flex: initial;
    width: 100%;
    position: relative;
}
body.en__Donation.pg-ecard .en__ecardrecipients__futureDelivery {
    margin: 0;
}
body.en__Donation.pg-ecard .en__ecardrecipients__futureDelivery label {
	padding: 6px 0;
    vertical-align: middle;
}
body.en__Donation.pg-ecard .en__captcha, .en__field {
    padding-bottom: 0;
}
body.en__Donation.pg-ecard .en__ecardrecipients__button-container:not(:last-child) {
	display: none;
}
body.en__Donation.pg-ecard .en__component--ecardblock h2 {
    margin: 24px 0 10px;
}
body.en__Donation.pg-ecard .en__submit__container {
    margin: 24px 0 0;
}
body.en__Donation.pg-ecard .en__component--ecardblock .en__ecarditems h2  {
	margin-top: 0;
}
body.en__Donation.pg-ecard .en__ecardrecipients__detail .en__ecardrecipients__button-container button {
    position: relative;
    margin-top: 24px;
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
}

/* Added styling for split text and number fields to match rest of form fields */
.ProcessForm .en__field--splittext .en__field__element--splittext,
.ProcessForm .en__field--number .en__field__element--number {
	display: block;
}

.ProcessForm .border-button {
    display: inline-block;
    background: var(--paletteColor1);
    color: var(--white);
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    width: auto;
    max-width: inherit;
    padding: var(--buttonPadding);
    border: var(--buttonborderWidth) solid var(--paletteColor1);
    height: auto;
    border-radius: var(--buttonBorderRadius);
    transition: 0.25s all;
    text-decoration: none;
}
.ProcessForm .border-button:hover {
    background: var(--white);
    border: 3px solid var(--paletteColor1);
    color: var(--black);
}
.ProcessForm .border-button:focus-visible {
    outline: 2px solid var(--paletteColor1);
    outline-offset: 3px;
}
.ProcessForm .en__field--dirgift.en__mandatory .en__field__item {
    padding-bottom: 0;
}
.designation-text {
    color: var(--mainTextColor);
    font-family: var(--fontFamilyMain);
    padding: 10px;
    background: #f4f4f4;
    font-size: 15px;
    line-height: 1.2;
}
.toggle-sentence {
    display: grid;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0;
    align-items: center;
    grid-template-columns: 2fr 1fr;
    margin: 16px 50px 0 0px;
}
/* .toggle-sentence-left {
    padding: 0 40px 0 0;
} */
.toggle-sentence-left p {
    margin-bottom: 0;
}
.en__component.en__component--dd360search p {
    margin-top: 16px;
}

/* Lightbox styles */
/*#en__upsellModal .en__upsellModal__container {
    display: block;
}
#en__upsellModal .en__upsellModal__background {
    min-height: 280px;
    object-fit: cover;
} 
#en__upsellModal .en__upsellModal__content {
    text-align: center;
}
#en__upsellModal .en__upsellModal__content h2, #en__upsellModal .en__upsellModal__content p {
    margin-bottom: 16px;
}
div#en__upsellModal__no button {
    border: none;
    background: transparent;
    text-decoration: underline !important;
    font-weight: 700;
}
div#en__upsellModal__yes button {
    display: block;
    background: var(--paletteColor1);
    color: var(--paletteColor2);
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    width: 100%;
    max-width: 350px;
    padding: 10px 15px;
    border: 3px solid var(--paletteColor1);
    height: auto;
    margin: 0 auto;
}
#en__upsellModal #en__upsellModal__close {
    cursor: pointer;
    display: block;
    height: 36px;
    opacity: 1;
    position: absolute;
    right: 24px;
    top: 24px;
    transition: none;
    width: 36px;
    background: #fff;
    display: flex;
    align-items: center;
}
#en__upsellModal #en__upsellModal__close:after, #en__upsellModal #en__upsellModal__close:before {
    background-color: #000;
    content: " ";
    height: 26px;
    left: 16px;
    position: absolute;
    width: 3px;
}*/
/* Lightbox styles */
#en__upsellModal .en__upsellModal__background {
	min-height: 480px;
	background-position: top;
}
#en__upsellModal .en__upsellModal__content {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
#en__upsellModal .en__upsellModal__content h2 {
    text-transform: none;
}
#en__upsellModal .en__upsellModal__content p {
    line-height: 1.5;
}
#en__upsellModal .en__upsellModal__content h2, #en__upsellModal .en__upsellModal__content p {
	margin-bottom: 0px;
}
div#en__upsellModal__no button,
div#en__upsellModal__yes button {
	display: block;
	background: var(--paletteColor2);
    color: var(--white) !important;
    text-align: center;
    cursor: pointer;
    font-size: 18px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    padding: 16px 32px !important;
    border: none;
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold) !important;
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%) !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-decoration: none !important;
	max-width: 100%;
	position: relative;
}
div#en__upsellModal__no button span,
div#en__upsellModal__yes button span {
    font-size: 18px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    font-family: var(--fontFamilyNeusaDemiBold) !important;
}
div#en__upsellModal__no button::before,
div#en__upsellModal__yes button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
div#en__upsellModal__no button:hover::before,
div#en__upsellModal__yes button:hover::before,
div#en__upsellModal__yes button:focus::before,
div#en__upsellModal__yes button:focus::before {
	left: 100%;
}
#en__upsellModal #en__upsellModal__yes {
	margin-bottom: 20px;
}
#en__upsellModal .en__upsellModal__container .en__upsellModal__content #en__upsellModal__close {
	cursor: pointer;
	height: 36px;
	opacity: 1;
	position: absolute;
	right: 8px;
	top: 8px;
	transition: none;
	width: 36px;
	background: #fff;
	display: flex;
	align-items: center;
}
#en__upsellModal .en__upsellModal__container .en__upsellModal__content #en__upsellModal__close:after, 
#en__upsellModal .en__upsellModal__container .en__upsellModal__content #en__upsellModal__close:before {
	background-color: var(--black);
	content: " ";
	height: 26px;
	left: 17px;
	position: absolute;
	width: 3px;
}

@media (max-width:767px) {
	#en__upsellModal .en__upsellModal__background {
		display: none !important;
	}
}

/* Digital Wallet */
#en__digitalWallet {
    display: none;
}
#en__digitalWallet {
    margin: 24px 0;
}
#en__digitalWallet .en__digitalWallet__container {
    max-width: 100% !important;
}

/* Thank you page */
.thank-you-container {
    background-color: #ffffff;
    padding: 30px;
    box-shadow: 2px 4px 18px 0px rgb(0 0 0 / 35%);
    max-width: 1460px;
    margin: 0 auto 60px;
}
.transaction-details {
    width: 100%;
    background-color: var(--paletteColor2);
    padding: 20px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.transaction-details-toggle {
    margin-top: 16px;
    max-width: 345px;
}
.transaction-details .personal-gift, .transaction-details .company-gift{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.transaction-details-toggle .toggle-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
}
.transaction-details-toggle.is-open .toggle-arrow {
	transform: rotate(180deg);
}
.transaction-details {
	margin-bottom: 24px;
}
#dd-container div {
    margin: 0;
}
.en__component.en__component--row.en__component--advrow.thank-you-section.two-column-section {
    gap: 30px;
}
#dd-container>div>div>div.dtd-lets-check.grid-x>div:nth-child(2) {
    margin: 0;
    width: 100%;
}
#dd-container>div>div>div.dtd-lets-check.grid-x>div:nth-child(2)>button {
    margin: 10px auto;
}
#dd-container .lets-check {
    background: var(--paletteColor2) !important;
    color: var(--white) !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 23px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    padding: 16px 32px !important;
    border: none !important;
    height: auto;
    font-family: var(--fontFamilyNeusaDemiBold) !important;
    background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%) !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
	width: 100%;
    max-width: 300px !important;
}
#dd-container .lets-check::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
#dd-container .lets-check:hover::before,
#dd-container .lets-check:focus::before {
	left: 100%;
}

/* Footer */
.footer {
    background: #202020;
    padding: 60px 24px;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .footer {
        padding: 60px 24px;
    }
}
.footer--block {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.footer--block:after,
.footer--block:before {
    content: " ";
    display: table;
}
.footer--block:after {
    clear: both;
}
.footer--block_copy p {
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
    color: #9e9e9e;
}
.footer--block_copy a {
    color: #f5f5f5;
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    .footer--block_copy {
        width: auto;
        display: inline-block;
        padding-left: 20px;
    }
}
footer .footer-top {
    background-color: transparent; /* the gradient lives on <footer> below */
}

/* Footer gradient (Asana 1219280780725866): brand Blue to the existing footer teal, gradient behind
   the top band; the bottom bar is solid #494949. Ends at #06808E rather than brand Teal #0094A8 because white text on
   #0094A8 is ~3.4:1 (fails AA); #06808E is ~4.7:1. */
footer {
    background: linear-gradient(135deg, #0064A4 0%, #06808E 100%);
}
footer .footer-bottom {
    background-color: #494949 /* brand Dark Gray; solid bar under the gradient */
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0
}

footer a,footer h2 {
    color: var(--white)!important
}

footer h2 {
    font-size: 19px;
    text-decoration: underline;
    line-height: 1
}

footer a {
    font-size: 16px!important;
    text-decoration: none;
    font-weight: 600;
    line-height: 20px
}

footer li.footer-social {
    display: flex
}

footer li.footer-social a {
    font-size: 25px!important;
    margin: 0 10px
}

footer li.footer-social a:first-child {
    margin-left: 0
}

.footer-social a i {
    color: #000;
    background: #fff;
    border-radius: 100%;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 20px
}

@media (max-width: 991px) {
    footer li.footer-social a:first-child {
        margin-left:10px
    }

    footer li.footer-social {
        justify-content: center
    }
}

body.en__Donation.en__MultiStep_Form .footer-top {
    padding: 30px 64px;
}
body.en__Donation.en__MultiStep_Form .footer-inner {
    padding: 0px 64px 30px;
    display: flex;
    flex-direction: row;
}
body.en__Donation.en__MultiStep_Form .footer-bottom {
    padding: 20px 64px;
}

/*Media Queries*/
@media (max-width: 1400px) {
    body.en__Donation.en__Campaign_Form .hero-banner {
        height: 300px;
    }
}
@media (max-width: 1300px) {
    body.en__Donation.en__MultiStep_Form .en__component--advrow.en__Donation {
        padding: 40px 20px;
        gap: 20px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm {
        min-width: 560px;
        padding: 24px;
    }
    body.en__Donation.en__MultiStep_Form .tribute-info-container {
        margin: -24px -24px 24px;
    }
}
@media (max-width: 1200px) {
    .main-container {
        max-width: 970px;
    }
}

@media (max-width: 1024px) {
    body:not(.has-custom-bg) {
        background-image: none !important;
    }
    main {
        margin-top: 30px;
    }
	h1 {
	    margin: 16px 0;
	}
	p, P, LI, OL, UL, TABLE, TR, TH, TD, .Explicit,
	.ProcessForm label,
	.ProcessForm label[for="en__field_transaction_feeCover"]{
		font-size: 16px;
	}
	.ProcessForm .en__field {
	    margin: 12px 0 0;
	}
	.ProcessForm select,
	.ProcessForm input[type="text"],
	.ProcessForm input[type="email"],
	.ProcessForm input[type="tel"],
	.ProcessForm input[type="number"],
	.ProcessForm .donor-info .en__field input,
	.ProcessForm .donor-info .en__field select,.ProcessForm .donor-info .en__field input[type="text"],
	.ProcessForm .donor-info .en__field input[type="email"],
	.ProcessForm .donor-info .en__field input[type="number"],
	.ProcessForm .donor-info .en__field input[type="tel"] {
		font-size: 16px;
	}
	.ProcessForm select,
	.ProcessForm .donor-info .en__field select {
		background-size: 28px 100px;
		background-position: calc(100% - 6px) 50%;
		background-color: var(--white);
	}
	body.en__Donation .en__component--advrow.custom-header .en__component--advcolumn,
    body.en__Donation.en__MultiStep_Form .en__component--advrow.custom-header .en__component--advcolumn {
		padding: 10px;
	}
	/* DF Header in Pagebuilder */
    body.en__Donation main {
        margin-bottom: 0px;
    }
	body.en__Donation.en__OneColumn_Form .en__component--advrow.en__Donation {
		max-width: 100%;
		margin: 0 auto 60px;
	}
    body.en__Donation.en__Campaign_Form .en__component--advrow.en__Donation {
        max-width: 100%;
        margin: 18px auto;
    }
	.ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item:not(.en__field__item--other),
	.ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item,
	.ProcessForm .en__field--paymenttype .en__field__element--radio>.en__field__item {
		flex: 1 1 25%;
		min-width: auto !important;
	}
	.ProcessForm .en__field--donationAmt .en__field__element--radio, .ProcessForm .en__field--recurrpay .en__field__element--radio, .ProcessForm .en__field--paymenttype .en__field__element--radio {
		grid-template-columns: repeat(2, 1fr);
	}
	body.en__Donation .ProcessForm .en__field__item.other-amt {
		grid-column: span 2;
	}
    form.en__component--page .en__component--advrow {
        display: block;
    }
    form .ProcessForm {
        padding: 0px;
        box-shadow: none;
    }
    .ProcessForm img.df-header-image.show-mobile {
        display: block;
    }
    body.en__Donation.en__MultiStep_Form .ProcessFormIntro .ctaImage {
        display: none;
    }
    body.en__Donation.en__MultiStep_Form .ProcessFormIntro p:has(img.ctaImage) {
        margin-bottom: 0px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessFormIntro p {
        font-size: 16px;
    }
	.ProcessForm .donor-info.tribute-fields {
        display: block;
    }
    .ProcessForm .donor-info .en__field input,
    .ProcessForm .donor-info .en__field select {
        max-width: 100%;
    }
    .ProcessForm .donor-info .en__field--ccexpire {
        margin-bottom: 18px;
    }
    .en__field--ccvv #en__field_transaction_ccvv {
        width: 100%;
    }
    body.en__Donation.en__MultiStep_Form .en__component--advrow.en__Donation {
        display: flex;
        flex-direction: column;
        margin: 0px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm {
        width: 100%;
        min-width: unset;
    }
    body.en__Donation.en__MultiStep_Form:not(.page-1) .ProcessFormIntro {
        display: none !important;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item, 
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item {
        flex: 1 1 25%;
        min-width: auto !important;
    }
    body.en__Donation.en__MultiStep_Form .footer-top {
        padding: 16px 20px 0px;
    }
    body.en__Donation.en__MultiStep_Form .footer-top .footerLogo {
        width: 188px !important;
        padding: 16px 16px 0px 0px;
    }
    body.en__Donation.en__MultiStep_Form .footer-inner {
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    body.en__Donation.en__MultiStep_Form .footer-inner .footerBadges {
        justify-content: flex-start;
    }
    body.en__Donation.en__MultiStep_Form .footer-bottom {
        padding: 15px 20px;
    }
	.ProcessForm .cc-fields .donor-info {
		display: block;
	}
	.thank-you-section h1 {
		margin-top: 0;
	}
	.thank-you-container {
		box-shadow: none;
		padding: 20px;
		margin-bottom: 0;
	}
	.en__ecarditems h2 {
		margin: 0 0 10px;
	}
	.en__ecard__sender__info-container, .en__submit__container {
		grid-template-columns: auto;
	}

}

@media (max-width: 991px) {
	.ProcessForm h2.section-header-container, h2.section-header-container {
		/*font-size: 24px;*/
		padding: 16px 0 0;
		margin: 16px 0;
	}
	.main-container {
        width: 100%;
        max-width: 750px;
    }
	.ProcessForm .donor-info .en__field {
		margin: 8px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
	}
	.ProcessForm .donor-info .en__field--ccexpire,
    .ProcessForm .donor-info .en__field--ccvv {
		margin-bottom: 8px;
	}
	body.en__Donation.en__Campaign_Form .hero-banner {
        height: 200px;
    }
}

@media (max-width: 767px) {
    body.en__Donation.en__MultiStep_Form .en__component--advrow.en__Donation {
        padding: 20px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm {
        padding: 20px;
    }
    body.en__Donation.en__MultiStep_Form .tribute-info-container {
        margin: -20px -20px 24px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .page-step-container {
        flex-direction: column-reverse;
        gap: 16px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio, body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio {
        gap: 8px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio {
        margin-bottom: 20px;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--donationAmt .en__field__element--radio>.en__field__item, 
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--recurrpay .en__field__element--radio>.en__field__item {
        flex: 1 1 25%;
        min-width: auto !important;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__item .en__field__label--item {
        font-size: 14px;
        padding: 10px 0px;
    }
    .monthly-cta-container {
        display: none;
    }
    body.en__Donation.en__MultiStep_Form .ProcessForm .en__field.en__field--donationAmt {
        margin: 16px 0px;
    }
    .ProcessForm .custom-total-display {
        gap: 6px;
        justify-content: center;
        padding: 12px 6px;
        flex-direction: column;
        align-items: center;
    }
    .ProcessForm .custom-total-display p {
        font-size: 14px;
    }
    .footer-top {
        padding: 20px 0px;
    }
    .footer-inner .frow-container {
        flex-direction: column;
        gap: 20px
    }
    .footer-inner .footer-details p {
        text-align: left !important;
    }
    .footer-inner {
        padding-bottom: 20px;
    }
}

/*-----------------------------------------------------------------------------------*/
/*  EXIT INTENT MODAL
/*  Markup lives in an EN text block (#rcExitModal). Behaviour in global_js.js.
/*-----------------------------------------------------------------------------------*/
.rc-exit-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.rc-exit-modal.is-open {
	display: flex;
}
body.rc-exit-modal-open {
	overflow: hidden;
}

.rc-exit-modal__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.65);
	animation: rcExitFadeIn 0.2s ease-out;
}

.rc-exit-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 40px 32px 32px;
	background: var(--white);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	text-align: center;
	animation: rcExitSlideIn 0.25s ease-out;
}

.rc-exit-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--black);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* keep the ring for keyboard users only, but don't strip it in
   browsers without :focus-visible support */
.rc-exit-modal__close:focus:not(:focus-visible) { outline: none; }

.rc-exit-modal__close:focus-visible {
  outline: 2px solid var(--black);
}

.rc-exit-modal__icon {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 16px;
}

.rc-exit-modal__headline {
	font-family: var(--fontFamilyNeusaDemiBold);
	font-size: var(--dgd-h3);
	line-height: 1.1;
	margin: 0 0 16px 0;
	color: var(--mainTextColor);
}

.rc-exit-modal__copy {
	font-size: var(--defaultTextSize);
	line-height: var(--defaultTextLineHeight);
	margin-bottom: 28px;
}
.rc-exit-modal__copy p {
	margin: 0 0 12px 0;
}
.rc-exit-modal__copy p:last-child {
	margin-bottom: 0;
}

/* Matches the upsell lightbox buttons */
.rc-exit-modal__cta {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	padding: 16px 32px;
	border: none;
	overflow: hidden;
	background-image: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
	color: var(--white);
	font-family: var(--fontFamilyNeusaDemiBold);
	font-size: 23px;
	line-height: 26px;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.rc-exit-modal__cta span {
	position: relative;
}
.rc-exit-modal__cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
.rc-exit-modal__cta:hover::before,
.rc-exit-modal__cta:focus::before {
	left: 100%;
}

.rc-exit-modal__dismiss {
	display: inline-block;
	margin-top: 16px;
	padding: 4px;
	border: none;
	background: none;
	color: var(--mainTextColor);
	font-family: var(--fontFamilyMain);
	font-size: var(--dgd-base);
	text-decoration: underline;
	cursor: pointer;
}
.rc-exit-modal__dismiss:hover,
.rc-exit-modal__dismiss:focus {
	color: var(--linkHoverColor);
}

@keyframes rcExitFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rcExitSlideIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.rc-exit-modal__backdrop,
	.rc-exit-modal__dialog {
		animation: none;
	}
	.rc-exit-modal__cta::before {
		transition: none;
	}
}

@media (max-width: 767px) {
	.rc-exit-modal__dialog {
		padding: 32px 20px 24px;
	}
	.rc-exit-modal__icon {
		font-size: 40px;
	}
	.rc-exit-modal__cta {
		font-size: 18px;
		line-height: 22px;
		padding: 14px 20px;
	}
}

/*-----------------------------------------------------------------------------------*/
/*  PROCESSING OVERLAY
/*  Markup lives in an EN text block (#rcProcessingOverlay). Behaviour in global_js.js.
/*  z-index sits above the EN upsell lightbox and the exit intent modal.
/*-----------------------------------------------------------------------------------*/
.rc-processing {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100001;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.rc-processing.is-open {
	display: flex;
}
body.rc-processing-open {
	overflow: hidden;
}

.rc-processing__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.55);
}

.rc-processing__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 40px 32px;
	background: var(--white);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	text-align: center;
}

.rc-processing__headline {
	font-family: var(--fontFamilyNeusaDemiBold);
	font-size: var(--dgd-24px);
	line-height: 1.2;
	margin: 0 0 16px 0;
	color: var(--mainTextColor);
	text-transform: none;   /* site-wide h2 rule uppercases this otherwise */
}

.rc-processing__copy {
	font-size: var(--dgd-base);
	line-height: var(--defaultTextLineHeight);
}
.rc-processing__copy p {
	margin: 0 0 8px 0;
}
.rc-processing__copy p:last-child {
	margin-bottom: 0;
}

.rc-processing__spinner {
	width: 44px;
	height: 44px;
	margin: 28px auto 0;
	border: 4px solid rgba(6, 128, 142, 0.2);
	border-top-color: var(--paletteColor1);
	border-radius: 50%;
	animation: rcProcessingSpin 0.8s linear infinite;
}

.rc-processing__slow {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--paletteColor3);
	font-size: var(--dgd-14px);
	line-height: var(--defaultTextLineHeight);
}
.rc-processing__slow p {
	margin: 0 0 8px 0;
}
.rc-processing__slow p:last-child {
	margin-bottom: 0;
}

@keyframes rcProcessingSpin {
	to { transform: rotate(360deg); }
}

/* The spinner is status feedback, so it keeps moving - just more slowly. */
@media (prefers-reduced-motion: reduce) {
	.rc-processing__spinner {
		animation-duration: 2s;
	}
}

@media (max-width: 767px) {
	.rc-processing__dialog {
		padding: 32px 20px;
	}
	.rc-processing__headline {
		font-size: var(--dgd-18px);
	}
}

/*===================================================================================*/
/*  DONATION LEVEL SETS BY FREQUENCY            (DGD, 2026-09-08, Asana 1215674101461536)
/*
/*  The rules up at "Gift Amount" are an explicit two-way matrix: show one-time levels
/*  under one-time-selected, hide monthly ones, and the reverse. That is four selectors
/*  for two frequencies and would need twenty for five.
/*
/*  Inverted here instead - hide every tagged level, then show only the matching set.
/*  Adding a frequency is one more selector in the second rule, not another matrix row.
/*
/*  The original rules are left in place: they still match the one-time and monthly sets
/*  (global_js.js keeps adding those legacy classes), and they agree with these.
/*
/*  "Other" carries no .don-level class, so it is never hidden by either rule.
/*===================================================================================*/
.ProcessForm .en__field--donationAmt[class*="levels--"] .en__field__element--radio .en__field__item.don-level {
	display: none;
}
.ProcessForm .en__field--donationAmt.levels--onetime     .en__field__element--radio .en__field__item.don-level.level--onetime,
.ProcessForm .en__field--donationAmt.levels--monthly     .en__field__element--radio .en__field__item.don-level.level--monthly,
.ProcessForm .en__field--donationAmt.levels--quarterly   .en__field__element--radio .en__field__item.don-level.level--quarterly,
.ProcessForm .en__field--donationAmt.levels--semi-annual .en__field__element--radio .en__field__item.don-level.level--semi-annual,
.ProcessForm .en__field--donationAmt.levels--annual      .en__field__element--radio .en__field__item.don-level.level--annual {
	display: flex;
}


/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM                      (DGD, 2026-10-01, Asana 1217701537872603)
/*  Everything here hangs off body.en__Symbolic_Form (added by global_js.js when an EN
/*  row carries that class), so no other Rady form is touched.
/*  Values are from the Figma file "Rady Symbolic Giving" (see FIGMA-SPEC.md).
/*-----------------------------------------------------------------------------------*/

body.en__Symbolic_Form {
	--sg-teal: #06808e;
	--sg-teal-dark: #045761;
	--sg-gradient: linear-gradient(90deg, #0064A4 0%, #0094A8 100%);
	--sg-border: #767676;
	--sg-border-subtle: #afafaf;
	--sg-muted: #595959;
	--sg-tint: #e6f2f4;
	--sg-cond: var(--fontFamilyGothamCondensed, "Gotham Condensed", sans-serif);
	--sg-sans: var(--fontFamilyGothamBook, "Gotham Book", sans-serif);
	/* Buttons use the account's standard button font (Neusa DemiBold), same as the Donate button and the
	   tabs on every Main/Campaign form. Figma asks for Gotham Condensed Book, but only the Black weight of
	   that family is loaded on the EN CDN. */
	--sg-btn-font: var(--fontFamilyNeusaDemiBold, neusademibold), sans-serif;
}

/* ---------- stock fields that the cart replaces (kept in the DOM, driven from JS) ---------- */
/* Not in the page builder: there the fields must stay visible so they can be configured. */
body.en__Symbolic_Form:not(#en__pagebuilder) .ProcessForm .en__field--donationAmt,
body.en__Symbolic_Form:not(#en__pagebuilder) .ProcessForm .en__field--recurrpay {
	display: none !important;
}

/* ---------- shared bits ---------- */
body.en__Symbolic_Form .sg-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- section wrapper + heading (authored in the Copy Block) ---------- */
body.en__Symbolic_Form .sg-section {
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px;
	background: #fff;
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-section-heading {
	margin: 0 0 48px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}

/* ---------- grid ---------- */
body.en__Symbolic_Form .sg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.en__Symbolic_Form .sg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid var(--sg-border);
	box-sizing: border-box;
	transition: border-color 150ms, box-shadow 150ms;
}
body.en__Symbolic_Form .sg-card.is-selected {
	border-color: var(--sg-teal);
	box-shadow: 0 0 0 1px var(--sg-teal);      /* 1px border + 1px ring = the 2px selected stroke, no layout shift */
}

body.en__Symbolic_Form .sg-media {
	position: relative;
	aspect-ratio: 416 / 280;
	overflow: hidden;
	background: var(--sg-tint);
}
body.en__Symbolic_Form .sg-media img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* gift marker: second, non-colour signal that the card is in the cart */
body.en__Symbolic_Form .sg-marker {
	position: absolute;
	top: 16px; right: 16px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--sg-teal);
	color: #fff;
	border: 2px solid #fff;
}
body.en__Symbolic_Form .sg-card.is-selected .sg-marker { display: flex; }

/* price: circle over the photo on desktop, bar under it on mobile */
body.en__Symbolic_Form .sg-badge {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px; height: 88px;
	box-sizing: border-box;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--sg-gradient);
	color: #fff;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.en__Symbolic_Form .sg-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	padding: 24px;
}
body.en__Symbolic_Form .sg-title {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-desc {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: var(--sg-muted);
}

/* ---------- quantity stepper ---------- */
body.en__Symbolic_Form .sg-stepper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
	/* cards in a row are the same height; the stepper sits at the bottom of every one, so the controls line up even
	   when one title wraps to two lines and its neighbour's does not (Figma, 2026-10-20 revision) */
	margin-top: auto;
}
body.en__Symbolic_Form .sg-controls {
	display: flex;
	align-items: center;
	gap: 16px;
}
body.en__Symbolic_Form .sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin: 0; padding: 0;
	border: 1.5px solid var(--sg-border);
	border-radius: 50%;
	background: #fff;
	color: var(--sg-teal);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms;
}
body.en__Symbolic_Form .sg-btn:hover:not(:disabled) { background: var(--sg-tint); }
body.en__Symbolic_Form .sg-btn:disabled {
	border-color: var(--sg-border-subtle);   /* inactive control: contrast exemption, communicates "disabled" */
	color: var(--sg-muted);
	cursor: default;
}
body.en__Symbolic_Form .sg-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 44px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--sg-muted);
}
body.en__Symbolic_Form .sg-card.is-selected .sg-qty { color: #000; }
body.en__Symbolic_Form .sg-qty-label {
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sg-muted);
}

/* keyboard focus: 3px, outside, on every control we add */
body.en__Symbolic_Form .sg-btn:focus-visible,
body.en__Symbolic_Form .sg-sticky-btn:focus-visible
{
	outline: 3px solid var(--sg-teal);
	outline-offset: 3px;
}

/* ---------- additional gift ---------- */
body.en__Symbolic_Form .sg-extra {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 24px;
	background: var(--sg-gradient);
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-extra-label {
	margin: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
}
body.en__Symbolic_Form .sg-extra-field {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 368px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--sg-border);
}
body.en__Symbolic_Form .sg-extra-field:focus-within {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #00314a;
}
body.en__Symbolic_Form .sg-extra-prefix {
	font-family: var(--sg-cond);
	font-size: 18px;
	letter-spacing: 0.02em;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-extra-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	margin: 0; padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-extra-currency {
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--sg-muted);
}

/* ---------- total bar ---------- */
body.en__Symbolic_Form .sg-total-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px 64px;
	background: #fff;
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-error {
	margin: 0 0 16px;
	padding: 10px;
	border: 1px solid #990000;
	border-radius: 4px;
	background: #feeaeb;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #990000;
}
body.en__Symbolic_Form .sg-error[hidden] { display: none; }
body.en__Symbolic_Form .sg-band {
	display: flex;
	align-items: center;
	gap: 48px;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--sg-teal);
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-total-box {
	flex: 0 0 360px;
	box-sizing: border-box;
	padding: 24px;
	background: var(--sg-gradient);
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
body.en__Symbolic_Form .sg-total-label {
	color: #fff;
	margin: 0 0 12px;
	font-family: var(--sg-cond);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
body.en__Symbolic_Form .sg-total-value {
	color: #fff;
	margin: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 60px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body.en__Symbolic_Form .sg-monthly { flex: 1 1 auto; min-width: 0; }
body.en__Symbolic_Form .sg-monthly.is-disabled { opacity: 0.5; }
body.en__Symbolic_Form .sg-check {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
}
/* One checkbox look for the whole form (Figma atom/Checkbox): 24px square, 1.5px #595959 border,
   teal fill with a white check when on. Applies to the monthly box and to EN's own checkboxes
   (newsletter opt-in, cover-the-fees) so they match. */
body.en__Symbolic_Form .sg-check input,
body.en__Symbolic_Form .ProcessForm input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 24px;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 12px 0 0;
	padding: 0;
	box-sizing: border-box;
	border: 1.5px solid var(--sg-muted);
	border-radius: 0;
	background: #fff center / 16px 16px no-repeat;
	vertical-align: top;
	cursor: pointer;
}
body.en__Symbolic_Form .sg-check input { margin: 0; }
body.en__Symbolic_Form .sg-check input:checked,
body.en__Symbolic_Form .ProcessForm input[type="checkbox"]:checked {
	background-color: var(--sg-teal);
	border-color: var(--sg-teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.en__Symbolic_Form .sg-check input:focus-visible,
body.en__Symbolic_Form .ProcessForm input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--sg-teal);
	outline-offset: 3px;
}
body.en__Symbolic_Form .sg-check-text {
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-monthly-help {
	margin: 4px 0 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: var(--sg-muted);
}

/* ---------- form card (the stock ProcessForm column) ---------- */
body.en__Symbolic_Form .en__component--advrow.en__Donation .ProcessForm {
	max-width: 864px;
	margin-left: auto;
	margin-right: auto;
	padding: 32px;
	box-sizing: border-box;
	box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.16);
}
body.en__Symbolic_Form .sg-form-heading {
	margin: 0 0 8px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}

/* the Donate button hides its amount while it is $0 (class set by watchSubmitLabel in symbolic.js) */
body.en__Symbolic_Form .ProcessForm .en__submit button.sg-zero [data-token="amount-total"] { display: none !important; }

/* the "Your donation is secure..." line under the Donate button: a Copy Block with the block class sg-secure-note */
body.en__Symbolic_Form .sg-secure-note {
	margin: 16px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--sg-border-subtle);
}
body.en__Symbolic_Form .sg-secure-note p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	color: var(--sg-muted);
}
/* the account's global link style sets its own size (18px); the links must match the 12px line around them */
body.en__Symbolic_Form .sg-secure-note a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; }

body.en__Symbolic_Form .sg-form-heading :is([data-sg-total], [data-sg-freq]),
body.en__Symbolic_Form .sg-sticky-btn :is([data-sg-total], [data-sg-freq]) {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* ---------- pinned total (small screens only) ---------- */
body.en__Symbolic_Form .sg-sticky {
	display: none;
}
body.en__Symbolic_Form .sg-sticky-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17.5px 28px;
	border: 0;
	border-radius: 0;
	background: var(--sg-gradient);
	color: #fff;
	font-family: var(--sg-btn-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

/* =========================  TABLET  ========================= */
@media (max-width: 1023px) {
	body.en__Symbolic_Form .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* two-up with an odd gift count: the Additional gift tile takes the empty cell (it is full-width only at 3-up) */
	body.en__Symbolic_Form .sg-grid.sg-odd .sg-extra { grid-column: auto; justify-content: center; }
	body.en__Symbolic_Form .sg-section { padding: 48px 32px; }
	body.en__Symbolic_Form .sg-total-wrap { padding: 0 32px 48px; }
	body.en__Symbolic_Form .sg-band { gap: 32px; }
	body.en__Symbolic_Form .sg-total-box { flex-basis: 300px; }
}

/* =========================  MOBILE (design: 375, 2-up, descriptions off)  ========================= */
@media (max-width: 767px) {
	body.en__Symbolic_Form .sg-section { padding: 64px 20px; }
	body.en__Symbolic_Form .sg-section-heading { font-size: 48px; margin-bottom: 48px; }
	body.en__Symbolic_Form .sg-grid { gap: 16px; }

	body.en__Symbolic_Form .sg-badge {
		position: static;
		width: 100%; height: 48px;
		border: 0;
		border-radius: 0;
		justify-content: flex-start;
		padding: 8px 24px;
		font-size: 18px;
	}
	body.en__Symbolic_Form .sg-marker { top: 8px; right: 8px; }
	body.en__Symbolic_Form .sg-title { font-size: 18px; }
	body.en__Symbolic_Form .sg-desc { display: none; }
	body.en__Symbolic_Form .sg-grid.sg-desc-mobile .sg-desc { display: block; }

	/* compact stepper: 32px circles, 4px gaps, fits a ~159px card */
	body.en__Symbolic_Form .sg-controls { gap: 4px; }
	body.en__Symbolic_Form .sg-btn { width: 32px; height: 32px; border-width: 1.25px; font-size: 18px; }
	body.en__Symbolic_Form .sg-qty { width: 32px; height: 32px; font-size: 18px; }

	/* (the odd-count Additional gift tile rule is in the tablet block above; these shrink it for a ~159px cell) */
	body.en__Symbolic_Form .sg-extra-label { font-size: 18px; }
	body.en__Symbolic_Form .sg-extra-field { gap: 8px; padding: 12px 10px; }
	body.en__Symbolic_Form .sg-extra-input { font-size: 20px; }

	/* Figma: the form card sits 20px under the total band (the donor row's own 18px margin does that), no extra 64px */
	body.en__Symbolic_Form .sg-total-wrap { padding: 0 20px 0; }
	body.en__Symbolic_Form .sg-band { flex-direction: column; align-items: stretch; gap: 20px; }
	body.en__Symbolic_Form .sg-total-box { flex-basis: auto; width: 100%; }

	body.en__Symbolic_Form .en__component--advrow.en__Donation .ProcessForm { padding: 16px; }
	body.en__Symbolic_Form .sg-form-heading { font-size: 32px; }

	body.en__Symbolic_Form .sg-sticky.is-visible {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 900;
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--sg-border-subtle);
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.12);
	}
	body.en__Symbolic_Form.sg-sticky-on { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
	body.en__Symbolic_Form .sg-card,
	body.en__Symbolic_Form .sg-btn { transition: none; }
}

/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM - PAGE SECTIONS      (DGD, 2026-10-01, Asana 1217701537872603)
/*  Top bar, header, hero, intro callout, the sections under the form, payment tabs.
/*  Same rule as the rest of the block: everything hangs off body.en__Symbolic_Form.
/*-----------------------------------------------------------------------------------*/

/* ---------- payment method tabs ----------
   Stock CSS gives each tab min-width:315px on Campaign forms, which only fits once the grid drops
   to 2 columns at small widths. In the 800px form card that made 4 tabs overflow the card.
   Figma: four equal tabs, 62px tall, 8px apart; selected = brand gradient. */
body.en__Symbolic_Form.en__Donation.en__Campaign_Form .ProcessForm .en__field--paymenttype .en__field__element--radio {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
body.en__Symbolic_Form.en__Donation.en__Campaign_Form .ProcessForm .en__field--paymenttype .en__field__element--radio > .en__field__item {
	min-width: 0 !important;
	min-height: 62px;
}
body.en__Symbolic_Form .ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__label--item {
	box-sizing: border-box;
	min-height: 62px;
	padding: 6px 8px;
	border: 1px solid var(--sg-border);
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
body.en__Symbolic_Form .ProcessForm .en__field--paymenttype .en__field__element--radio .en__field__item.active .en__field__label--item {
	border-color: var(--sg-teal-dark);
}

/* ---------- buttons shared by the page sections ---------- */
body.en__Symbolic_Form .sg-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 17.5px 28px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--sg-gradient);
	color: #fff;
	font-family: var(--sg-btn-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
/* Hover matches the account's own buttons (a.button-cta, the Donate button): a light sheen sweeps across.
   Outlined buttons fill with the brand gradient on hover, same as the amount and payment-method tabs. */
body.en__Symbolic_Form .sg-cta { position: relative; overflow: hidden; }
body.en__Symbolic_Form .sg-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
body.en__Symbolic_Form .sg-cta:hover::before,
body.en__Symbolic_Form .sg-cta:focus::before { left: 100%; }
body.en__Symbolic_Form .sg-cta:hover,
body.en__Symbolic_Form .sg-cta:focus {
	background: var(--sg-gradient);
	color: #fff;
	text-decoration: none;
}
body.en__Symbolic_Form .sg-cta:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 3px; }
body.en__Symbolic_Form .sg-cta--secondary {
	background: #fff;
	border-color: var(--sg-teal);
	color: var(--sg-teal);
}
html:has(body.en__Symbolic_Form) { scroll-behavior: smooth; }

/* ---------- top bar ---------- */
body.en__Symbolic_Form .sg-topbar {
	padding: 12px 20px;
	background: var(--sg-gradient);
	text-align: center;
}
body.en__Symbolic_Form .sg-topbar p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #fff;
}

/* ---------- header (logo + Donate NOW) ---------- */
body.en__Donation.en__Symbolic_Form .en__component--advrow.custom-header {
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.en__Symbolic_Form .sg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
body.en__Symbolic_Form .sg-header a:first-child { display: block; line-height: 0; }
body.en__Symbolic_Form .sg-header img { display: block; max-width: 100%; height: auto; }
body.en__Symbolic_Form .sg-header .sg-cta { flex: 0 0 auto; padding: 13.5px 24px; }

/* ---------- hero: the photo is the row background (global_js copies it from the hidden bannerImgSrc
   image); the headline is live text so it changes per campaign and reflows on mobile ---------- */
body.en__Symbolic_Form .en__component--advrow.hero-banner {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: auto;
	/* 400px at the 1440px design width, then grows with the viewport so wide screens keep the same crop
	   (a fixed height on a wider page zooms the photo in and cuts off the top of the head) */
	min-height: clamp(400px, 27.78vw, 640px);
	/* left edge = the same 64px content edge as the callout and gift grid, centred past 1440px */
	padding: 48px 64px 48px max(64px, calc((100% - 1440px) / 2 + 64px));
	background-color: #fff;
	background-size: cover;
	background-position: right 12%;
}
body.en__Symbolic_Form .en__component--advrow.hero-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fff 16.8%, rgba(255, 255, 255, 0) 70.3%);
	pointer-events: none;
}
body.en__Symbolic_Form .en__component--advrow.hero-banner > * { position: relative; z-index: 1; }
body.en__Symbolic_Form .sg-hero-title,
body.en__Symbolic_Form .hero-banner h1 {
	max-width: 450px;
	margin: 0;
	padding: 32px 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 60px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #000;
}

/* ---------- intro callout above the grid ---------- */
body.en__Symbolic_Form .sg-callout-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 64px 0;
	box-sizing: border-box;
	background: #fff;
}
body.en__Symbolic_Form .sg-callout {
	padding: 24px;
	background: var(--sg-tint);
}
body.en__Symbolic_Form .sg-callout p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}

/* ---------- sections under the form ---------- */
body.en__Symbolic_Form .sg-story-band {
	padding: 64px;
	background: var(--sg-gradient);
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-story-band-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
	max-width: 1312px;           /* same width as the gift grid (1440 - 2 x 64) */
	margin: 0 auto;
}
body.en__Symbolic_Form .sg-story-band h3 {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
body.en__Symbolic_Form .sg-story-band p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #fff;
}

body.en__Symbolic_Form .sg-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	padding: 64px;
	background: #fff;
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-feature-copy { flex: 0 1 500px; min-width: 0; }
body.en__Symbolic_Form .sg-feature p.sg-eyebrow {
	margin: 0 0 8px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-feature h3 {
	margin: 0 0 24px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-feature p {
	margin: 0 0 24px;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-feature-img { flex: 0 1 487px; min-width: 0; }
body.en__Symbolic_Form .sg-feature-img img { display: block; width: 100%; height: auto; }

body.en__Symbolic_Form .sg-impact-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 214px;
	overflow: hidden;
	background: var(--sg-gradient);
}
body.en__Symbolic_Form .sg-impact-band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.en__Symbolic_Form .sg-impact-band h2 {
	position: relative;
	margin: 0;
	padding: 0 20px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
body.en__Symbolic_Form .sg-impact-panel {
	padding: 64px;
	background: var(--sg-tint);
	text-align: center;
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	max-width: 1040px;
	margin: 0 auto 48px;
	padding: 0;
	list-style: none;
}
body.en__Symbolic_Form .sg-stat { margin: 0; padding: 0; }
body.en__Symbolic_Form .sg-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #fff;
}
body.en__Symbolic_Form .sg-stat-icon img { display: block; width: 40px; height: 40px; object-fit: contain; }
body.en__Symbolic_Form .sg-stat-number {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-stat-text {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-impact-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
}
body.en__Symbolic_Form .sg-impact-link::after {
	content: "";
	width: 8px;
	height: 8px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
}
body.en__Symbolic_Form .sg-impact-link:hover { color: var(--sg-teal); text-decoration: none; }

body.en__Symbolic_Form .sg-cta-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 64px;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
}
body.en__Symbolic_Form .sg-cta-band h3 {
	margin: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-fineprint {
	padding: 24px 64px;
	background: #fff;
	box-sizing: border-box;
}
body.en__Symbolic_Form .sg-fineprint p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: var(--sg-muted);
}

/* =========================  TABLET  ========================= */
@media (max-width: 1023px) {
	body.en__Symbolic_Form .sg-callout-wrap { padding: 48px 32px 0; }
	body.en__Symbolic_Form .sg-story-band { padding: 48px 32px; }
	body.en__Symbolic_Form .sg-story-band-inner { grid-template-columns: 1fr; gap: 32px; }
	body.en__Symbolic_Form .sg-feature { padding: 48px 32px; gap: 32px; }
	body.en__Symbolic_Form .sg-impact-panel { padding: 48px 32px; }
	body.en__Symbolic_Form .sg-fineprint { padding: 24px 32px; }
	body.en__Symbolic_Form .en__component--advrow.hero-banner { padding: 32px; }
}

/* =========================  MOBILE  ========================= */
@media (max-width: 767px) {
	body.en__Symbolic_Form .sg-topbar { padding: 12px 16px; }
	body.en__Symbolic_Form .sg-header { gap: 12px; }
	body.en__Symbolic_Form .sg-header img { max-width: 170px; }
	body.en__Symbolic_Form .sg-header .sg-cta { padding: 12px 16px; font-size: 16px; }

	/* Figma mobile hero: 260px photo on top, headline underneath */
	body.en__Symbolic_Form .en__component--advrow.hero-banner {
		display: block;
		min-height: 0;
		padding: 260px 0 32px;
		background-size: auto 260px;
		background-position: right top;
		background-repeat: no-repeat;
		/* 1200px crop instead of the 1920px desktop photo (the page's inline background-image is overridden, so only this one downloads).
		   Upload sg-hero-mobile.jpg to the CDN BEFORE this CSS goes live. */
		background-image: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10136/sg-hero-mobile.jpg") !important;
	}
	body.en__Symbolic_Form .en__component--advrow.hero-banner::before { display: none; }
	body.en__Symbolic_Form .sg-hero-title,
	body.en__Symbolic_Form .hero-banner h1 { max-width: none; padding: 32px 20px 0; font-size: 48px; line-height: 1.2; }

	body.en__Symbolic_Form .sg-callout-wrap { padding: 32px 20px 0; }
	body.en__Symbolic_Form .sg-story-band { padding: 64px 32px; }
	body.en__Symbolic_Form .sg-story-band-inner { gap: 48px; }
	body.en__Symbolic_Form .sg-story-band h3 { font-size: 32px; }
	body.en__Symbolic_Form .sg-story-band p { font-size: 16px; }
	body.en__Symbolic_Form .sg-feature { flex-direction: column; align-items: stretch; padding: 64px 20px; gap: 24px; }
	body.en__Symbolic_Form .sg-feature-copy,
	body.en__Symbolic_Form .sg-feature-img { flex: 0 0 auto; }
	body.en__Symbolic_Form .sg-impact-band h2 { font-size: 36px; }
	body.en__Symbolic_Form .sg-impact-panel { padding: 64px 20px; }
	body.en__Symbolic_Form .sg-stats { grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
	body.en__Symbolic_Form .sg-cta-band { padding: 64px 20px; }
	body.en__Symbolic_Form .sg-fineprint { padding: 24px 20px; }
	body.en__Symbolic_Form.en__Donation.en__Campaign_Form .ProcessForm .en__field--paymenttype .en__field__element--radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* wide phones / small tablets: let the photo scale with the width so it never leaves a gap */
@media (min-width: 600px) and (max-width: 767px) {
	body.en__Symbolic_Form .en__component--advrow.hero-banner {
		padding-top: calc(100vw / 2.302);
		background-size: 100% auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.en__Symbolic_Form) { scroll-behavior: auto; }
}

/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM - EDITOR-FRIENDLY ROWS   (DGD, 2026-10-05, Asana 1217701537872603)
/*
/*  The page sections built from NATIVE EN blocks. Structure comes from custom class names set in
/*  the Page Builder (row, column and block "Custom CSS Class" fields), so the rich-text editor has
/*  nothing to strip and nobody needs the Source tab. Content inside the blocks is plain: images,
/*  Heading 1-4, paragraphs, links.
/*
/*    ROW classes   sg-row-topbar  sg-row-header  sg-row-hero  sg-row-callout  sg-row-gifts-heading
/*                  sg-row-gifts   sg-row-settings  sg-row-story-band  sg-row-feature
/*                  sg-row-impact-band  sg-row-stats  sg-row-impact-link  sg-row-cta  sg-row-fineprint
/*    BLOCK classes sg-actions (button)  sg-actions--outline (outlined button)  sg-actions--link (text link)
/*    COLUMN class  sg-key-<name>   optional, fixes a product's reporting key
/*
/*  Rules that only make sense on the live page (an image laid behind the band heading) are scoped
/*  body:not(#en__pagebuilder) so the editor keeps seeing every block on its own, clickable.
/*  The labelled guides the editor does see are in symbolic-editor.css.
/*-----------------------------------------------------------------------------------*/

body.en__Symbolic_Form {
	--sg-pad: 64px;
	/* left/right padding that keeps content on a 1312px column, centred, never closer than --sg-pad */
	--sg-gutter: max(var(--sg-pad), calc((100% - 1312px) / 2));
}

/* every column we style starts from nothing, whatever the template gives a column */
body.en__Symbolic_Form [class*="sg-row-"] > .en__component--advcolumn {
	margin: 0;
	padding: 0;
	max-width: none;
	background: none;
	box-shadow: none;
}
body.en__Symbolic_Form [class*="sg-row-"] .en__component--copyblock p:empty { display: none; }

/* ---------- buttons made from a block's links ---------- */
body.en__Symbolic_Form .sg-actions p { margin: 0; }
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 17.5px 28px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--sg-gradient);
	color: #fff;
	font-family: var(--sg-btn-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: all 0.5s ease;
	pointer-events: none;
}
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a:hover::before,
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a:focus::before { left: 100%; }
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a:hover,
body.en__Symbolic_Form .sg-actions:not(.sg-actions--link) a:focus {
	background: var(--sg-gradient);
	color: #fff;
	text-decoration: none;
}
body.en__Symbolic_Form .sg-actions a:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 3px; }
body.en__Symbolic_Form .sg-actions.sg-actions--outline:not(.sg-actions--link) a {
	background: #fff;
	border-color: var(--sg-teal);
	color: var(--sg-teal);
}
/* outlined buttons fill with the brand gradient on hover, like the amount and payment tabs */
body.en__Symbolic_Form .sg-actions.sg-actions--outline:not(.sg-actions--link) a:hover,
body.en__Symbolic_Form .sg-actions.sg-actions--outline:not(.sg-actions--link) a:focus {
	background: var(--sg-gradient);
	border-color: var(--sg-teal);
	color: #fff;
}
body.en__Symbolic_Form .sg-actions--link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
}
body.en__Symbolic_Form .sg-actions--link a::after {
	content: "";
	width: 8px;
	height: 8px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
}
body.en__Symbolic_Form .sg-actions--link a:hover { color: var(--sg-teal); text-decoration: none; }

/* ---------- top bar ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-topbar {
	padding: 12px 20px;
	background: var(--sg-gradient);
	text-align: center;
}
body.en__Symbolic_Form .sg-row-topbar p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #fff;
	text-align: center;
}

/* ---------- header: logo left, Donate NOW right ---------- */
body.en__Donation.en__Symbolic_Form .en__component--advrow.sg-row-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* the template keeps header content in a 1500px column with 20px of padding, centred; same here, so the
	   header does not stretch to the edges of a wide screen */
	padding: 20px max(20px, calc((100% - 1500px) / 2 + 20px));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.en__Donation.en__Symbolic_Form .sg-row-header > .en__component--advcolumn {
	flex: 0 1 auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
body.en__Donation.en__Symbolic_Form .sg-row-header > .en__component--advcolumn:first-child { flex: 1 1 auto; }
body.en__Symbolic_Form .sg-row-header .sg-actions a { padding: 13.5px 24px; }
/* the template's header rule sets line-height:0 on every paragraph (it is for the logo); the button's paragraph needs a real one */
.en__component--advrow.sg-row-header .sg-actions p { line-height: 1.3; }
body.en__Symbolic_Form .sg-row-header img { display: block; max-width: 100%; height: auto; }

/* ---------- gift section heading (the grid itself is built by the script, see .sg-grid-wrap) ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-gifts-heading {
	display: block;
	padding: 64px var(--sg-gutter) 48px;
	background: #fff;
}
body.en__Symbolic_Form .sg-row-gifts-heading h2 {
	margin: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-grid-wrap {
	box-sizing: border-box;
	padding: 0 var(--sg-gutter) 64px;
	background: #fff;
}

/* ---------- intro callout ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-callout {
	display: block;
	padding: 64px var(--sg-gutter) 0;
	background: #fff;
}
body.en__Symbolic_Form .sg-row-callout > .en__component--advcolumn {
	padding: 24px;
	background: var(--sg-tint);
}
body.en__Symbolic_Form .sg-row-callout p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}

/* ---------- story band: three columns on the gradient ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-story-band {
	display: flex;
	gap: 48px;
	padding: 64px var(--sg-gutter);
	background: var(--sg-gradient);
}
body.en__Symbolic_Form .sg-row-story-band > .en__component--advcolumn { flex: 1 1 0; min-width: 0; }
body.en__Symbolic_Form .sg-row-story-band h3 {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
body.en__Symbolic_Form .sg-row-story-band p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #fff;
}

/* ---------- story feature: text left, round photo right ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	padding: 64px var(--sg-gutter);
	background: #fff;
}
body.en__Symbolic_Form .sg-row-feature > .en__component--advcolumn:first-child { flex: 0 1 500px; min-width: 0; }
body.en__Symbolic_Form .sg-row-feature > .en__component--advcolumn:last-child { flex: 0 1 487px; min-width: 0; }
body.en__Symbolic_Form .sg-row-feature h4 {
	margin: 0 0 8px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-row-feature h3 {
	margin: 0 0 24px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-row-feature p {
	margin: 0 0 24px;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-row-feature .sg-actions p { margin: 0; }
/* EN's Image block writes the file's own pixel size inline, which outranks every selector;
   !important is the only thing that wins. */
body.en__Symbolic_Form .sg-row-feature .en__component--advcolumn:last-child img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 487px;
}

/* ---------- impact: band, stats, link ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-impact-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 214px;
	overflow: hidden;
	background: var(--sg-gradient);
}
/* The column is deliberately NOT positioned: the photo block is absolutely placed against the ROW,
   so it fills the whole band rather than the heading's height. */
body.en__Symbolic_Form .sg-row-impact-band > .en__component--advcolumn {
	flex: 1 1 auto;
	text-align: center;
}
body.en__Symbolic_Form .sg-row-impact-band h2 {
	position: relative;
	margin: 0;
	padding: 0 20px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
/* Live page only: the photo block is laid behind the heading. In the builder both blocks stay
   stacked and clickable. */
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-impact-band .en__component--imageblock,
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-impact-band .en__component--copyblock:has(img) {
	position: absolute;
	inset: 0;
	margin: 0;
}
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-impact-band .en__component--imageblock img,
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-impact-band .en__component--copyblock:has(img) img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-impact-band .en__component--copyblock:not(:has(img)) {
	position: relative;
	z-index: 1;
}

body.en__Symbolic_Form .en__component--advrow.sg-row-stats {
	display: flex;
	gap: 32px;
	padding: 64px max(var(--sg-pad), calc((100% - 1040px) / 2)) 48px;
	background: var(--sg-tint);
}
body.en__Symbolic_Form .sg-row-stats > .en__component--advcolumn {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}
/* The icon is drawn on a white circle by styling the IMAGE itself (80px, 20px of padding = a 40px icon), not
   its block. That way it works whether the icon sits in its own block or in the same block as the number and
   text, and in a rich-text image or an Image block. !important beats the size EN writes inline.
   The circle is a radial-gradient background, NOT border-radius: a border-radius on an <img> with padding also
   clips the picture itself to a 40px circle (radius minus padding), which cut off the corners of the icons. */
body.en__Symbolic_Form .sg-row-stats img {
	display: block;
	box-sizing: border-box;
	width: 80px !important;
	height: 80px !important;
	max-width: none;
	margin: 0 auto 16px;
	padding: 20px;
	border-radius: 0;
	background: radial-gradient(circle closest-side, #fff calc(100% - 1px), rgba(255, 255, 255, 0) 100%);
	object-fit: contain;
}
body.en__Symbolic_Form .sg-row-stats p:has(> img) { margin: 0; line-height: 0; }
body.en__Symbolic_Form .sg-row-stats h3 {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-row-stats p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: #000;
}
body.en__Symbolic_Form .en__component--advrow.sg-row-impact-link {
	display: block;
	padding: 0 var(--sg-gutter) 64px;
	background: var(--sg-tint);
	text-align: center;
}

/* ---------- call to action + fine print ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-row-cta {
	display: block;
	padding: 64px var(--sg-gutter);
	background: #fff;
	text-align: center;
}
body.en__Symbolic_Form .sg-row-cta h3 {
	margin: 0 0 24px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .en__component--advrow.sg-row-fineprint {
	display: block;
	padding: 24px var(--sg-gutter);
	background: #fff;
}
body.en__Symbolic_Form .sg-row-fineprint p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: var(--sg-muted);
}

/* ---------- the gift wording rows are read by the script and never shown ---------- */
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-settings,
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-extra,
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-total-bar,
body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-sticky { display: none; }

/* =========================  TABLET  ========================= */
@media (max-width: 1024px) {
	body.en__Symbolic_Form { --sg-pad: 32px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-story-band,
	body.en__Symbolic_Form .en__component--advrow.sg-row-stats { flex-direction: column; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-story-band { gap: 32px; padding-top: 48px; padding-bottom: 48px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-feature { gap: 32px; padding-top: 48px; padding-bottom: 48px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-stats { padding-top: 48px; padding-left: var(--sg-pad); padding-right: var(--sg-pad); }
	body.en__Symbolic_Form .en__component--advrow.sg-row-gifts-heading { padding-top: 48px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-callout { padding-top: 48px; }
	body.en__Symbolic_Form .sg-grid-wrap { padding-bottom: 48px; }
}

/* =========================  MOBILE  ========================= */
@media (max-width: 767px) {
	body.en__Symbolic_Form { --sg-pad: 20px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-topbar { padding: 12px 16px; }
	/* Figma mobile header: logo only (240 x 64 in a 104px bar). The Donate NOW column is hidden; the page is one scroll away from the gifts. */
	body.en__Donation.en__Symbolic_Form:not(#en__pagebuilder) .en__component--advrow.sg-row-header { box-sizing: border-box; min-height: 104px; }
	body.en__Symbolic_Form:not(#en__pagebuilder) .sg-row-header > .en__component--advcolumn:has(.sg-actions) { display: none; }
	body.en__Symbolic_Form .sg-row-header img { width: 240px; max-width: 100%; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-gifts-heading { padding-top: 64px; }
	body.en__Symbolic_Form .sg-grid-wrap { padding-bottom: 64px; }
	/* Figma: the intro panel starts right under the hero text (the hero already ends with 32px) */
	body.en__Symbolic_Form .en__component--advrow.sg-row-callout { padding-top: 0; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-story-band { gap: 48px; padding: 64px 32px; }
	body.en__Symbolic_Form .sg-row-story-band h3 { font-size: 32px; }
	body.en__Symbolic_Form .sg-row-story-band p { font-size: 16px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-feature { flex-direction: column; align-items: stretch; gap: 24px; padding-top: 64px; padding-bottom: 64px; }
	body.en__Symbolic_Form .sg-row-feature > .en__component--advcolumn:first-child,
	body.en__Symbolic_Form .sg-row-feature > .en__component--advcolumn:last-child { flex: 0 0 auto; }
	/* Figma sets this heading on two lines at 36px; our condensed face is wider, so 34px keeps it to two */
	body.en__Symbolic_Form .sg-row-feature h3 { font-size: 34px; }
	body.en__Symbolic_Form .sg-row-impact-band h2 { font-size: 36px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-stats { gap: 36px; padding-top: 64px; padding-bottom: 40px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-cta { padding-top: 64px; padding-bottom: 64px; }
	body.en__Symbolic_Form .en__component--advrow.sg-row-fineprint { padding-top: 24px; padding-bottom: 24px; }

	/* (!important below: the template's grid CSS and the footer's utility classes / inline styles set these)
	   the donor-form card sits 20px under the total band and 20px above the story band, as in Figma */
	body.en__Symbolic_Form .en__component--advrow.en__Donation:has(.ProcessForm) { margin-top: 20px !important; margin-bottom: 20px !important; }

	/* footer (the shared template footer, tightened on this form only): Figma's mobile footer is 486px tall; ours also
	   carries the address block, so it cannot match exactly, but the empty space around everything goes */
	body.en__Symbolic_Form footer .footer-top { padding-top: 0; padding-bottom: 0; }
	body.en__Symbolic_Form footer .footer-address { margin-bottom: 20px !important; }
	body.en__Symbolic_Form footer .footer-top p.size-14px { margin-bottom: 12px; }
	body.en__Symbolic_Form footer .footer-bottom .frow-container { padding-top: 20px !important; padding-bottom: 20px !important; }
	body.en__Symbolic_Form footer .footer-bottom .col-xs-12-12 { margin-top: 0 !important; }
}

/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM - THANK YOU PAGE (page 2 of the same EN page)
/*  Hangs off body.en__Symbolic_Form (the page-ty row carries en__Symbolic_Form) and the sg-ty-* ROW classes.
/*  ROW classes   sg-ty-hero  sg-ty-copy  sg-ty-details  sg-ty-narrative  sg-ty-share  sg-ty-impact-heading  sg-ty-cards
/*  (the top bar and header reuse sg-row-topbar / sg-row-header from symbolic-rows.css)
/*  Values are from the Figma frame "Symbolic / Thank You / Desktop 1440" (FIGMA-SPEC.md).
/*-----------------------------------------------------------------------------------*/

/* The template wraps every .thank-you-section row in a white shadowed card. These rows do not carry that class,
   but if one is ever added back the card must not come back with it. */
body.en__Symbolic_Form .thank-you-container {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

body.en__Symbolic_Form [class*="sg-ty-"] > .en__component--advcolumn {
	margin: 0;
	padding: 0;
	max-width: none;
	background: none;
	box-shadow: none;
}
body.en__Symbolic_Form [class*="sg-ty-"] .en__component--copyblock p:empty { display: none; }

body.en__Symbolic_Form {
	/* left/right padding that keeps a column of the given width centred, never closer to the edge than --sg-pad */
	--sg-ty-copy-pad: max(var(--sg-pad, 64px), calc((100% - 860px) / 2));
	--sg-ty-wide-pad: max(var(--sg-pad, 64px), calc((100% - 1312px) / 2));
}

/* ---------- hero banner: full-bleed photo, 465px ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-hero {
	display: block;
	width: 100%;
	max-width: none;      /* the template caps this row (it carries en__Donation) at 1500px */
	height: 465px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
}
body.en__Symbolic_Form .sg-ty-hero .en__component--imageblock,
body.en__Symbolic_Form .sg-ty-hero .en__component--copyblock { margin: 0; }
body.en__Symbolic_Form .sg-ty-hero img {
	display: block;
	width: 100% !important;
	height: 465px !important;
	max-width: none;
	object-fit: cover;
	/* where the photo is anchored when a narrow screen crops it. The placeholder photo has the child on the right, so
	   the default keeps that side in view (centred cropping cut the face off on phones). With the final photo, change
	   the 100% (0% = keep the left edge, 100% = keep the right edge). */
	object-position: var(--sg-ty-hero-pos, 100%) 50%;
}

/* ---------- thank-you message ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-copy {
	display: block;
	box-sizing: border-box;
	padding: 48px var(--sg-ty-copy-pad);
	background: #fff;
}
body.en__Symbolic_Form .sg-ty-copy h1 {
	margin: 0 0 20px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-ty-copy p {
	margin: 0 0 26px;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	color: #000;
}
/* the first paragraph is the subhead, the last one is the small print */
body.en__Symbolic_Form .sg-ty-copy h1 + p { margin-bottom: 20px; font-size: 24px; }
body.en__Symbolic_Form .sg-ty-copy p:nth-last-of-type(2) { margin-bottom: 20px; }
body.en__Symbolic_Form .sg-ty-copy p:last-of-type {
	margin-bottom: 0;
	font-size: 16px;
	color: #494949;
}
body.en__Symbolic_Form .sg-ty-copy a { color: inherit; text-decoration: underline; }

/* ---------- transaction details ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-details {
	display: block;
	box-sizing: border-box;
	padding: 0 var(--sg-ty-copy-pad) 48px;
	background: #fff;
	text-align: center;
}
body.en__Symbolic_Form .sg-ty-details h2 {
	display: block;       /* the template makes h2.section-header-container a flex row, which ignores text-align */
	padding: 0;
	border: 0;            /* ...and gives it a rule above */
	margin: 0 0 20px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: #000;
}
body.en__Symbolic_Form .sg-ty-details p { margin: 0; }
/* the template button is a filled gradient with !important on most things; this makes it Figma's outlined one */
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	width: auto !important;
	min-width: 240px;
	max-width: 100%;
	margin: 0;
	padding: 14px 24px !important;
	border: 1px solid var(--sg-teal) !important;
	border-radius: 0;
	background: #fff !important;
	color: var(--sg-teal) !important;
	font-family: var(--sg-cond) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase !important;
	overflow: hidden;
}
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle::before { display: none; }
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle:hover,
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle:focus {
	background: var(--sg-gradient) !important;
	background-image: var(--sg-gradient) !important;
	color: #fff !important;
}
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 3px; }
body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle .toggle-arrow { font-size: 12px; line-height: 1; }
body.en__Symbolic_Form .sg-ty-details .transaction-details {
	box-sizing: border-box;
	width: 100%;
	max-width: 860px;
	margin: 20px auto 0;
	padding: 24px;
	background: var(--sg-tint);
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
	color: #000;
}

/* ---------- what happens next: tinted band ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-narrative {
	display: block;
	box-sizing: border-box;
	padding: 48px max(var(--sg-pad, 64px), calc((100% - 880px) / 2));
	background: var(--sg-tint);
	text-align: center;
}
body.en__Symbolic_Form .sg-ty-narrative h4 {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	color: var(--sg-teal);
}
body.en__Symbolic_Form .sg-ty-narrative h3 {
	margin: 0 0 16px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	color: #000;
}
body.en__Symbolic_Form .sg-ty-narrative p {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 20px;
	line-height: 1.3;
	text-align: center;
	color: var(--sg-muted);
}

/* ---------- share ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-share {
	display: block;
	box-sizing: border-box;
	padding: 48px var(--sg-ty-copy-pad);
	background: #fff;
	text-align: center;
}
body.en__Symbolic_Form .sg-ty-share h3 {
	margin: 0 0 24px;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: #000;
}
/* the paragraph that holds the links is the icon row; the one without links is the note */
body.en__Symbolic_Form .sg-ty-share p:has(a) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0 0 24px;
}
body.en__Symbolic_Form .sg-ty-share p:not(:has(a)) {
	max-width: 560px;
	margin: 0 auto;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: #494949;
}
/* the link words stay for screen readers; the circle and the glyph are drawn here */
body.en__Symbolic_Form .sg-ty-share p:has(a) a {
	display: block;
	flex: 0 0 48px;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--sg-teal);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 48px 48px;
	color: transparent;
	font-size: 0;
	text-indent: -9999px;
	white-space: nowrap;
	text-decoration: none;
}
body.en__Symbolic_Form .sg-ty-share p:has(a) a:hover,
body.en__Symbolic_Form .sg-ty-share p:has(a) a:focus { background-color: #056c77; }
body.en__Symbolic_Form .sg-ty-share p:has(a) a:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 3px; }
/*ICONS*/
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="facebook.com"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M30.9231%2021.2308H26.3077V17.5385C26.3077%2016.5194%2027.1348%2016.6154%2028.1538%2016.6154H30V12H26.3077C23.2486%2012%2020.7692%2014.4794%2020.7692%2017.5385V21.2308H17.0769V25.8462H20.7692V36H26.3077V25.8462H29.0769L30.9231%2021.2308Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="wa.me"],
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="whatsapp.com"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M35.571%2032.1766C35.0821%2033.5572%2033.1417%2034.7022%2031.594%2035.0366C30.5351%2035.262%2029.152%2035.4419%2024.4961%2033.5116C18.5406%2031.0443%2014.7054%2024.9926%2014.4065%2024.6C14.1203%2024.2073%2012%2021.3955%2012%2018.4875C12%2015.5794%2013.4768%2014.1634%2014.0721%2013.5554C14.561%2013.0564%2015.3691%2012.8284%2016.1442%2012.8284C16.395%2012.8284%2016.6205%2012.8411%2016.8231%2012.8512C17.4184%2012.8765%2017.7173%2012.912%2018.11%2013.8518C18.5989%2015.0297%2019.7895%2017.9378%2019.9313%2018.2367C20.0757%2018.5356%2020.2201%2018.9409%2020.0174%2019.3335C19.8275%2019.7389%2019.6603%2019.9187%2019.3614%2020.2632C19.0624%2020.6077%2018.7787%2020.8712%2018.4798%2021.241C18.2062%2021.5627%2017.8972%2021.9072%2018.2417%2022.5025C18.5862%2023.0851%2019.7768%2025.0281%2021.5297%2026.5885C23.7918%2028.6024%2025.6258%2029.2458%2026.2819%2029.5194C26.7708%2029.722%2027.3535%2029.6739%2027.7106%2029.2939C28.1641%2028.805%2028.7239%2027.9944%2029.2939%2027.1965C29.6992%2026.624%2030.2109%2026.553%2030.7479%2026.7557C31.2951%2026.9457%2034.1904%2028.3769%2034.7857%2028.6733C35.381%2028.9722%2035.7737%2029.1141%2035.9181%2029.3648C36.0599%2029.6156%2036.0599%2030.7935%2035.571%2032.1766Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="linkedin.com"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20transform%3D%22translate(12%2012)%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M5.367%207.5H0V24H5.367V7.5Z%22%2F%3E%3Cpath%20d%3D%22M19.986%207.6935C19.929%207.6755%2019.875%207.656%2019.815%207.6395C19.743%207.623%2019.671%207.6095%2019.5975%207.5975C19.3125%207.5405%2019.0005%207.5%2018.6345%207.5C15.5055%207.5%2013.521%209.7755%2012.867%2010.6545V7.5H7.5V24H12.867V15C12.867%2015%2016.923%209.351%2018.6345%2013.5C18.6345%2017.2035%2018.6345%2024%2018.6345%2024H24V12.8655C24%2010.3725%2022.2915%208.295%2019.986%207.6935Z%22%2F%3E%3Cpath%20d%3D%22M2.625%205.25C4.07475%205.25%205.25%204.07475%205.25%202.625C5.25%201.17525%204.07475%200%202.625%200C1.17525%200%200%201.17525%200%202.625C0%204.07475%201.17525%205.25%202.625%205.25Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="//x.com"],
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="//www.x.com"],
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="//twitter.com"],
body.en__Symbolic_Form .sg-ty-share p:has(a) a[href*="//www.twitter.com"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M26.2154%2022.1538L34.9846%2012H32.9538L25.3846%2020.7692L19.2923%2012H12.2769L21.4154%2025.2923L12.2769%2036H14.3077L22.3385%2026.6769L28.7077%2036H35.7231L26.2154%2022.1538ZM23.3538%2025.4769L22.4308%2024.1846L15.0462%2013.6615H18.1846L24.0923%2022.1538L25.0154%2023.4462L32.7692%2034.5231H29.6308L23.3538%2025.4769Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
/*/ICONS*/

/* ---------- make an even greater impact ---------- */
body.en__Symbolic_Form .en__component--advrow.sg-ty-impact-heading {
	display: block;
	box-sizing: border-box;
	padding: 48px var(--sg-ty-wide-pad) 32px;
	background: #fff;
}
body.en__Symbolic_Form .sg-ty-impact-heading h2 {
	margin: 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .en__component--advrow.sg-ty-cards {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	box-sizing: border-box;
	padding: 0 var(--sg-ty-wide-pad) 48px;
	background: #fff;
}
body.en__Symbolic_Form .sg-ty-cards > .en__component--advcolumn { flex: 1 1 0; min-width: 0; }
body.en__Symbolic_Form .sg-ty-cards .en__component--imageblock,
body.en__Symbolic_Form .sg-ty-cards .en__component--copyblock { margin: 0; }
/* EN's Image block writes the file's pixel size inline; !important is the only thing that outranks it */
body.en__Symbolic_Form .sg-ty-cards img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none;
	aspect-ratio: 640 / 432;
	object-fit: cover;
}
body.en__Symbolic_Form .sg-ty-cards h3 {
	margin: 16px 0;
	font-family: var(--sg-cond);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
}
body.en__Symbolic_Form .sg-ty-cards p {
	margin: 0 0 16px;
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}
body.en__Symbolic_Form .sg-ty-cards .sg-actions p { margin: 0; }

/* =========================  TABLET  ========================= */
@media (max-width: 1024px) {
	body.en__Symbolic_Form .en__component--advrow.sg-ty-hero { height: 360px; }
	body.en__Symbolic_Form .sg-ty-hero img { height: 360px !important; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-cards { gap: 24px; }
}

/* =========================  MOBILE  ========================= */
@media (max-width: 767px) {
	body.en__Symbolic_Form .en__component--advrow.sg-ty-hero { height: 260px; }
	body.en__Symbolic_Form .sg-ty-hero img { height: 260px !important; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-copy { padding: 32px 20px; }
	body.en__Symbolic_Form .sg-ty-copy h1 { font-size: 40px; }
	body.en__Symbolic_Form .sg-ty-copy h1 + p { font-size: 20px; }
	body.en__Symbolic_Form .sg-ty-copy p { font-size: 18px; margin-bottom: 20px; }
	body.en__Symbolic_Form .sg-ty-copy p:last-of-type { font-size: 16px; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-details { padding: 0 20px 32px; }
	body.en__Symbolic_Form .sg-ty-details .transaction-details-toggle { min-width: 0; width: 100% !important; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-narrative { padding: 32px 20px; }
	body.en__Symbolic_Form .sg-ty-narrative h3 { font-size: 32px; }
	body.en__Symbolic_Form .sg-ty-narrative p { font-size: 18px; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-share { padding: 32px 20px; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-impact-heading { padding: 32px 20px 24px; }
	body.en__Symbolic_Form .sg-ty-impact-heading h2 { font-size: 32px; }
	body.en__Symbolic_Form .en__component--advrow.sg-ty-cards { flex-direction: column; gap: 40px; padding: 0 20px 32px; }
	body.en__Symbolic_Form .sg-ty-cards > .en__component--advcolumn { flex: 0 0 auto; width: 100%; }
}

/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM - MOTION                                       (DGD, 2026-10-08)
/*  Everything here is gated by body.sg-motion, which symbolic.js adds only on the live page, only when the donor has
/*  not asked for reduced motion, and only when no element on the page carries the class sg-no-motion (the kill switch:
/*  put that class on any row, or on one block, to turn all of this off). Without the class the page is simply static.
/*  Only opacity and transform are animated, so nothing shifts the layout.
/*-----------------------------------------------------------------------------------*/

@keyframes sg-rise      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sg-pop       { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes sg-bump      { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes sg-check-in  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes sg-badge     { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sg-slide-up  { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- 1. scroll reveals (classes are added by symbolic.js to blocks that start below the fold) ---------- */
/* hidden state first (instant, no transition, so adding the class never makes visible content fade OUT) ... */
body.sg-motion .sg-rv {
	opacity: 0;
	transform: translateY(16px);
}
/* ... then the reveal carries the transition */
body.sg-motion .sg-rv.sg-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease-out var(--sg-d, 0ms), transform 0.8s ease-out var(--sg-d, 0ms);
}
/* a gift card keeps its own border/shadow transition while it is revealing */
body.sg-motion .sg-card.sg-rv.sg-in {
	transition: opacity 0.8s ease-out var(--sg-d, 0ms), transform 0.8s ease-out var(--sg-d, 0ms), border-color 150ms, box-shadow 150ms;
}
@media print {
	body.sg-motion .sg-rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- 5. hero headline entrance (the photo does not move, so the first screen loads as it always did) ---------- */
/* desktop only: on a phone the headline sits under the photo and a fade-in there just looks late */
@media (min-width: 768px) {
	body.sg-motion .sg-row-hero h1 { animation: sg-rise 0.8s ease-out 0.2s both; }
}

/* ---------- 2. cart feedback ---------- */
body.sg-motion .sg-qty.sg-pop         { animation: sg-pop 0.22s ease-out; }
body.sg-motion .sg-total-box.sg-bump  { animation: sg-bump 0.3s ease-out; }
body.sg-motion .sg-card.is-selected .sg-marker { animation: sg-check-in 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
body.sg-motion .sg-sticky.is-visible  { animation: sg-slide-up 0.26s ease-out; }
@media (min-width: 768px) {
	/* on desktop the price is a round badge; on mobile it is a bar, which should not pulse */
	body.sg-motion .sg-card.is-selected .sg-badge { animation: sg-badge 0.45s ease-out; }
}

/* ---------- 3. hover and press (mouse and trackpad only). A product card only zooms its photo: the card itself stays still. ---------- */
@media (hover: hover) and (pointer: fine) {
	body.sg-motion .sg-media img { transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1); }
	body.sg-motion .sg-card:hover .sg-media img { transform: scale(1.04); }
}
body.sg-motion .sg-actions:not(.sg-actions--link) a,
body.sg-motion .sg-sticky-btn,
body.sg-motion .sg-btn { transition: transform 0.12s ease-out, background-color 150ms; }
body.sg-motion .sg-actions:not(.sg-actions--link) a:active,
body.sg-motion .sg-sticky-btn:active { transform: scale(0.98); }
body.sg-motion .sg-btn:active:not(:disabled) { transform: scale(0.92); }
/* the arrow on the text-link buttons nudges forward */
body.sg-motion .sg-actions--link a::after { transition: transform 0.2s ease-out; }
body.sg-motion .sg-actions--link a:hover::after { transform: translateX(4px) rotate(45deg); }

/*-----------------------------------------------------------------------------------*/
/*  SYMBOLIC GIVING FORM - PAGE BUILDER GUIDES     (DGD, 2026-10-05, rev 2026-10-06)
/*
/*  EDITOR ONLY. Every rule is under body#en__pagebuilder, so none of it can reach a served page.
/*  It also only switches on for a page that contains the symbolic form (:has(.en__Symbolic_Form)),
/*  so no other Rady form's builder view changes.
/*
/*  Same look as the Ochsner row guides: a full-width grey bar above each Advanced Row, thick dark left
/*  edge, small radius, solid red notices. The bar is IN the row's flow (a flex item that takes a whole
/*  line), not floated over it, so it can never sit on top of content and it grows with its text.
/*
/*  Each bar has a title and, for rows the symbolic page depends on, a second strip with the rule for
/*  that row: the custom classes it needs and what goes inside. The classes are set in the Page Builder
/*  (Advanced Row / column / block "Custom CSS Class"); the rich-text editor cannot change them, but a
/*  person can delete them by accident, which is why the strip names them.
/*
/*  The builder does not run this page's scripts, so the page looks unstyled in here on purpose: the
/*  guides annotate, they do not restyle.
/*-----------------------------------------------------------------------------------*/

/* ---------- editor-warning blocks (markup lives in the Copy Blocks; see build/en-blocks-rows/) ---------- */
.en-editor-warning { display: none; }

body#en__pagebuilder .en-editor-warning {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 2px solid #9D2020;
	border-left: 8px solid #9D2020;
	border-radius: 4px;
	background: #FFF5F5;
	color: #3F0F0F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	overflow-wrap: anywhere;
}
body#en__pagebuilder .en-editor-warning p {
	margin: 0 0 8px;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: left;
}
body#en__pagebuilder .en-editor-warning p:last-child { margin-bottom: 0; }
body#en__pagebuilder .en-editor-warning__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body#en__pagebuilder .en-editor-warning__meta {
	font-size: 12px;
	font-style: italic;
	color: #7A3B3B;
}

/* ---------- row guides ---------- */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow {
	flex-wrap: wrap;            /* lets the bar take the first line; the columns share the line below */
	align-content: flex-start;  /* rows with a fixed height (the hero) must not stretch the bar to fill it */
	margin-bottom: 34px;
	--sg-guide-title: "OTHER";
	--sg-guide-show-note: none;
	--sg-guide-radius: 3px;
}

/* strip 1: the title, the same bar the Ochsner builder shows */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow::before {
	content: "Advanced Row - " var(--sg-guide-title);
	order: -2;
	flex: 0 0 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 12px;
	background: #F2F3F5;
	border: 1px solid #C7CCD1;
	border-left: 8px solid #5A626B;
	border-radius: var(--sg-guide-radius);
	color: #3A424B;
	font: 700 12px/1.4 Arial, Helvetica, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* strip 2: the rule for the row (only on rows that have one), tucked directly under the title */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow::after {
	content: var(--sg-guide-note, "");
	display: var(--sg-guide-show-note);
	order: -1;
	flex: 0 0 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 8px 12px 9px;
	background: #FAFAFB;
	border: 1px solid #C7CCD1;
	border-top: 0;
	border-left: 8px solid #5A626B;
	border-radius: 0 0 3px 3px;
	color: #4A525B;
	font: 400 12px/1.5 Arial, Helvetica, sans-serif;
	letter-spacing: .01em;
	text-transform: none;
	overflow-wrap: anywhere;
	white-space: pre-line;      /* lets a note carry a second line (A in the content) */
}
/* what each row is, and the classes it needs */
body#en__pagebuilder .en__component--advrow.sg-row-topbar {
	--sg-guide-title: "TOP BAR";
	--sg-guide-note: "Row class: sg-row-topbar.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-header {
	--sg-guide-title: "HEADER";
	--sg-guide-note: "Row classes: custom-header sg-row-header.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.hero-banner {
	--sg-guide-title: "HERO";
	--sg-guide-note: "Row classes: hero-banner sg-row-hero.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.en__hidden {
	--sg-guide-title: "HERO IMAGE SOURCE (HIDDEN ON THE PAGE)";
	--sg-guide-note: "Row class: en__hidden. Column class: bannerImgSrc.\A Hero Banner Image should be 1920px by 480px.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
/* the global builder CSS gives .en__hidden display:inherit (block), so the guide strips would not take the full width
   or sit above the image; make this row a wrapping flex row like every other guided row */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow.en__hidden {
	display: flex !important;
}
body#en__pagebuilder .en__component--advrow.sg-row-callout {
	--sg-guide-title: "INTRO CALLOUT";
	--sg-guide-note: "Row class: sg-row-callout.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-gifts-heading {
	--sg-guide-title: "GIFT SECTION HEADING";
	--sg-guide-note: "Row class: sg-row-gifts-heading.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-gifts {
	--sg-guide-title: "PRODUCTS";
	--sg-guide-note: "Row class: sg-row-gifts. Optional row class: sg-desc-mobile.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-extra {
	--sg-guide-title: "ADDITIONAL GIFT";
	--sg-guide-note: "Row class: sg-row-extra.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-total-bar {
	--sg-guide-title: "TOTAL BAR";
	--sg-guide-note: "Row class: sg-row-total-bar. Column classes: sg-col-total, sg-col-monthly.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-sticky {
	--sg-guide-title: "MOBILE PINNED BUTTON";
	--sg-guide-note: "Row class: sg-row-sticky.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-settings {
	--sg-guide-title: "GIFT WORDING (OLD, HIDDEN)";
	--sg-guide-note: "Row class: sg-row-settings. Replaced by the three rows above; delete once they are built.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}

/* thank-you page rows */
/* (page-ty too: the row also carries en__Symbolic_Form, whose DONATION FORM guide would otherwise win) */
body#en__pagebuilder .en__component--advrow.page-ty.sg-ty-hero {
	--sg-guide-title: "THANK YOU HERO";
	--sg-guide-note: "Row classes: page-ty en__Symbolic_Form sg-ty-hero.\A Hero Banner Image should be 1920px by 465px.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-copy {
	--sg-guide-title: "THANK YOU MESSAGE";
	--sg-guide-note: "Row class: sg-ty-copy.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-details {
	--sg-guide-title: "TRANSACTION DETAILS";
	--sg-guide-note: "Row class: sg-ty-details.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-narrative {
	--sg-guide-title: "WHAT HAPPENS NEXT";
	--sg-guide-note: "Row class: sg-ty-narrative.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-share {
	--sg-guide-title: "SHARE";
	--sg-guide-note: "Row class: sg-ty-share.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-impact-heading {
	--sg-guide-title: "GREATER IMPACT HEADING";
	--sg-guide-note: "Row class: sg-ty-impact-heading.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-ty-cards {
	--sg-guide-title: "GREATER IMPACT CARDS (2 COLUMNS)";
	--sg-guide-note: "Row class: sg-ty-cards.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}

/* ---------- gift wording rows: drawn like the control they feed, so the builder reads like the page ----------
   Only the words are real. The $ field, the $0 and the checkbox are CSS pictures; the live page builds the real controls. */
body#en__pagebuilder .en__component--advrow:is(.sg-row-extra, .sg-row-total-bar, .sg-row-sticky) {
	--sg-m-gradient: var(--sg-gradient, linear-gradient(90deg, #0064A4 0%, #0094A8 100%));
	--sg-m-cond: var(--sg-cond, "Gotham Condensed", "Arial Narrow", sans-serif);
	--sg-m-sans: var(--sg-sans, "Gotham Book", Arial, sans-serif);
	--sg-m-teal: var(--sg-teal, #06808e);
}
body#en__pagebuilder .en__component--advrow:is(.sg-row-extra, .sg-row-total-bar, .sg-row-sticky) > .en__component--advcolumn {
	box-sizing: border-box;
	text-align: center;
}
/* in the mockups the real paragraphs/headings take the look of the page text; notices keep their own look */
body#en__pagebuilder :is(.sg-row-extra, .sg-row-total-bar, .sg-row-sticky) :is(h1, h2, h3, h4, h5, h6, p):not(.en-editor-warning *) {
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
}
/* Additional gift: blue strip, white label, an empty $ field under it */
body#en__pagebuilder .sg-row-extra > .en__component--advcolumn {
	flex: 1 1 100%;
	padding: 24px;
	background: var(--sg-m-gradient);
}
body#en__pagebuilder .sg-row-extra :is(h1, h2, h3, h4, h5, h6, p):not(.en-editor-warning *) {
	font: 500 22px/1.3 var(--sg-m-cond);
}
body#en__pagebuilder .sg-row-extra > .en__component--advcolumn::after {
	content: "$   0";
	display: block;
	box-sizing: border-box;
	width: 368px;
	max-width: 100%;
	margin: 16px auto 0;
	padding: 12px 16px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='20'%3E%3Ctext x='44' y='15' text-anchor='end' font-family='Arial' font-weight='700' font-size='13' fill='%23595959'%3EUSD%3C/text%3E%3C/svg%3E") right 16px center no-repeat;
	border: 1px solid #C7CCD1;
	color: #595959;
	font: 400 20px/1.3 var(--sg-m-sans);
	text-align: left;
	white-space: pre;
}
/* Total bar: blue total box beside the monthly checkbox and its help line */
body#en__pagebuilder .sg-row-total-bar { column-gap: 32px; }
body#en__pagebuilder .sg-row-total-bar > .sg-col-total,
body#en__pagebuilder .sg-row-total-bar > .en__component--advcolumn:first-of-type:not(.sg-col-monthly) {
	flex: 0 0 360px;
	max-width: 45%;
	padding: 24px;
	background: var(--sg-m-gradient);
}
body#en__pagebuilder .sg-row-total-bar .sg-col-total :is(h1, h2, h3, h4, h5, h6, p):not(.en-editor-warning *) {
	font: 400 18px/1.3 var(--sg-m-cond);
}
body#en__pagebuilder .sg-row-total-bar .sg-col-total::after {
	content: "$0";
	display: block;
	margin: 12px 0 0;
	color: #fff;
	font: 500 60px/1.1 var(--sg-m-cond);
	letter-spacing: -0.02em;
}
body#en__pagebuilder .sg-row-total-bar > .en__component--advcolumn:not(.sg-col-total):not(:first-of-type),
body#en__pagebuilder .sg-row-total-bar > .sg-col-monthly {
	flex: 1 1 0;
	align-self: center;
	text-align: left;
}
body#en__pagebuilder .sg-row-total-bar .sg-col-monthly p:not(.en-editor-warning *) {
	font: 400 16px/1.3 var(--sg-m-sans);
	letter-spacing: 0;
	text-transform: none;
	color: #000;
}
body#en__pagebuilder .sg-row-total-bar .sg-col-monthly p:first-of-type:not(.en-editor-warning *) {
	position: relative;
	min-height: 24px;
	padding-left: 36px;
}
body#en__pagebuilder .sg-row-total-bar .sg-col-monthly p:first-of-type:not(.en-editor-warning *)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	box-sizing: border-box;
	border: 1.5px solid #595959;
	background: #fff;
}
body#en__pagebuilder .sg-row-total-bar .sg-col-monthly p:nth-of-type(2):not(.en-editor-warning *) {
	margin-top: 4px;
	padding-left: 36px;
	color: #595959;
}
/* Mobile pinned button: the teal bar that sticks to the bottom of a phone screen */
body#en__pagebuilder .sg-row-sticky > .en__component--advcolumn {
	flex: 1 1 100%;
	padding: 17.5px 28px;
	background: var(--sg-m-gradient);
}
body#en__pagebuilder .sg-row-sticky :is(h1, h2, h3, h4, h5, h6, p):not(.en-editor-warning *) {
	font: 400 18px/1.3 var(--sg-btn-font, Arial, sans-serif);
}
body#en__pagebuilder .en__component--advrow.en__Symbolic_Form {
	--sg-guide-title: "DONATION FORM";
	--sg-guide-note: "Row classes: page-1 en__Donation en__Campaign_Form en__Symbolic_Form.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-story-band {
	--sg-guide-title: "STORY BAND";
	--sg-guide-note: "Row class: sg-row-story-band.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-feature {
	--sg-guide-title: "STORY FEATURE";
	--sg-guide-note: "Row class: sg-row-feature.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-impact-band {
	--sg-guide-title: "IMPACT BAND";
	--sg-guide-note: "Row class: sg-row-impact-band.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-stats {
	--sg-guide-title: "IMPACT STATS";
	--sg-guide-note: "Row class: sg-row-stats.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-impact-link {
	--sg-guide-title: "IMPACT LINK";
	--sg-guide-note: "Row class: sg-row-impact-link.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-cta {
	--sg-guide-title: "CALL TO ACTION";
	--sg-guide-note: "Row class: sg-row-cta.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}
body#en__pagebuilder .en__component--advrow.sg-row-fineprint {
	--sg-guide-title: "FINE PRINT";
	--sg-guide-note: "Row class: sg-row-fineprint.";
	--sg-guide-show-note: block;
	--sg-guide-radius: 3px 3px 0 0;
}

/* ---------- keep builder content inside its row ---------- */
/* min-width 1px, not 0: a column's size for the line-break decision is its flex-basis (0) clamped by min-width.
   At 0 a column would squeeze onto the same line as the 100%-wide note strip and be crushed to nothing;
   at 1px the strip plus the column exceed the row, so the columns start a fresh line below the bar. */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow > .en__component--advcolumn { min-width: 1px; }
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--copyblock,
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--imageblock { max-width: 100%; overflow-wrap: anywhere; }
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--copyblock img,
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--imageblock img { max-width: 100%; height: auto; }
/* the small icons are 170-190px files; the live page draws them at 40px, the builder (which does not run the page styles) would show them huge */
body#en__pagebuilder .en__component--advrow.sg-row-stats img { width: 64px; max-width: 64px; height: auto; }
/* the template gives header paragraphs line-height:0 (it is for the logo); without this the Donate link
   in the header's second column collapses to nothing and spills out of the row */
body#en__pagebuilder .en__component--advrow.sg-row-header .sg-actions p { line-height: 1.3; }

/* ---------- the thank-you rows are wrapping flex rows in the editor ----------
   The guide strips are flex items (full-width, ordered above the columns). These rows are plain blocks on the live
   page (the hero also has a fixed height), which would draw the strips as small inline chips. */
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow[class*="sg-ty-"]:not(.enOverlay *) {
	display: flex !important;
}
body#en__pagebuilder:has(.en__Symbolic_Form) .en__component--advrow.sg-ty-hero:not(.enOverlay *) {
	height: auto;
	overflow: visible;
}
body#en__pagebuilder:has(.en__Symbolic_Form) .sg-ty-hero img { height: auto !important; }

/* ---------- the two template overlays: shown in the editor so they can be found and edited ----------
   The processing overlay and the exit-intent popup are Copy Blocks whose content is display:none (and position:fixed)
   until the page opens them, so in the editor they collapse to nothing and cannot be clicked. Here they become
   ordinary labelled boxes. Editor only: the live page is untouched. */
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) :is(.rc-processing, .rc-exit-modal):not(.enOverlay *) {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	top: auto; right: auto; bottom: auto; left: auto;
	z-index: auto;
	margin: 24px 0;
	padding: 0;
}
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) .rc-processing:not(.enOverlay *) {
	--sg-ov-title: "PROCESSING OVERLAY (HIDDEN ON THE PAGE)";
	--sg-ov-note: "Copy Block, no class. Shown full-screen while a donation submits. Edit the words in Source view; keep the id, classes and data- attributes. Replace [PHONE NUMBER] in the slow-connection text.";
}
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) .rc-exit-modal:not(.enOverlay *) {
	--sg-ov-title: "EXIT-INTENT POPUP (HIDDEN ON THE PAGE)";
	--sg-ov-note: "Copy Block, no class. Shown on desktop when the mouse leaves the window, once per visit. Edit the words in Source view; keep the id, classes and data- attributes. Delete this block to turn the popup off.";
}
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) :is(.rc-processing, .rc-exit-modal):not(.enOverlay *)::before {
	content: var(--sg-ov-title);
	order: -2;
	box-sizing: border-box;
	padding: 10px 12px;
	background: #F2F3F5;
	border: 1px solid #C7CCD1;
	border-left: 8px solid #5A626B;
	border-radius: 3px 3px 0 0;
	color: #3A424B;
	font: 700 12px/1.4 Arial, Helvetica, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) :is(.rc-processing, .rc-exit-modal):not(.enOverlay *)::after {
	content: var(--sg-ov-note);
	order: -1;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 8px 12px 9px;
	background: #FAFAFB;
	border: 1px solid #C7CCD1;
	border-top: 0;
	border-left: 8px solid #5A626B;
	border-radius: 0 0 3px 3px;
	color: #4A525B;
	font: 400 12px/1.5 Arial, Helvetica, sans-serif;
	letter-spacing: .01em;
	text-transform: none;
}
/* the dimmed backdrop is not needed; the dialog becomes a plain bordered card */
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) :is(.rc-processing__backdrop, .rc-exit-modal__backdrop):not(.enOverlay *) {
	display: none !important;
}
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) :is(.rc-processing__dialog, .rc-exit-modal__dialog):not(.enOverlay *) {
	max-height: none;
	margin: 0 auto;
	border: 1px dashed #C7CCD1;
	box-shadow: none;
	animation: none;
}
/* the slow-connection text starts with the hidden attribute; show it so its copy can be edited */
body#en__pagebuilder:has(:is(.en__Symbolic_Form, .en__OneColumn_Form, .en__Campaign_Form)) .rc-processing__slow[hidden]:not(.enOverlay *) {
	display: block !important;
}

/* ---------- no guides or mockups inside EN's own popups ----------
   The Advanced Row / column / block editors show a live preview of the component with its classes. The guides and the
   wording-row pictures belong on the page canvas only; there they just add empty space around the preview. */
body#en__pagebuilder .enOverlay :is(.en__component--advrow, .en__component--advcolumn, .en__component--copyblock, .en__component--imageblock)::before,
body#en__pagebuilder .enOverlay :is(.en__component--advrow, .en__component--advcolumn, .en__component--copyblock, .en__component--imageblock)::after {
	content: none !important;
	display: none !important;
}
body#en__pagebuilder .enOverlay .en__component--advrow {
	display: flex !important;
	flex-wrap: nowrap !important;
	margin-bottom: 0 !important;
	column-gap: 0 !important;
}
body#en__pagebuilder .enOverlay .en__component--advcolumn {
	flex: 1 0 0 !important;
	max-width: none !important;
	padding: 0 !important;
	background: none !important;
}
/* ===== END SYMBOLIC GIVING FORM (CSS) ===== */

/* Footer social icons, one color (Asana 1219280214425215). Facebook and Twitter were inline SVGs with the
   glyph cut out of a white circle, so the footer background showed through the glyph (teal on the gradient)
   while Instagram, YouTube and LinkedIn were black. This fills the cutouts black. Once the markup uses
   Font Awesome <i> icons for all five (deploy-2026-10-09/footer-social-icons.html) this rule matches nothing
   and is harmless; it covers the gap if the CSS goes live before the markup. */
footer li.footer-social a svg {
    background: #000;
    border-radius: 50%;
}

/* Validator badges under the Donate button (Asana 1219280214425218).
   Markup: badges/validator-badges-block-with-editor-warning.html */
.dgd-validators{display:flex;justify-content:center;align-items:center;gap:24px;margin:24px 0 0;padding:0;flex-wrap:wrap}
.dgd-validators a{display:block;line-height:0}
.dgd-validators img{width:100px;height:100px;display:block}
.dgd-validators a:focus-visible{outline:3px solid #0064A4;outline-offset:4px}
@media (max-width:480px){.dgd-validators{gap:16px}.dgd-validators img{width:88px;height:88px}}

/* Tracking pixels (Trade Desk, etc.) are appended straight to <body> by GTM after a conversion. As inline images they
   open a line box under the footer (a ~17px white strip on the thank-you page). Take them out of the flow and park them
   at the top-left so the 1px image does not extend the page past the footer. */
body > img { position: absolute; top: 0; left: 0; }

/* Transaction Details in the page editor (Asana 1219280214425215 follow-up).
   The panel and the rows the thank-you JS hides carry .en__hidden: display:none live, and the editor rule near the top
   of this file shows them with display:inherit, which flattens the flex layout (and its 16px gaps). These put it back. */
#en__pagebuilder .transaction-details.en__hidden,
#en__pagebuilder .transaction-details .personal-gift.en__hidden,
#en__pagebuilder .transaction-details .company-gift.en__hidden {
    display: flex !important;
}

/*-----------------------------------------------------------------------------------*/
/*  CAMPAIGN FORM - AMOUNT, FREQUENCY AND PAYMENT TILES FIT THE ROW
/*  (DGD, 2026-10-26, form migration to the DGD template)
/*  The stock Campaign rule above gives each tile min-width: 315px. The amount and payment
/*  grids have 4 columns: 4 x 315px + 3 x 10px gaps = 1290px, wider than the form in
/*  windows from 1025px to about 1330px, so the page scrolled sideways (45px at 1280,
/*  300px at 1025). Here the tiles share the row instead. Unchanged: wider windows (tiles
/*  are over 315px there anyway), 1024px and below (the 2-column rule keeps
/*  min-width: auto !important), Main (One Column) forms and the Symbolic form.
/*-----------------------------------------------------------------------------------*/
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--donationAmt .en__field__element--radio > .en__field__item:not(.en__field__item--other),
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--recurrpay .en__field__element--radio > .en__field__item,
body.en__Donation.en__Campaign_Form .ProcessForm .en__field--paymenttype .en__field__element--radio > .en__field__item {
	min-width: 0;
}

/*-----------------------------------------------------------------------------------
/*  PAYMENT TILES - THREE OPTIONS FILL THE ROW
/*  (DGD, 2026-10-28, Paid Media forms 73706 and 87332 after the migration)
/*  The payment grid has 4 columns (2 at 1024px and below). The Paid Media forms keep
/*  their own three options (Credit Card, Bank (ACH), Digital Wallet), so on desktop the
/*  row ended in an empty column and at 1024px and below the third tile sat alone at half
/*  width. With exactly three options: three equal columns from 768px up; below that two
/*  columns with the third tile across the second row. Forms with four options are
/*  unchanged. Uses :has(); a browser without it keeps the old layout.
/*-----------------------------------------------------------------------------------*/
.ProcessForm .en__field--paymenttype .en__field__element--radio:has(> .en__field__item:nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
	.ProcessForm .en__field--paymenttype .en__field__element--radio:has(> .en__field__item:nth-child(3):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
	.ProcessForm .en__field--paymenttype .en__field__element--radio > .en__field__item:nth-child(3):last-child {
		grid-column: span 2;
	}
}