/* ===========================================================================
   Get Started + Consent — frontend styles
   =========================================================================== */

/* The hero breaks out to the full viewport width (100vw) so the image can
   bleed to the page edge. 100vw includes the scrollbar width, which can push a
   few px of horizontal scroll onto the page. Clip it at the root — scoped to
   pages that actually contain this module, and using `clip` (not `hidden`) so
   sticky headers keep working. */
html:has(.choice-gsc) { overflow-x: clip; }

/* Full-bleed break-out: span the full viewport width from inside a normal
   Beaver Builder row (BB constrains the row wrapper otherwise). */
.choice-gsc {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
}
.choice-gsc .gsc-hero {
    display: flex;
    flex-direction: row;
    min-height: var(--gsc-min-h, 560px);
}
.choice-gsc.gsc-img-right .gsc-hero {
    flex-direction: row-reverse;
}

.choice-gsc .gsc-panel {
    flex: 1 1 50%;
    min-width: 0;
}

/* Image panel */
.choice-gsc .gsc-image-panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #efeae6;
}

/* Content-only variant — no image panel; content spans full width */
.choice-gsc.gsc-noimage .gsc-image-panel { display: none; }
.choice-gsc.gsc-noimage .gsc-content-panel { flex: 1 1 100%; }
.choice-gsc.gsc-noimage .gsc-content-inner { max-width: var(--gsc-max-w, 1200px); width: 100%; }

/* Right-side list ON the image (photo is the panel background, pink overlay) */
.choice-gsc .gsc-image-panel--withlist {
    display: flex;
    align-items: center;
    background-color: #e7a3b4;
}
.choice-gsc .gsc-right-list {
    width: 100%;
    padding: 40px 44px;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.choice-gsc .gsc-right-list-head {
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 16px;
    color: inherit;
}
/* Image on the left — the list hugs the right edge of the photo (the side the
   overlay is anchored to, and the side nearest the content panel). */
.choice-gsc.gsc-img-left .gsc-image-panel--withlist { justify-content: flex-end; }
.choice-gsc.gsc-img-left .gsc-right-list {
    width: auto;
    max-width: 460px;
    padding-left: 24px;
}
/* Image on the right — mirror of img-left: the list hugs the left edge of the
   photo (the side nearest the content panel). Without this, .gsc-right-list
   fell back to the base rule's width:100%, so long bullets/copy spanned the
   full photo and ran across the woman instead of staying in a readable
   column. */
.choice-gsc.gsc-img-right .gsc-image-panel--withlist { justify-content: flex-start; }
.choice-gsc.gsc-img-right .gsc-right-list {
    width: auto;
    max-width: 460px;
    padding-right: 24px;
}
/* Explicit override, from the JSON key "right_list_side": which edge of the photo
   the list and its tint hug. The opposite end of the photo is what stays uncovered.
   Listed after the rule above so it wins for the same specificity. */
.choice-gsc.gsc-list-right .gsc-image-panel--withlist { justify-content: flex-end; }
.choice-gsc.gsc-list-right .gsc-right-list {
    width: auto;
    max-width: 460px;
    padding-left: 24px;
    padding-right: 44px;
}
.choice-gsc.gsc-list-left .gsc-image-panel--withlist { justify-content: flex-start; }
.choice-gsc.gsc-list-left .gsc-right-list {
    width: auto;
    max-width: 460px;
    padding-left: 44px;
    padding-right: 24px;
}

.choice-gsc .gsc-right-list-intro {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}
.choice-gsc .gsc-right-list-ul { list-style: none; margin: 0; padding: 0; }
.choice-gsc .gsc-right-list-ul li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.choice-gsc .gsc-rl-icon { flex: 0 0 auto; width: 23px; height: 23px; margin-top: 1px; line-height: 0; }
.choice-gsc .gsc-rl-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Expandable list rows — same interaction as the consent rows in the popup. */
.choice-gsc .gsc-right-list-ul li.gsc-rl-item--open { display: block; margin-bottom: 6px; }
.choice-gsc .gsc-rl-toggle {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.choice-gsc .gsc-rl-toggle:hover .gsc-rl-text { text-decoration: underline; }
.choice-gsc .gsc-rl-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.choice-gsc .gsc-rl-toggle .gsc-rl-text { flex: 1 1 auto; }
.choice-gsc .gsc-rl-chevron {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 4px;
    opacity: .85;
    transition: transform .18s ease;
}
.choice-gsc .gsc-rl-toggle[aria-expanded="true"] .gsc-rl-chevron { transform: rotate(180deg); }
.choice-gsc .gsc-rl-body {
    margin: 0 0 10px;
    padding: 0 17px 0 34px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}
.choice-gsc .gsc-rl-body p { margin: 0 0 9px; }
.choice-gsc .gsc-rl-body p:last-child { margin-bottom: 0; }
.choice-gsc .gsc-rl-body a { color: inherit; text-decoration: underline; }
.choice-gsc .gsc-right-cta {
    display: inline-block;
    margin: 16px 0 0;
    padding: 14px 26px;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.choice-gsc .gsc-right-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); opacity: .96; }
.choice-gsc .gsc-right-desc {
    margin: 16px 0 0;
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
}
.choice-gsc .gsc-right-image {
    flex: 1 1 auto;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #efeae6;
}

/* Content panel */
.choice-gsc .gsc-content-panel {
    background: var(--gsc-content-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 6%;
    box-sizing: border-box;
}
.choice-gsc .gsc-content-inner {
    width: 100%;
    max-width: calc(var(--gsc-max-w, 1200px) / 2);
}

.choice-gsc .gsc-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gsc-primary, #913f90);
    margin-bottom: 12px;
}
.choice-gsc .gsc-heading {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    color: #1f2937;
}
.choice-gsc .gsc-intro {
    color: #4b5563;
    font-size: 16.5px;
    line-height: 1.65;
}
.choice-gsc .gsc-intro p { margin: 0 0 12px; }

.choice-gsc .gsc-consent {
    margin: 22px 0 8px;
    padding: 14px 16px;
    border-left: 3px solid var(--gsc-accent, #37aec9);
    background: rgba(55, 174, 201, .07);
    border-radius: 6px;
}
.choice-gsc .gsc-consent-head {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 13.5px;
    color: #1f2937;
}
.choice-gsc .gsc-consent-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5b6470;
}

/* Buttons */
.choice-gsc .gsc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.gsc-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 15px 28px;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Two-line button face — same type scale as the popup submit button. */
.gsc-btn--stacked {
    flex-direction: column;
    line-height: 1.25;
    padding-top: 12px;
    padding-bottom: 12px;
    text-transform: none;
}
.gsc-btn-label { display: block; font-size: 16px; font-weight: 700; }
.gsc-btn-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    opacity: .88;
}
.gsc-btn:hover { transform: translateY(-1px); }
.gsc-btn:active { transform: translateY(0); }
.gsc-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* Primary button — style variants */
.gsc-btn--primary { color: #fff; }
.gsc-btn-gradient .gsc-btn--primary {
    background: linear-gradient(135deg, var(--gsc-primary, #913f90), var(--gsc-accent, #37aec9));
    box-shadow: 0 6px 18px rgba(145, 63, 144, .28);
}
.gsc-btn-filled .gsc-btn--primary {
    background: var(--gsc-primary, #913f90);
}
.gsc-btn-outline .gsc-btn--primary {
    background: transparent;
    color: var(--gsc-primary, #913f90);
    box-shadow: inset 0 0 0 2px var(--gsc-primary, #913f90);
}

/* Secondary button (Chat with Hope) */
.gsc-btn--secondary {
    background: #fff;
    color: var(--gsc-primary, #913f90);
    box-shadow: inset 0 0 0 2px var(--gsc-primary, #913f90);
}
.gsc-btn--secondary:hover {
    background: var(--gsc-primary, #913f90);
    color: #fff;
}

/* ---- Mobile: stack, image on top at configured height ---- */
@media (max-width: 768px) {
    .choice-gsc .gsc-hero,
    .choice-gsc.gsc-img-right .gsc-hero {
        flex-direction: column;
        min-height: 0;
    }
    /* Column layout just follows DOM order, so whichever panel a given page's
       markup happens to put first is what shows first — desktop's row/
       row-reverse doesn't carry over. Requested order on a phone (2026-09):
       the qualifications list first ("Do you qualify…" on the pink panel),
       then the text + CTA, then the option rows, then the ambassador band.
       A plain photo panel (no list) is decoration and still goes after the
       text. */
    .choice-gsc .gsc-content-panel { order: -1; }
    .choice-gsc .gsc-image-panel { order: 1; }
    .choice-gsc .gsc-image-panel--withlist { order: -2; }
    .choice-gsc .gsc-image-panel {
        flex: 0 0 auto;
        height: var(--gsc-mobile-img, 30vh);
        width: 100%;
    }
    /* A panel carrying the list is sized by its copy, not the decorative height —
       otherwise the bullets (and any expanded rows) are clipped. */
    .choice-gsc .gsc-image-panel--withlist { height: auto; position: relative; }
    /* The inline overlay fades out across the panel, which only works while the
       list occupies one side of it. Full width, it needs an even tint instead —
       so the panel drops back to the bare photo here and the tint below is the
       only veil over it. !important because the gradient is set inline. */
    .choice-gsc .gsc-image-panel--withlist {
        background-image: var(--gsc-rl-photo, none) !important;
    }
    .choice-gsc .gsc-image-panel--withlist::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gsc-rl-tint, rgba(231,163,180,0.9));
    }
    .choice-gsc .gsc-right-list {
        position: relative;
        z-index: 1;
    }
    .choice-gsc.gsc-img-left .gsc-right-list,
    .choice-gsc.gsc-list-left .gsc-right-list,
    .choice-gsc.gsc-list-right .gsc-right-list {
        width: 100%;
        max-width: none;
        padding: 32px 22px;
    }
    .choice-gsc .gsc-content-panel {
        flex: 1 1 auto;
        padding: 36px 22px 44px;
    }
    .choice-gsc .gsc-content-inner { max-width: none; }
    .choice-gsc .gsc-buttons .gsc-btn { flex: 1 1 auto; }
    .gsc-layout-application .gsc-btn--primary { max-width: none; width: 100%; }
    .choice-gsc .gsc-band { padding: 30px 22px; }
    .choice-gsc .gsc-band-person { flex-direction: column; text-align: center; gap: 14px; }
    .choice-gsc .gsc-option { flex-wrap: wrap; }
    .choice-gsc .gsc-opt-btn { width: 100%; }
}

/* ===========================================================================
   Popup modal
   =========================================================================== */
.gsc-modal[hidden] { display: none; }
.gsc-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.gsc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(2px);
    animation: gsc-fade .2s ease both;
}
/* The card is capped to the viewport (and never absurdly tall on big screens).
   Header and CTA are pinned; only .gsc-form-body scrolls. */
.gsc-modal-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 40px);
    max-height: min(calc(100dvh - 40px), 760px);
    overflow: hidden;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .32);
    padding: 0;
    box-sizing: border-box;
    animation: gsc-pop .26s cubic-bezier(.16, 1, .3, 1) both;
}
.gsc-modal-head {
    flex: 0 0 auto;
    padding: 32px 36px 0;
}
.gsc-modal .gsc-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.gsc-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 36px;
    -webkit-overflow-scrolling: touch;
}
.gsc-modal-head + .gsc-form .gsc-form-body { padding-top: 4px; }
.gsc-form-foot {
    flex: 0 0 auto;
    padding: 16px 36px 24px;
    border-top: 1px solid #f0eef4;
    background: #fff;
}
/* No intro line means no divider above the fields — add breathing room instead. */
.gsc-modal-head:not(:has(.gsc-modal-intro)) { padding-bottom: 18px; }

@media (max-width: 560px) {
    .gsc-modal-head { padding: 26px 20px 0; }
    .gsc-form-body { padding: 0 20px; }
    .gsc-form-foot { padding: 14px 20px 20px; }
}
@keyframes gsc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsc-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Hardened against themes that style every <button> with a brand color:
   force a single, subtle × at the top-right that no theme button rule can hijack. */
.gsc-modal .gsc-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    left: auto !important;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #9ca3af !important;
    text-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
    transition: color .15s ease, transform .15s ease;
}
.gsc-modal .gsc-modal-close:hover {
    color: #4b5563 !important;
    background: none !important;
    background-color: transparent !important;
    transform: scale(1.1);
}

.gsc-modal-head[hidden],
.gsc-modal .gsc-form[hidden] { display: none !important; }

.gsc-modal-title {
    margin: 0 0 6px;
    padding-right: 30px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}
.gsc-modal-intro {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0eef4;
    font-size: 14.5px;
    color: #6b7280;
    line-height: 1.55;
}

.gsc-form .gsc-field { margin-bottom: 16px; }
.gsc-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #374151;
    margin-bottom: 7px;
}
.gsc-form .gsc-req { color: #dc2626; margin-left: 2px; }
.gsc-form input[type="text"],
.gsc-form input[type="email"],
.gsc-form input[type="tel"],
.gsc-form input[type="date"],
.gsc-form select,
.gsc-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    /* 16px is a hard floor: iOS Safari zooms the viewport on focus below it,
       and does not zoom back out. */
    font-size: 16px;
    color: #1f2937;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
    background: #fff;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gsc-form input::placeholder,
.gsc-form textarea::placeholder { color: #b6bcc6; }
.gsc-form input:focus,
.gsc-form select:focus,
.gsc-form textarea:focus {
    border-color: var(--gsc-primary, #913f90);
    box-shadow: 0 0 0 3px rgba(145, 63, 144, .12);
}
.gsc-form input.gsc-invalid,
.gsc-form select.gsc-invalid,
.gsc-form textarea.gsc-invalid,
.gsc-form .gsc-field.gsc-invalid .gsc-radio-group {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
    border-radius: 8px;
}

/* radio group (e.g. U.S. citizen Yes/No) */
.gsc-form .gsc-radio-group { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 0; }
.gsc-form .gsc-radio { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: #374151; cursor: pointer; margin: 0; }
/* The label is the tap target, so it carries the 24px minimum (WCAG 2.5.8).
   The control itself was 13px — below the minimum even with the label around it. */
.gsc-form .gsc-radio { min-height: 24px; padding: 2px 0; }
.gsc-form .gsc-radio input { accent-color: var(--gsc-primary, #913f90); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Qualifying questions (minimum-qualification screener)
   --------------------------------------------------------------------------- */
/* One question per row — the question on the left, Yes/No on the right. */
.gsc-quals {
    margin: 0 0 20px;
    padding: 4px 16px;
    border: 1px solid #ece9f1;
    border-radius: 14px;
    background: #faf8fc;
}
.gsc-form .gsc-quals .gsc-qual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
    padding: 12px 0;
}
.gsc-form .gsc-quals .gsc-qual + .gsc-qual { border-top: 1px solid #ece9f1; }
.gsc-qual-copy { min-width: 0; }
.gsc-form .gsc-qual .gsc-qual-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #374151;
}
.gsc-form .gsc-qual .gsc-qual-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4;
    color: #8b8f98;
}
.gsc-form .gsc-qual .gsc-radio-group {
    flex: 0 0 auto;
    gap: 16px;
    padding: 0;
}
.gsc-form .gsc-qual .gsc-radio { font-size: 13.5px; }
.gsc-form .gsc-qual.gsc-invalid {
    outline: 2px solid rgba(220, 38, 38, .45);
    outline-offset: 2px;
    border-radius: 8px;
}
.gsc-form .gsc-qual.gsc-invalid .gsc-radio-group { border: none; box-shadow: none; }

/* First and last name side by side, stacking on narrow screens. A flex row,
   so the two share the width exactly and the inputs match the full-width ones
   above and below them rather than being sized by a calc() guess. */
.gsc-form .gsc-field-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.gsc-form .gsc-field-row > .gsc-field {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 480px) {
    .gsc-form .gsc-field-row { display: block; }
}

/* A dropdown qualifier stacks instead of sitting inline: a Yes/No pair fits
   beside its question, a 51-state list does not. */
.gsc-form .gsc-quals .gsc-qual--select {
    display: block;
}
.gsc-form .gsc-qual--select .gsc-qual-copy { margin-bottom: 8px; }
.gsc-form .gsc-qual--select select { margin: 0; }

@media (max-width: 480px) {
    .gsc-form .gsc-quals .gsc-qual { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   Consents — each row collapses to a short title, expands to the full wording
   --------------------------------------------------------------------------- */
.gsc-consents {
    margin: 6px 0 18px;
    border: 1px solid #ece9f1;
    border-radius: 12px;
    background: #faf8fc;
    overflow: hidden;
}
.gsc-consent-item + .gsc-consent-item { border-top: 1px solid #ece9f1; }
.gsc-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px 11px 14px;
}
.gsc-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #5b6470;
    margin: 0;
    cursor: pointer;
}
.gsc-consent-check input {
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--gsc-primary, #913f90);
    /* Was 13px — under the 24px WCAG 2.5.8 minimum. */
    width: 18px;
    height: 18px;
}
.gsc-consent-check { min-height: 24px; }
.gsc-consent-title {
    font-weight: 600;
    color: #3f4652;
    overflow-wrap: anywhere;
}
.gsc-consent-check.gsc-invalid { color: #b91c1c; }
.gsc-consent-check.gsc-invalid .gsc-consent-title { color: #b91c1c; }
.gsc-consent-check.gsc-invalid input { outline: 2px solid #dc2626; outline-offset: 2px; }
.gsc-consent-check a { color: var(--gsc-primary, #913f90); text-decoration: underline; }

.gsc-modal .gsc-consent-toggle {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 2px 6px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    font-family: inherit;
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2 !important;
    color: var(--gsc-primary, #913f90) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity .15s ease;
}
.gsc-modal .gsc-consent-toggle:hover { opacity: .7; background: none !important; }
.gsc-consent-chevron { width: 13px; height: 13px; transition: transform .18s ease; }
.gsc-consent-toggle[aria-expanded="true"] .gsc-consent-chevron { transform: rotate(180deg); }
.gsc-consent-toggle .gsc-consent-toggle-shut,
.gsc-consent-toggle[aria-expanded="true"] .gsc-consent-toggle-open { display: none; }
.gsc-consent-toggle[aria-expanded="true"] .gsc-consent-toggle-shut { display: inline; }

.gsc-consent-body[hidden] { display: none; }
.gsc-consent-body {
    padding: 0 14px 13px 39px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6b7280;
}
.gsc-consent-body p { margin: 0 0 8px; }
.gsc-consent-body p:last-child { margin-bottom: 0; }
.gsc-consent-body a { color: var(--gsc-primary, #913f90); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   "Joy is calling you" — shown only when the CRM confirms a queued call
   --------------------------------------------------------------------------- */
.gsc-calling[hidden] { display: none; }
.gsc-calling {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    text-align: center;
    padding: 38px 36px 32px;
}
.gsc-calling-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--gsc-primary, #913f90);
    color: #fff;
}
.gsc-calling-icon svg { width: 32px; height: 32px; position: relative; z-index: 1; }
/* Ring pulsing outwards — the call is happening now. */
.gsc-calling-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gsc-primary, #913f90);
    opacity: .35;
    animation: gsc-ring 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes gsc-ring {
    0%   { transform: scale(1);   opacity: .35; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gsc-calling-pulse { animation: none; opacity: .2; }
}
.gsc-calling-title {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
}
.gsc-calling-text {
    margin: 0 auto 16px;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}
.gsc-calling-number {
    margin: 0 auto 14px;
    padding: 9px 16px;
    display: inline-block;
    border-radius: 999px;
    background: #f6eef6;
    font-size: 13.5px;
    color: #6b7280;
}
.gsc-calling-number[hidden] { display: none; }
.gsc-calling-number strong { color: var(--gsc-primary, #913f90); font-weight: 700; letter-spacing: .01em; }
.gsc-calling-note {
    margin: 0 auto 24px;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.55;
    color: #8b8f98;
}
.gsc-calling-note[hidden] { display: none; }
.gsc-modal .gsc-calling .gsc-calling-close.gsc-btn--primary {
    width: 100%;
    padding: 15px 28px;
    border: none !important;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    background: var(--gsc-primary, #913f90) !important;
    box-shadow: 0 8px 20px rgba(145, 63, 144, .26) !important;
}

/* ---------------------------------------------------------------------------
   Disqualified panel — replaces the form when the screener rules them out
   --------------------------------------------------------------------------- */
.gsc-disq[hidden] { display: none; }
.gsc-disq {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    text-align: center;
    padding: 34px 36px 30px;
}
.gsc-disq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #f6eef6;
    color: var(--gsc-primary, #913f90);
}
.gsc-disq-icon svg { width: 30px; height: 30px; }
.gsc-disq-title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
}
.gsc-disq-text {
    margin: 0 auto 24px;
    max-width: 380px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6b7280;
}
.gsc-disq-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gsc-modal .gsc-disq .gsc-disq-close.gsc-btn--primary {
    width: 100%;
    padding: 15px 28px;
    border: none !important;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    background: var(--gsc-primary, #913f90) !important;
    box-shadow: 0 8px 20px rgba(145, 63, 144, .26) !important;
}
.gsc-modal .gsc-disq .gsc-disq-back {
    margin: 0 !important;
    padding: 4px 6px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600;
    color: #8b8f98 !important;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gsc-modal .gsc-disq .gsc-disq-back:hover { color: #4b5563 !important; background: none !important; }

/* "Apply on my own" secondary path button */
.gsc-btn--apply {
    background: #fff;
    color: var(--gsc-primary, #913f90);
    box-shadow: inset 0 0 0 2px var(--gsc-primary, #913f90);
}
.gsc-btn--apply:hover { background: var(--gsc-primary, #913f90); color: #fff; }

/* Popup submit — explicit brand styling (the modal lives outside the
   .choice-gsc wrapper, so the .gsc-btn-* variants don't reach it). */
.gsc-modal .gsc-form .gsc-submit.gsc-btn--primary {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 15px 24px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    border: none !important;
    border-radius: 10px;
    color: #fff !important;
    background: var(--gsc-primary, #913f90) !important;
    box-shadow: 0 8px 20px rgba(145, 63, 144, .26) !important;
    transition: opacity .15s ease;
}
.gsc-modal .gsc-form .gsc-submit.gsc-btn--primary:hover {
    opacity: .93;
    color: #fff !important;
}
.gsc-modal .gsc-form .gsc-submit[disabled] { opacity: .6; cursor: default; }

/* The CTA is the one thing that changes per path (Joy vs. online application) */
.gsc-submit-label { display: block; font-size: 16px; font-weight: 700; }
.gsc-submit-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    opacity: .88;
}
.gsc-submit-sub[hidden] { display: none; }

.gsc-status {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    min-height: 1px;
}
.gsc-status.gsc-status--error { color: #b91c1c; }
.gsc-status.gsc-status--success { color: #15803d; font-weight: 600; }

/* honeypot — visually hidden but present in DOM */
.gsc-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===========================================================================
   Application layout — subheading, bullets, tagline, big CTA, option rows
   =========================================================================== */
.gsc-layout-application .gsc-content-panel { align-items: center; }

.choice-gsc .gsc-subheading {
    margin: 0 0 12px;
    color: var(--gsc-primary, #913f90);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.choice-gsc .gsc-bullets {
    margin: 14px 0;
    padding-left: 20px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
}
.choice-gsc .gsc-bullets li { margin: 4px 0; }
.choice-gsc .gsc-bullets li::marker { color: var(--gsc-primary, #913f90); }
/* Emphasis inside a bullet — picks up the module's brand colour rather than
   hardcoding it, so it follows the Primary Color setting. */
.choice-gsc .gsc-hl {
    color: var(--gsc-primary, #913f90);
    font-weight: 700;
}
.choice-gsc .gsc-tagline {
    margin: 0 0 4px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}

/* Big primary CTA in application layout */
.gsc-layout-application .gsc-buttons { margin-top: 22px; }
.gsc-layout-application .gsc-btn--primary {
    width: 100%;
    max-width: 460px;
    padding: 18px 40px;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* A two-line face reads as a sentence, not a shouted label — drop the caps and
   wide tracking the single-line application button uses. */
.gsc-layout-application .gsc-btn--primary.gsc-btn--stacked {
    padding: 14px 32px;
    letter-spacing: normal;
    text-transform: none;
}

/* Secondary option rows */
.choice-gsc .gsc-options {
    margin-top: 20px;
    max-width: 480px;
}
.choice-gsc .gsc-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid #ececf1;
}
.choice-gsc .gsc-option-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--gsc-primary, #913f90);
    color: var(--gsc-primary, #913f90);
}
.choice-gsc .gsc-option-icon svg { width: 18px; height: 18px; }
/* Image icons (e.g. the Joy bot logo) fill the circle instead of sitting inside it. */
.choice-gsc .gsc-option-icon--img {
    border: none;
    background: transparent;
    width: 42px;
    height: 42px;
    overflow: hidden;
}
.choice-gsc .gsc-option-icon--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.choice-gsc .gsc-option-body { flex: 1 1 auto; min-width: 0; }
.choice-gsc .gsc-option-head { margin: 0 0 3px; font-weight: 700; font-size: 15px; color: #1f2937; }
.choice-gsc .gsc-option-text { margin: 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.choice-gsc .gsc-option-text p { margin: 0 0 7px; }
.choice-gsc .gsc-option-text p:last-child { margin-bottom: 0; }
.choice-gsc .gsc-option-text ul { margin: 0 0 7px; padding-left: 17px; }
.choice-gsc .gsc-option-text ul:last-child { margin-bottom: 0; }
.choice-gsc .gsc-option-text li { margin: 0 0 3px; }
.choice-gsc .gsc-opt-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    color: var(--gsc-primary, #913f90);
    border: 2px solid var(--gsc-primary, #913f90);
    transition: background .2s ease, color .2s ease;
}
.choice-gsc .gsc-opt-btn:hover { background: var(--gsc-primary, #913f90); color: #fff; }

/* ===========================================================================
   Experienced-surrogate band (separate opt-in / consent area)
   =========================================================================== */
.choice-gsc .gsc-band {
    background: #f4eef4;
    padding: 44px 6%;
}
.choice-gsc .gsc-band-inner {
    max-width: var(--gsc-max-w, 1200px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
}
.choice-gsc .gsc-band-person {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 420px;
    min-width: 0;
}
.choice-gsc .gsc-band-photo {
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e3d6e3;
}
.choice-gsc .gsc-band-copy { min-width: 0; }
.choice-gsc .gsc-band-head { margin: 0 0 8px; font-size: 24px; line-height: 1.2; color: #1f2937; }
.choice-gsc .gsc-band-text { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #5b6470; }
.choice-gsc .gsc-band-text p { margin: 0 0 10px; }
.choice-gsc .gsc-band-text p:last-child { margin-bottom: 0; }
.choice-gsc .gsc-band-disclaimer { margin: 0; font-style: italic; font-size: 13.5px; color: #6b7280; }
/* Solo band (no consent box beside it) — center the surrogate block. */
.gsc-band--solo .gsc-band-inner { justify-content: center; }
.gsc-band--solo .gsc-band-person {
    flex: 0 1 760px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.gsc-band--solo .gsc-band-copy { max-width: 640px; }

.choice-gsc .gsc-band-consent { flex: 1 1 360px; }
.choice-gsc .gsc-band-consent-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e5e0e8;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #5b6470;
    cursor: pointer;
}
.choice-gsc .gsc-band-consent-check {
    margin-top: 1px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--gsc-primary, #913f90);
}
.choice-gsc .gsc-band-consent-box a { color: var(--gsc-primary, #913f90); text-decoration: underline; }