/* Enrollment Form - Polished Design */
/* Color and type tokens live in brand-tokens.css, enqueued as a dependency. */

/* Reset and Base */

/*
 * The form is an embed, not a page.
 *
 * It was originally styled as a standalone document — full viewport height, its
 * own sticky header, a grey page background. Dropped into a themed WordPress
 * page it inherits whatever width and alignment the theme's content column
 * happens to give it, which on a theme whose content area is not centred left
 * the whole form hugging the left edge with dead space beside it, under a tall
 * grey band and a second copy of the site logo.
 *
 * Centring here rather than relying on the theme means the form lands the same
 * way on any theme, including one that changes tomorrow.
 */
.evergreen-enrollment-wrapper {
    font-family: var(--eg-font-body);
    line-height: 1.5;
    color: var(--eg-text-body);
    -webkit-font-smoothing: antialiased;

    max-width: 720px;
    margin-inline: auto;
    /* Full-bleed themes give the shortcode no gutter of its own. */
    padding-inline: 20px;
}

.evergreen-enrollment-wrapper * {
    box-sizing: border-box;
}

/* Visually hidden but still announced. */
.evergreen-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Page Layout */
.evergreen-page {
    /*
     * No min-height and no background: the theme owns the page ground. A 100vh
     * grey panel inside a themed page is a band, not a background.
     */
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* Header — opt-in only, see EVERGREEN_SHOW_FORM_HEADER in the template. */
.evergreen-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 0;
    /*
     * Deliberately not sticky. As an embed it would pin itself over the theme's
     * own header while the page scrolls, which is worse than not sticking.
     */
    position: static;
}

.evergreen-header-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.evergreen-logo {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--evergreen-500), var(--evergreen-600));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.evergreen-logo svg {
    width: 26px;
    height: 26px;
    color: white;
}

/* Brand wordmark, used when a logo image is configured instead of the
   inline mark. Height-capped so a wide wordmark sits on the header line. */
.evergreen-logo-img {
    max-height: 44px;
    max-width: 260px;
    width: auto;
    height: auto;
    display: block;
}

.evergreen-brand h1 {
    font-family: var(--eg-font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--evergreen-700);
    margin: 0;
    line-height: 1.2;
}

.evergreen-brand p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Main Content */
.evergreen-main {
    flex: 1;
    /* The wrapper owns the horizontal gutter now; doubling it narrowed the form. */
    padding: 8px 0 40px;
}

.evergreen-container {
    width: 100%;
}

/* Progress Indicator */
.evergreen-progress {
    margin-bottom: 32px;
}

.evergreen-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.evergreen-step-item {
    display: flex;
    align-items: center;
}

.evergreen-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.evergreen-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #e5e7eb;
    /* 4.91:1 on the grey fill. Was #9ca3af at 2.05:1 — the numbers for the
       steps ahead of you were effectively unreadable. */
    color: #5b636e;
}

.evergreen-step.active .evergreen-step-number {
    background: var(--evergreen-600);
    color: white;
    box-shadow: 0 0 0 4px var(--evergreen-100);
}

.evergreen-step.completed .evergreen-step-number {
    background: var(--evergreen-600);
    color: white;
}

.evergreen-step-label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    /* 4.83:1 on white. Was #9ca3af at 2.54:1. */
    color: #6b7280;
    text-align: center;
}

.evergreen-step.active .evergreen-step-label,
.evergreen-step.completed .evergreen-step-label {
    color: var(--evergreen-700);
}

.evergreen-step-connector {
    width: 60px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 12px;
    margin-bottom: 28px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.evergreen-step-connector.completed {
    background: var(--evergreen-600);
}

.evergreen-progress-text {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    margin-top: 16px;
}

/* Step Header */
.evergreen-step-header {
    text-align: center;
    margin-bottom: 28px;
}

.evergreen-step-header h2 {
    font-family: var(--eg-font-heading);
    /* Stepped down from 26px: the program title above is the page's heading,
       and at near-identical sizes the two read as siblings rather than as a
       title and the name of the current step. */
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #111827;
    margin: 0 0 8px;
}

.evergreen-step-header p {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.evergreen-step-header .highlight {
    color: var(--eg-warning);
    font-weight: 500;
}

/* Form Card */
.evergreen-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.evergreen-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.evergreen-card-badge {
    width: 28px;
    height: 28px;
    background: var(--evergreen-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.evergreen-card-title {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Form Elements */
.evergreen-form-step {
    display: none;
}

.evergreen-form-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.evergreen-form-grid {
    display: grid;
    gap: 18px;
}

.evergreen-form-row {
    display: grid;
    gap: 16px;
}

.evergreen-form-row.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.evergreen-form-row.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.evergreen-field {
    display: flex;
    flex-direction: column;
}

.evergreen-field label {
    font-size: 14px;
    font-weight: 500;
    /* Foundation sets `label { line-height: 1.8 }`, which is loose for a field
     * label and added roughly 4px to every field in the form. */
    line-height: 1.4;
    color: #374151;
    margin-bottom: 6px;
}

.evergreen-field label .required {
    color: var(--eg-danger);
    margin-left: 2px;
}

/*
 * Host-theme armour. 720creditscore.com loads Foundation 6.4.1 site-wide, and
 * WordPress prints plugin stylesheets *before* theme stylesheets — so
 * Foundation's form reset both ties with this file on specificity and wins the
 * tie on source order. Its rule is
 *
 *     [type=color],[type=date],…,[type=text],textarea   → (0,1,0)
 *
 * exactly matching a bare `.evergreen-input`. Two different problems follow:
 *
 *   - properties declared here (padding, border, border-radius) lose the tie,
 *     so the selector is doubled to (0,2,0) — the same idiom the buttons below
 *     already use
 *   - properties *not* declared here (height, margin, inset box-shadow) have no
 *     tie to lose, so Foundation applies unopposed and they have to be zeroed
 *     explicitly. Height is the damaging one: Foundation forces 2.4375rem,
 *     which is shorter than this padding produces, so text clips.
 *
 * `select` gets the same treatment via the same class; Foundation styles it
 * separately at (0,0,1) but with the identical height and margin.
 */
.evergreen-enrollment-wrapper .evergreen-input,
.evergreen-input.evergreen-input {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    /*
     * 3.32:1 against the white field, which is what WCAG 1.4.11 asks of a
     * control boundary. Was #d1d5db at 1.47:1 — on a payment form the border is
     * the only thing marking where a field begins, and at that contrast a
     * low-vision member is hunting for the box rather than filling it in. The
     * discount and secondary buttons take the same value for the same reason.
     */
    border: 1px solid #858e99;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: #111827;
    background-color: white;
    box-shadow: none;
    transition: all 0.2s ease;
    outline: none;
}

/*
 * Foundation's [type=text]:focus is (0,2,0) and would otherwise replace the
 * brand focus ring with its own grey glow, so this needs to reach (0,3,0).
 */
.evergreen-enrollment-wrapper .evergreen-input:focus,
.evergreen-input.evergreen-input:focus {
    border-color: var(--evergreen-500);
    box-shadow: 0 0 0 3px var(--evergreen-100);
}

.evergreen-enrollment-wrapper .evergreen-input.error,
.evergreen-input.evergreen-input.error {
    border-color: var(--eg-danger);
}

.evergreen-input::placeholder {
    color: #9ca3af;
}

/* Ties with Foundation's own input:disabled, input[readonly] at (0,2,0). */
.evergreen-enrollment-wrapper .evergreen-input:disabled,
.evergreen-enrollment-wrapper .evergreen-input[readonly],
.evergreen-input.evergreen-input:disabled,
.evergreen-input.evergreen-input[readonly] {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: default;
}

/* Doubled to clear the armoured base rule above, which is (0,2,0) and would
 * otherwise take back padding-right and drop the arrow onto the label text. */
.evergreen-enrollment-wrapper select.evergreen-input,
select.evergreen-input.evergreen-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.evergreen-input-icon {
    position: relative;
}

.evergreen-input-icon .evergreen-input {
    padding-left: 42px;
}

.evergreen-input-icon svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--evergreen-600);
}

.evergreen-input-suffix {
    position: relative;
}

.evergreen-input-suffix .suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.evergreen-field-error {
    color: var(--eg-danger);
    font-size: 13px;
    margin-top: 5px;
    display: none;
}

.evergreen-field-error.show {
    display: block;
}

.evergreen-field-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.evergreen-field-hint svg {
    width: 14px;
    height: 14px;
    color: var(--evergreen-600);
}

.evergreen-field-hint.warning {
    color: var(--eg-warning);
}

/* Pre-filled Info Box */
.evergreen-prefilled {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.evergreen-prefilled-item {
    display: flex;
    flex-direction: column;
}

.evergreen-prefilled-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evergreen-prefilled-value {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

/* Terms Section */
.evergreen-terms-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.evergreen-term-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
    cursor: pointer;
}

/*
 * Both Foundation and the 720 theme strip link underlines site-wide. These
 * terms are an agreement the customer signs, and a link distinguished by
 * colour alone fails WCAG 1.4.1, so the underline goes back on body-copy
 * links. Buttons are excluded by the :not(), not by specificity.
 */
.evergreen-enrollment-wrapper a:not(.evergreen-btn) {
    text-decoration: underline;
}

.evergreen-term-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    /* Shorthand, not margin-top: Foundation sets [type=checkbox] to
     * `margin: 0 0 1rem`, and a lone margin-top leaves that 1rem in place —
     * which stretches every term row in this flex column. */
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--evergreen-600);
    cursor: pointer;
}

.evergreen-term-item span {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.evergreen-term-item .term-number {
    font-weight: 600;
    color: #111827;
}

.evergreen-tos-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.evergreen-tos-option {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5; /* Foundation sets label { line-height: 1.8 }. */
    cursor: pointer;
}

.evergreen-tos-option input[type="radio"] {
    width: 18px;
    height: 18px;
    /* Clears Foundation's `margin: 0 0 1rem` on [type=radio] and its
     * `margin-right: .5rem` on label > [type=radio], which would double up
     * with this row's flex gap. */
    margin: 0;
    accent-color: var(--evergreen-600);
    cursor: pointer;
}

.evergreen-tos-option span {
    font-size: 14px;
    color: #374151;
}

.evergreen-tos-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 12px;
}

/* Pricing Box */
.evergreen-pricing-box {
    background: var(--evergreen-50);
    border: 1px solid var(--evergreen-200);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.evergreen-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--evergreen-200);
}

.evergreen-pricing-row:last-child {
    border-bottom: none;
    padding-top: 14px;
    font-weight: 600;
}

.evergreen-pricing-label {
    font-size: 14px;
    color: #374151;
}

.evergreen-pricing-value {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.evergreen-pricing-value .note {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

/* Discount Code */
.evergreen-discount-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.evergreen-discount-row .evergreen-field {
    flex: 1;
}

.evergreen-discount-row button {
    padding: 12px 20px;
    background: #f3f4f6;
    border: 1px solid #858e99;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2; /* Foundation sets button { line-height: 1 }. */
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.evergreen-discount-row button:hover {
    background: #e5e7eb;
}

.evergreen-discount-result {
    margin-top: 8px;
    font-size: 14px;
}

.evergreen-discount-result.success {
    color: var(--evergreen-600);
}

.evergreen-discount-result.error {
    color: var(--eg-danger);
}

/* Payment Summary Discount Animation */
#payment-summary {
    transition: all 0.3s ease;
}

#payment-summary.discounted {
    border: 2px solid var(--eg-success) !important;
    background: #f0fdf4 !important;
}

#original-price {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes priceUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#setup-fee-display,
#monthly-fee-display {
    transition: all 0.3s ease;
}

/* Security Badges */
.evergreen-security-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.evergreen-security-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.evergreen-security-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--evergreen-600);
}

/* Security Notice Inline */
.evergreen-security-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--evergreen-50);
    border-radius: 8px;
    font-size: 13px;
    color: var(--evergreen-700);
    margin-top: 20px;
}

.evergreen-security-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Form Actions */
.evergreen-form-actions {
    display: flex;
    gap: 16px;
    margin-top: 28px;
}

.evergreen-enrollment-wrapper .evergreen-btn,
.evergreen-btn.evergreen-btn {
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    /* Declared rather than left to the UA default, because Foundation sets
     * `button { line-height: 1 }` and this rule would not otherwise contest it. */
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.evergreen-enrollment-wrapper .evergreen-btn:disabled,
.evergreen-btn.evergreen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.evergreen-enrollment-wrapper .evergreen-btn-primary,
.evergreen-btn-primary.evergreen-btn-primary {
    flex: 1;
    background: var(--evergreen-600);
    color: white;
}

.evergreen-enrollment-wrapper .evergreen-btn-primary:hover:not(:disabled),
.evergreen-btn-primary.evergreen-btn-primary:hover:not(:disabled) {
    background: var(--evergreen-700);
    color: white;
}

.evergreen-enrollment-wrapper .evergreen-btn-secondary,
.evergreen-btn-secondary.evergreen-btn-secondary {
    flex: 1;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #858e99;
}

.evergreen-enrollment-wrapper .evergreen-btn-secondary:hover:not(:disabled),
.evergreen-btn-secondary.evergreen-btn-secondary:hover:not(:disabled) {
    background: #e5e7eb;
}

.evergreen-enrollment-wrapper .evergreen-btn-full,
.evergreen-btn-full.evergreen-btn-full {
    width: 100%;
}

/* Loading Spinner */
.evergreen-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Footer */
.evergreen-footer {
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 24px 20px;
    text-align: center;
}

.evergreen-footer p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.evergreen-footer a {
    color: var(--evergreen-600);
    text-decoration: none;
    font-weight: 500;
}

.evergreen-footer a:hover {
    text-decoration: underline;
}

.evergreen-footer .copyright {
    margin-top: 8px;
    font-size: 13px;
}

/* Loading Overlay */
.evergreen-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.evergreen-loading-content {
    background: white;
    padding: 40px 50px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.evergreen-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--evergreen-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.evergreen-loading-message {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}

/* TOS Modal */
.evergreen-tos-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evergreen-tos-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.evergreen-tos-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.evergreen-tos-modal-header h3 {
    margin: 0;
    font-size: 18px;
    /* The 720 theme sets headings to Oswald 400; without this the modal title
     * stops reading as a heading. */
    font-weight: 600;
    color: #111827;
}

.evergreen-tos-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.evergreen-tos-modal-close:hover {
    color: #111827;
}

.evergreen-tos-modal-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* Confirmation Page */
.evergreen-confirmation {
    text-align: center;
}

.evergreen-confirmation-icon {
    width: 80px;
    height: 80px;
    background: var(--evergreen-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.evergreen-confirmation-icon svg {
    width: 40px;
    height: 40px;
    color: var(--evergreen-600);
}

.evergreen-confirmation h1 {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.evergreen-confirmation .welcome {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 32px;
}

.evergreen-confirmation .welcome strong {
    color: var(--evergreen-700);
}

.evergreen-confirmation-details {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: left;
}

.evergreen-confirmation-details h2 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px;
    text-align: center;
}

.evergreen-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.evergreen-detail-row:last-child {
    border-bottom: none;
}

.evergreen-detail-label {
    font-size: 14px;
    color: #6b7280;
}

.evergreen-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.evergreen-detail-value.highlight {
    color: var(--evergreen-700);
    font-family: monospace;
}

.evergreen-next-steps {
    background: var(--evergreen-50);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: left;
}

.evergreen-next-steps h2 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 20px;
}

.evergreen-next-steps ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.evergreen-next-steps li {
    display: flex;
    gap: 12px;
}

.evergreen-next-steps .step-num {
    width: 24px;
    height: 24px;
    background: var(--evergreen-600);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.evergreen-next-steps .step-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 2px;
}

.evergreen-next-steps .step-content p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.evergreen-support-box {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.evergreen-support-box p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px;
}

.evergreen-support-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.evergreen-support-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--evergreen-700);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.evergreen-support-links a:hover {
    color: var(--evergreen-800);
}

.evergreen-support-links svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 640px) {
    .evergreen-main {
        padding: 24px 16px;
    }

    .evergreen-card {
        padding: 20px 16px;
    }

    .evergreen-form-row.cols-2,
    .evergreen-form-row.cols-3 {
        grid-template-columns: 1fr;
    }

    .evergreen-step-connector {
        width: 40px;
        margin: 0 8px;
    }

    .evergreen-step-number {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .evergreen-step-label {
        font-size: 11px;
    }

    .evergreen-step-header h2 {
        font-size: 22px;
    }

    .evergreen-form-actions {
        flex-direction: column-reverse;
    }

    .evergreen-prefilled {
        grid-template-columns: 1fr;
    }

    .evergreen-discount-row {
        flex-direction: column;
        align-items: stretch;
    }

    .evergreen-security-badges {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* ==========================================================================
   Host theme integration
   --------------------------------------------------------------------------
   Scoped to .evergreen-form-page, a body class the plugin adds only on pages
   that actually render the form. Nothing here can reach another page.

   Why it is needed. The 720CS21 theme wraps its site header in Foundation's
   .grid-container, which supplies the max-width and centring, but the content
   area below is only:

       <div class="content"><div class="inner-content grid-x ...">
           <main class="main small-12 large-8 medium-8 cell">

   No .grid-container, so the row spans the full viewport with no gutter — which
   is why the page title sat flush against the left edge. And main is large-8,
   two thirds of that full width, so the form centred inside a column running
   from x=0 to roughly 66% of the window. It was centred correctly the whole
   time; the column it was centred in was the problem.

   The theme's own sidebar is large-12, so it already stacks below rather than
   sitting beside the content. Widening main to full width therefore takes no
   space from anything.
   ========================================================================== */

/* The form states its own purpose — "Let's Get Started" — directly beneath. */
.evergreen-form-page .article-header {
    display: none;
}

.evergreen-form-page main.main {
    /* Foundation cells set flex-basis and width; both have to go. */
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Restores the gutter the missing .grid-container would have provided. */
.evergreen-form-page .inner-content {
    max-width: 1200px;
    margin-inline: auto;
}

/* ==========================================================================
   Program header
   Sits above the stepper and stays put across all three steps, because it
   answers a question the step headings never do: what is this, and what does
   it cost.
   ========================================================================== */

.evergreen-program-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.evergreen-program-title {
    font-family: var(--eg-font-heading);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #111827;
    margin: 0 0 10px;
    text-wrap: balance;
}

/* The three facts read as one line on desktop and stack cleanly on a phone. */
.evergreen-program-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--evergreen-700);
    margin: 0 0 6px;
}

/* Separators as pseudo-elements: no stray dot after the last item, and none
   read out by a screen reader. */
.evergreen-program-meta span:not(:last-child)::after {
    content: "·";
    margin-left: 14px;
    color: #9ca3af;
    font-weight: 400;
}

.evergreen-program-by {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

@media (max-width: 480px) {
    .evergreen-program-title { font-size: 23px; }
    .evergreen-program-meta { font-size: 14px; }
}