/* ============================================================
   GENERATED CSS FILE
   Generated on: 2025-08-12 09:48:17 CDT
   Version: leadthink-version-two
   Index Style: basic-index
   Primary Palette: tailwind-purple
   Neutral Palette: tailwind-slate
   Success Palette: tailwind-green
   Failure Palette: tailwind-red
============================================================ */

/* ============================================================
   GLOBAL RESET
   Modern normalize/reset styles
============================================================ */

/* reset.css */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
    box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
    font-family:
            system-ui,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji'; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
    margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family:
            ui-monospace,
            SFMono-Regular,
            Consolas,
            'Liberation Mono',
            Menlo,
            monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}


/* ============================================================
   BASE COLORS
   Essential black and white values
============================================================ */

:root {
  --white: #FFFFFF;
  --black: #000000;
}

/* Primary Palette: tailwind-purple */
:root {
    --primary-50:  #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7e22ce;
    --primary-800: #6b21a8;
    --primary-900: #581c87;
    --primary-950: #3b0764;
}

/* Neutral Palette: tailwind-slate */
:root {
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;
}

/* Success Palette: tailwind-green */
:root {
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success-950: #052e16;
}

/* Failure Palette: tailwind-red */
:root {
    --failure-50:  #fef2f2;
    --failure-100: #fee2e2;
    --failure-200: #fecaca;
    --failure-300: #fca5a5;
    --failure-400: #f87171;
    --failure-500: #ef4444;
    --failure-600: #dc2626;
    --failure-700: #b91c1c;
    --failure-800: #991b1b;
    --failure-900: #7f1d1d;
    --failure-950: #450a0a;
}

/* ============================================================
   GLOBAL STYLE VARIABLES
   Site-wide design defaults
============================================================ */

:root {
    /* Global */
    --global-border-width: 1px;
    --global-border-style: solid;
    --global-border-radius: var(--radius-lg);

}

/* ============================================================
   COMPONENT VARIABLES
   Component-specific style variables
============================================================ */

:root {
    /* Body */
    --body-bg-color: var(--neutral-100);
    --body-color: var(--neutral-900);

    /* Button */
    --button-bg: var(--primary-500);
    --button-bg-hover: var(--primary-900);
    --button-bg-active: var(--primary-500);
    --button-bg-disabled: var(--neutral-300);
    --button-text: var(--neutral-50);
    --button-text-hover: var(--white);
    --button-text-disabled: var(--neutral-500);
    --button-border: var(--primary-500);
    --button-border-hover: var(--primary-700);
    --button-border-disabled: var(--neutral-300);
    --button-border-width: var(--global-border-width);
    --button-border-style: var(--global-border-style);
    --button-shadow: var(--shadow-md);
    --button-shadow-active: var(--shadow-md);
    --button-radius: var(--global-border-radius);
    --button-radius-top-left: var(--button-radius);
    --button-radius-top-right: var(--button-radius);
    --button-radius-bottom-right: var(--button-radius);
    --button-radius-bottom-left: var(--button-radius);
    --button-font-size: var(--text-lg);

    /* Input */
    --input-bg: var(--white);
    --input-border: var(--neutral-300);
    --input-border-width: var(--global-border-width);
    --input-border-radius: var(--global-border-radius);
    --input-text: var(--neutral-800);
    --input-placeholder: var(--neutral-500);
    --input-focus-border: var(--primary-400);
    --input-error-color: var(--failure-500);
    --input-checkbox-bg: var(--neutral-50);
    --input-checkbox-border: var(--primary-500);
    --input-checkbox-checked-bg: var(--primary-500);

    /* Media */
    --media-max-width: 100%;
    --media-max-width-mobile: 100%;
    --media-aspect-ratio: 4/3;
    --media-aspect-ratio-mobile: 4/3;
    --media-image-max-width: var(--media-max-width);
    --media-image-max-width-mobile: var(--media-max-width-mobile);
    --media-image-aspect-ratio: var(--media-aspect-ratio);
    --media-image-margin: 0 auto;
    --media-image-margin-bottom: 24px;
    --media-image-border-radius: var(--global-border-radius);
    --media-image-border-width: var(--global-border-width);
    --media-image-border-color: var(--primary-500);
    --media-image-bg-color: var(--primary-50);
    --media-image-overflow: hidden;
    --media-image-object-fit: contain;
    --media-image-object-position: center;
    --media-video-max-width: var(--media-max-width);
    --media-video-max-width-mobile: var(--media-max-width-mobile);
    --media-video-aspect-ratio: var(--media-aspect-ratio);
    --media-video-margin: 0 auto;
    --media-video-margin-bottom: 24px;
    --media-video-border-radius: var(--global-border-radius);
    --media-video-border-width: var(--global-border-width);
    --media-video-border-color: var(--primary-500);
    --media-video-bg-color: transparent;
    --media-video-overflow: hidden;
    --media-video-object-fit: contain;
    --media-video-object-position: center;
    --media-svg-max-width: var(--media-max-width);
    --media-svg-max-width-mobile: var(--media-max-width-mobile);
    --media-svg-aspect-ratio: var(--media-aspect-ratio);
    --media-svg-margin: 0 auto;
    --media-svg-margin-bottom: 24px;
    --media-svg-border-radius: var(--global-border-radius);
    --media-svg-border-width: var(--global-border-width);
    --media-svg-border-color: var(--primary-500);
    --media-svg-bg-color: transparent;
    --media-svg-overflow: hidden;
    --media-svg-object-fit: contain;
    --media-svg-object-position: center;
    --media-text-max-width: var(--media-max-width);
    --media-text-max-width-mobile: var(--media-max-width-mobile);
    --media-text-aspect-ratio: var(--media-aspect-ratio);
    --media-text-margin: 0 auto;
    --media-text-margin-bottom: 24px;
    --media-text-border-radius: var(--global-border-radius);
    --media-text-border-width: var(--global-border-width);
    --media-text-border-color: var(--primary-500);
    --media-text-bg-color: transparent;
    --media-text-overflow: hidden;
    --media-text-content-bg: var(--primary-900);
    --media-text-content-color: var(--white);
    --media-text-content-padding: 8px 16px;
    --media-text-content-border-radius: var(--radius-sm);
    --media-text-content-font-size: var(--text-sm);
    --media-text-content-font-weight: font-medium;
    --media-image-display: block;
    --media-video-display: none;
    --media-svg-display: none;
    --media-text-display: none;

    /* Container bg */
    --container-bg-size: contain;
    --container-bg-position: center;
    --container-bg-repeat: repeat;
    --container-bg-attachment: scroll;
    --container-bg-color: transparent;

    /* Header */
    --header-notification-display: none;
    --header-height: 120px;
    --header-notification-height: 0px;
    --header-height-mobile: 90px;
    --header-notification-height-mobile: 0px;
    --header-bg: transparent;
    --header-border-width: 0;
    --header-border-color: var(--neutral-200);
    --header-shadow: none;
    --header-max-width: 900px;
    --header-logo-width: 300px;
    --header-logo-width-mobile: 225px;
    --header-container-justify: center;
    --header-container-align: flex-end;
    --header-notification-bg: var(--primary-100);
    --header-notification-text: var(--primary-900);
    --header-notification-border: var(--primary-200);

    /* Footer */
    --footer-bg-color: var(--primary-950);

    /* Highlight */
    --highlight-bg: var(--primary-100);
    --highlight-text-color: inherit;
    --highlight-padding: 0 4px;
    --highlight-display: inline-block;
    --highlight-font-family: ;
    --highlight-font-weight: normal;
    --highlight-clip: border-box;
    --highlight-bg-size: auto;
    --highlight-animation: none;

    /* Chat question */
    --chat-question-message-bg: var(--neutral-300);
    --chat-question-message-border: var(--neutral-900);
    --chat-question-message-shadow: var(--shadow-neobrute-20);
    --chat-question-avatar-bg: var(--primary-50);
    --chat-question-avatar-image: var(--chat-avatar);
    --chat-question-avatar-border: var(--neutral-900);
    --chat-question-avatar-shadow: 1px 2px 0px 0px var(--neutral-900);

    /* Step form */
    --step-form-border: transparent;
    --step-form-border-radius: ;
    --step-form-border-width: ;
    --step-form-background-color: ;
    --step-form-shadow: ;
    --step-form-padding: 3rem 1rem;
    --step-form-padding-mobile: 2rem 1rem;;
    --step-form-max-width-mobile: 100%;
    --step-form-gender-ul-display: flex;
    --step-form-gender-li-height: 140px;
    --step-form-gender-li-width: 159px;
    --step-form-gender-button-margin-top: 127px;
    --step-form-margin-top: 80px;
    --step-form-margin-top-mobile: 12px;
    --step-form-gender-margin-top: 128px;
    --step-form-gender-margin-top-mobile: 96px;
    --step-form-seeking-gender-margin-top: 128px;
    --step-form-seeking-gender-margin-top-mobile: 96px;
    --step-form-zip-margin-top: var(--step-form-margin-top);
    --step-form-zip-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-age-margin-top: var(--step-form-margin-top);
    --step-form-age-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-email-margin-top: var(--step-form-margin-top);
    --step-form-email-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-ethnicity-margin-top: var(--step-form-margin-top);
    --step-form-ethnicity-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-have-children-margin-top: var(--step-form-margin-top);
    --step-form-have-children-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-income-margin-top: var(--step-form-margin-top);
    --step-form-income-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-religion-margin-top: var(--step-form-margin-top);
    --step-form-religion-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-church-involvement-margin-top: var(--step-form-margin-top);
    --step-form-church-involvement-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-relationship-intent-margin-top: var(--step-form-margin-top);
    --step-form-relationship-intent-margin-top-mobile: var(--step-form-margin-top-mobile);
    --step-form-education-margin-top: var(--step-form-margin-top);
    --step-form-education-margin-top-mobile: var(--step-form-margin-top-mobile);

    /* Question */
    --question-display: block;
    --question-margin-bottom: 0px;
    --question-gender-margin-bottom: 36px;
    --question-seeking-gender-margin-bottom: 36px;
    --question-zip-margin-bottom: var(--question-margin-bottom);
    --question-age-margin-bottom: var(--question-margin-bottom);
    --question-email-margin-bottom: var(--question-margin-bottom);
    --question-ethnicity-margin-bottom: var(--question-margin-bottom);
    --question-have-children-margin-bottom: var(--question-margin-bottom);
    --question-income-margin-bottom: var(--question-margin-bottom);
    --question-religion-margin-bottom: var(--question-margin-bottom);
    --question-church-involvement-margin-bottom: var(--question-margin-bottom);
    --question-relationship-intent-margin-bottom: var(--question-margin-bottom);
    --question-education-margin-bottom: var(--question-margin-bottom);


}

/* ============================================================
   CSS CONTENT PROPERTIES
   Dynamic content values for pseudo-elements
============================================================ */

:root {
    /* Content Properties */
    --media-text-content-bg: "primary-900";
    --media-text-content-color: "white";
    --media-text-content-padding: "8px 16px";
    --media-text-content-border-radius: "radius-sm";
    --media-text-content-font-size: "text-sm";
    --media-text-content-font-weight: "font-medium";
}

/* ============================================================
   MEDIA VARIABLES
   CSS custom properties for media (images, videos, SVG, content)
============================================================ */

:root {
        --logo: url('/images/logo.svg');
            --background-bg: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001.jpg');
            --background-bg-2x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-2x.jpg');
            --background-bg-3x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-3x.jpg');
            --icons-icon-bar-icon: url('/var/www/inc/framework/images/icons/heart.svg');
            --icons-feature-1: url('/var/www/inc/framework/images/icons/awards-ribbon.svg');
            --icons-feature-2: url('/var/www/inc/framework/images/icons/phone-with-heart.svg');
            --icons-feature-3: url('/var/www/inc/framework/images/icons/location-marker-with-heart.svg');
        --chat-avatar: url('/images/logo-icon.svg');
            --container-image-display: block;
                --container-image-url: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001.jpg');
                --container-image-url-2x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-2x.jpg');
                --container-image-url-3x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-3x.jpg');
                --gender-split-male-image-display: block;
                    --gender-split-male-image-url: url('/framework/images/men/smiling-man-transparent-square-0001.png');
                    --gender-split-male-image-url-2x: url('/framework/images/men/smiling-man-transparent-square-0001-2x.png');
                    --gender-split-male-image-url-3x: url('/framework/images/men/smiling-man-transparent-square-0001-3x.png');
                --gender-split-female-image-display: block;
                    --gender-split-female-image-url: url('/framework/images/women/smiling-woman-transparent-square-0001.png');
                    --gender-split-female-image-url-2x: url('/framework/images/women/smiling-woman-transparent-square-0001-2x.png');
                    --gender-split-female-image-url-3x: url('/framework/images/women/smiling-woman-transparent-square-0001-3x.png');
                --seeking-gender-split-male-image-display: block;
                    --seeking-gender-split-male-image-url: url('/framework/images/men/smiling-man-transparent-square-0002.png');
                    --seeking-gender-split-male-image-url-2x: url('/framework/images/men/smiling-man-transparent-square-0002-2x.png');
                    --seeking-gender-split-male-image-url-3x: url('/framework/images/men/smiling-man-transparent-square-0002-3x.png');
                --seeking-gender-split-female-image-display: block;
                    --seeking-gender-split-female-image-url: url('/framework/images/women/smiling-woman-transparent-square-0002.png');
                    --seeking-gender-split-female-image-url-2x: url('/framework/images/women/smiling-woman-transparent-square-0002-2x.png');
                    --seeking-gender-split-female-image-url-3x: url('/framework/images/women/smiling-woman-transparent-square-0002-3x.png');
            --gender-image-display: none;
                --gender-image-url: url('/framework/images/couple/couple-smiling-outside-0002-landscape-400-300.jpg');
            --gender-video-display: none;
                --gender-video-url: url('/framework/videos/couple/couple-smiling-outside-0001-landscape-400-300-mp4.mp4');
            --gender-svg-display: none;
            --gender-text-display: none;
            --seeking-gender-image-display: none;
                --seeking-gender-image-url: url('/framework/images/couple/couple-dinner-wine-0001-landscape-400-300.jpg');
            --seeking-gender-video-display: none;
                --seeking-gender-video-url: url('/framework/videos/couple/couple-dinner-wine-day-0001-landscape-400-300-mp4.mp4');
            --seeking-gender-svg-display: none;
            --seeking-gender-text-display: none;
            --zip-image-display: block;
                --zip-image-url: url('/framework/images/nature/beach-at-sunset-0002-landscape-400-300.jpg');
            --zip-video-display: none;
                --zip-video-url: url('/framework/videos/nature/beach-at-sunset-0001-landscape-400-300-mp4.mp4');
            --zip-svg-display: none;
            --zip-text-display: none;
            --age-image-display: block;
                --age-image-url: url('/framework/images/activity/people-celebrating-birthday-0001-landscape-400-300.jpg');
            --age-video-display: none;
                --age-video-url: url('/framework/videos/activity/people-celebrating-birthday-0001-landscape-400-300-mp4.mp4');
            --age-svg-display: none;
            --age-text-display: none;
            --email-image-display: block;
                --email-image-url: url('/framework/images/women/woman-laptop-cafe-0001-landscape-400-300.jpg');
            --email-video-display: none;
                --email-video-url: url('/framework/videos/women/women-laptop-cafe-0001-landscape-400-300-mp4.mp4');
            --email-svg-display: none;
            --email-text-display: none;
            --ethnicity-image-display: block;
                --ethnicity-image-url: url('/framework/images/activity/people-picnic-outside-0001-landscape-400-300.jpg');
            --ethnicity-video-display: none;
                --ethnicity-video-url: url('/framework/videos/activity/people-picnic-outside-0001-landscape-400-300-mp4.mp4');
            --ethnicity-svg-display: none;
            --ethnicity-text-display: none;
            --have-children-image-display: block;
                --have-children-image-url: url('/framework/images/activity/children-playground-daytime-0001-landscape-400-300.jpg');
            --have-children-video-display: none;
                --have-children-video-url: url('/framework/videos/activity/children-playground-daytime-0001-landscape-400-300-mp4.mp4');
            --have-children-svg-display: none;
            --have-children-text-display: none;
            --income-image-display: block;
                --income-image-url: url('/framework/images/couple/couple-building-outside-0001-landscape-400-300.jpg');
            --income-video-display: none;
                --income-video-url: url('/framework/videos/couple/couple-building-outside-0001-landscape-400-300-mp4.mp4');
            --income-svg-display: none;
            --income-text-display: none;
            --religion-image-display: block;
                --religion-image-url: url('/framework/images/christian/pastor-sermon-church-0001-landscape-400-300.jpg');
            --religion-video-display: none;
                --religion-video-url: url('/framework/videos/christian/pastor-sermon-church-0001-landscape-400-300-mp4.mp4');
            --religion-svg-display: none;
            --religion-text-display: none;
            --church-involvement-image-display: block;
                --church-involvement-image-url: url('/framework/images/christian/pastor-sermon-church-0002-landscape-400-300.jpg');
            --church-involvement-video-display: none;
                --church-involvement-video-url: url('/framework/videos/christian/pastor-sermon-church-0002-landscape-400-300-mp4.mp4');
            --church-involvement-svg-display: none;
            --church-involvement-text-display: none;
            --relationship-intent-image-display: block;
                --relationship-intent-image-url: url('/framework/images/women/woman-hand-ring-0001-landscape-400-300.jpg');
            --relationship-intent-video-display: none;
                --relationship-intent-video-url: url('/framework/videos/women/woman-hand-ring-0001-landscape-400-300-mp4.mp4');
            --relationship-intent-svg-display: none;
            --relationship-intent-text-display: none;
            --education-image-display: block;
                --education-image-url: url('/framework/images/scenes/college-daytime-0001-landscape-400-300.jpg');
            --education-video-display: none;
                --education-video-url: url('/framework/videos/scenes/college-daytime-0001-landscape-400-300-mp4.mp4');
            --education-svg-display: none;
            --education-text-display: none;

}

/*======================================
 * TYPOGRAPHY SYSTEM
 *
 * Comprehensive typographic styles that establish visual hierarchy
 *  * through headings, paragraphs, and text formatting. This section
 *  * ensures consistent and readable text across the entire website.
 *======================================*/

/* Warning: Font directory for 'neutral' (dir: neutral) not found */
@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('/framework/fonts/source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('/framework/fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'SourceSansPro-Black';
    src: url('/framework/fonts/source-sans-pro/SourceSansPro-Black.ttf') format('truetype');
}

:root {
    /* Font families */
    --font-color: 'neutral-950', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'SourceSansPro-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-headings: 'SourceSansPro-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-paragraph: 'SourceSansPro-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-strong: 'SourceSansPro-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-button: 'SourceSansPro-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* Typography Classes */
/* Additional typography utilities and classes from leadthink-version-two/typography.css */

:root {
    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: normal;
    margin-top: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1 {
    font-size: var(--text-4xl);
    line-height: 1.2;
}

h2 {
    font-size: var(--text-3xl);
    line-height: 1.3;
}

h3 {
    font-size: var(--text-2xl);
    line-height: 1.4;
}

h4 {
    font-size: var(--text-xl);
    line-height: 1.4;
}

h5 {
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--neutral-700);
}

p {
    font-family: var(--font-paragraph);
    margin: 0 0 var(--space-4) 0;
}

strong, b {
    font-family: var(--font-strong);
    font-weight: normal;
}

button, .btn {
    font-family: var(--font-button);
}

hr {
    background-image: linear-gradient(to right, transparent, rgba(50, 50, 50, 0.4), transparent);
    border: 0;
    height: 2px;
    margin: 22px auto;
    max-width: 90%;
}

p img {
    margin: 0;
}

p.lead {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--neutral-600);
}

em {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
}

sup {
    font-size: var(--text-xs);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.subheader {
    color: var(--neutral-600);
}

/* Links */
a, a:visited {
    color: var(--primary-800);
    text-decoration: underline;
    outline: 0;
    transition: color var(--transition-default);
}

a:hover, a:focus {
    color: var(--primary-600);
}

p a, p a:visited {
    line-height: inherit;
}

/* Lists */
ul, ol {
    margin-bottom: var(--space-4);
}

ul {
    list-style: none outside;
}

ol {
    list-style: decimal;
}

ol, ul.square, ul.circle, ul.disc {
    margin-left: 30px;
}

ul.square {
    list-style: square outside;
}

ul.circle {
    list-style: circle outside;
}

ul.disc {
    list-style: disc outside;
}

ul ul, ul ol, ol ol, ol ul {
    margin: var(--space-1) 0 var(--space-2) 30px;
    font-size: 90%;
}

ul ul li, ul ol li, ol ol li, ol ul li {
    margin-bottom: 0px;
}

li {
    line-height: 1.4;
    margin-bottom: 0px;
}

ul.large li {
    line-height: 1.6;
}

li p {
    line-height: 1.5;
}

/* ========== MOBILE RESPONSIVE ========== */
/* Mobile (below 768px) */
@media (max-width: 768px) {
    h1 {
        font-size: var(--text-3xl);
    }

    h2 {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }

    h4 {
        font-size: var(--text-lg);
    }

    h5 {
        font-size: var(--text-base);
    }
}

/* Small mobile (below 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }

    h4 {
        font-size: var(--text-base);
    }
}


/* ============================================================
   CORE STYLES
   Layout, typography, and utilities
============================================================ */

/* animations.css */
@keyframes pulse {
    0%,
    100% {
        animation-timing-function: ease-in;
    }
    50% {
        transform: scale(0.95);
    }
}

.slide-left {
    width: 100%;
}

form.slide-left, form.slide-right {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}
.slide-left {
    animation: 0.4s slide-left;
}
@keyframes slide-left {
    from {
        left: 100%;
    }
    to {
        left: 0;
    }
}
.slide-right {
    width: 100%;
}
/***** Slide Left *****/
.slide-right {
    animation: 0.4s slide-right;
}
@keyframes slide-right {
    from {
        right: 100%;
    }
    to {
        right: 0;
    }
}

/* layout.css */
html {
    height: 100%;
}

/* utilities.css */
/* ============================================================
   DESIGN UTILITIES
   Shadows, opacity, transitions, and other design tokens
============================================================ */

:root {
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-neobrute: 4px 4px 0 rgba(0, 0, 0, 1);
    --shadow-neobrute-20: 4px 4px 0 rgba(0, 0, 0, 0.2);

    /* Dark mode shadows */
    --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.6);
    --shadow-dark-md: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
    --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.8);
    --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9);
    --shadow-dark-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);

    /* Neobrute for dark mode - using light colors */
    --shadow-neobrute-light: 4px 4px 0 rgba(255, 255, 255, 0.15);
    --shadow-neobrute-light-20: 4px 4px 0 rgba(255, 255, 255, 0.2);
    --shadow-neobrute-light-40: 4px 4px 0 rgba(255, 255, 255, 0.4);

    /* Colored neobrute variants */
    --shadow-neobrute-primary: 4px 4px 0 var(--primary-500);
    --shadow-neobrute-primary-20: 4px 4px 0 var(--primary-200);

    /* Opacity */
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.6;
    --opacity-80: 0.8;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-default: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-index */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
}

/* ============================================================
   UTILITY CLASSES
   Helper classes for common layout and text tasks
============================================================ */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* ========== TEXT HIGHLIGHTS ========== */

.highlight {
    background: var(--highlight-bg);
    color: var(--highlight-text-color);
    padding: var(--highlight-padding);
    display: var(--highlight-display);
    font-family: var(--highlight-font-family);
    font-weight: var(--highlight-font-weight);
    background-clip: var(--highlight-clip);
    -webkit-background-clip: var(--highlight-clip);
    background-size: var(--highlight-bg-size);
    animation: var(--highlight-animation);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}


/* ============================================================
   COMPONENT STYLES
   Reusable component definitions
============================================================ */

/* body.css */
/**
 * body.css
 */

body {
    /* Background and text color using variables */
    background: var(--body-bg-color);
    color: var(--body-color);
}

/* button.css */
.buttonized-step-one, button, a.buttonized {
    border-top-left-radius: var(--button-radius-top-left);
    border-top-right-radius: var(--button-radius-top-right);
    border-bottom-right-radius: var(--button-radius-bottom-right);
    border-bottom-left-radius: var(--button-radius-bottom-left);
    border: var(--button-border-width) solid var(--button-border);
    box-shadow: var(--button-shadow);
    background-color: var(--button-bg);
    cursor: pointer;
    color: var(--button-text);
    font-family: var(--font-button);
    font-size: var(--button-font-size);
    width: 100%;
    max-width: 400px;
    margin: 6px auto 0;
    height: 52px;
    position: relative;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.2s infinite;
}

.buttonized-step-one {
    margin: 51px auto 0;
}

button:hover,
a.buttonized:hover,
.buttonized-step-one:hover {
    background-color: var(--button-bg-hover);
    text-decoration: none;
}

button:active:not([disabled]),
a.buttonized:active:not([disabled]) {
    background-color: var(--button-bg-active);
    box-shadow: var(--button-shadow-active);
}

button:visited,
button:active,
button:hover,
a.buttonized:visited,
a.buttonized:active,
a.buttonized:hover {
    color: var(--button-text-hover);
}

button::before,
a.buttonized::before {
    background-position: 0 0;
    content: '';
    display: none;
    margin-right: 5px;
    opacity: .5;
    vertical-align: -4px;
    width: 16px;
    height: 16px;
}

button[disabled],
a.buttonized[disabled] {
    background-color: var(--button-bg-disabled);
    color: var(--button-text-disabled);
    border-color: var(--button-border-disabled);
    cursor: default;
}

button[disabled]::before,
a.buttonized[disabled]::before {
    display: inline-block;
    content: '';
    display: none;
    content: '';
    opacity: .5;
    vertical-align: -4px;
    width: 16px;
    height: 16px;
}

#form-gender ul li button,
#form-seekingGender ul li button {
    width: 100%;
    margin-top: var(--step-form-gender-button-margin-top);
}

#form-gender ul li button:hover,
#form-seekingGender ul li button:hover {
    background-color: var(--button-bg-hover);
    border-color: var(--button-border-hover);
    opacity: 1;
}

/* chat-question.css */
/* ============================================================
   CHAT QUESTION COMPONENT
   Chat-style question display with avatar
============================================================ */

.chat-question {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
}

.chat-question .chat-container {
    display: flex;
    flex-direction: row-reverse; /* Flips message + avatar position */
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.chat-question .chat-message {
    font-family: var(--font-body);
    font-size: var(--text-base);
    background-color: var(--chat-question-message-bg);
    padding: 12px 15px;
    max-width: 80%;
    box-shadow: var(--chat-question-message-shadow);
    border: 1px solid var(--chat-question-message-border);
    text-align: left;
    display: flex;
    align-items: flex-start;

    /* Chat bubble radius for left-side avatar */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 16px;
}

.chat-question .chat-avatar {
    width: 48px;
    height: 48px;
    background-image: var(--chat-question-avatar-image);
    background-color: var(--chat-question-avatar-bg);
    background-size: contain;
    background-origin: content-box;
    padding: 8px;
    background-position: center 70%;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: var(--chat-question-avatar-shadow);
    border: 1px solid var(--chat-question-avatar-border);
    flex-shrink: 0;
}

/* Highlighted variation */
.chat-question.highlighted .chat-message {
    background-color: #e6f7ff;
}

/* container.css */
.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--container-bg-color, transparent);
    position: relative; /* Establish positioning context for media */
}

/* ============================================================
   CONTAINER MEDIA BACKGROUND
   Background styles for the container media component
============================================================ */

/* Container media uses grid for layering */
.container > .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind all content */
    pointer-events: none; /* Click through to content */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* All media children occupy same grid cell */
.container > .media > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* Make the image element fill the container */
.container > .media .image {
    display: var(--container-image-display);
    width: 100%;
    height: 100%;

    /* Background image properties */
    background-image: var(--container-image-url);
    background-repeat: var(--container-bg-repeat, repeat);
    background-size: var(--container-bg-size, contain);
    background-position: var(--container-bg-position, center);
    background-attachment: var(--container-bg-attachment, scroll);
}

/* Ensure container content stays above background */
.container > *:not(.media) {
    position: relative;
    z-index: 1;
}

/* High Resolution (2x) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    .container > .media .image {
        background-image: var(--container-image-url-2x);
    }
}

/* High Resolution (3x) */
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-resolution: 288dpi) {
    .container > .media .image {
        background-image: var(--container-image-url-3x);
    }
}

.container > .media .video {
    /* Video background styles */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Above image but below content */
}

/* content.css */
.content {
    width: 100%;
    flex: 1; /* This makes content expand to push footer down */
}

@media (max-width: 768px) {
    .content {
        min-height: 100vh;
    }
}

/* divider.css */
.divider {
    width: 1025px;
    max-width: 100%;
    background: var(--neutral-900);
    margin: auto;
    padding: 12px 0;
    text-align: center;
    font-size: 24px;
    color: var(--neutral-50);
}

@media (max-width: 600px) {
    .divider {
        font-size: 16px;
    }
}

/* field.css */
.field {
    display: inline-block;
    width: 100%;
    position: relative;
}

.field#gender-input input[type=submit] {
    margin-top: 124px;
}
.field#seekingGender-input input[type=submit] {
    margin-top: 124px;
}

/* footer.css */
.footer-bottom {
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
    background: var(--footer-bg-color);
    height: auto;
    margin: 0 auto;
    padding: 20px;
}

.footer-link, .copyright, .no-background-check {
    color: #fff;
    font-family: var(--font-body);
}

.copyright {
    font-size: 14px;
    margin-bottom: 10px;
}

.no-background-check {
    text-align: center;
    margin: 10px auto;
}

.footer-link {
    margin-top: 10px;
}

.footer-link a {
    color: #fff;
    text-decoration: none;
}

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

/* form.css */
/**
 * form.css
 * Base form component structure
 * Note: Most styling has been moved to specific page CSS files
 */

/* Form wrapper - No base styles needed */
.form {
    /* Semantic marker only - styled via .step.form or .offer.form */
}

/* Form top section - Defined per page type */
.form-top {
    /* No base styles - see step.css or offer-onlinedating.css */
    /* Used for: headers, images, or introductory text */
}

@media (min-width: 901px) {
    .form-top {
        font-size: var(--text-2xl);
    }
}

/* Form body section - Defined per page type */
.form-body {
    /* No base styles - see step.css or offer-onlinedating.css */
    /* Used for: main form content, fields, questions */
}

.form-body .field {
    padding-bottom: 20px;
}

/* Form bottom spacer */
.form-bottom {
    display: none;
}

/* header-with-notification.css */
/* ============================================================
   HEADER WITH NOTIFICATION COMPONENT
   Configurable header with notification bar
============================================================ */

/* Calculate total height based on config */
:root {
    --header-total-height: calc(var(--header-height) + var(--header-notification-height));
}

/* Main component wrapper */
.header-with-notification {
    width: 100%;
    z-index: var(--z-header, 100);
}

/* Optional: Add a class for fixed header if needed */
.header-with-notification.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Main header section */
.header-main {
    width: 100%;
    height: var(--header-height);
    background-color: var(--header-bg);
    border-bottom: var(--header-border-width, 1px) solid var(--header-border-color);
    box-shadow: var(--header-shadow);
}

.header-container {
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: 100%;
    display: flex;
    align-items: var(--header-container-align, center);
    justify-content: var(--header-container-justify, flex-start);
}

/* Logo styling using CSS background */
.header-logo {
    width: var(--header-logo-width);
    height: calc(var(--header-height) - var(--space-4));
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

/* Notification bar */
.header-notification {
    display: var(--header-notification-display, block);
    width: 100%;
    height: var(--header-notification-height);
    background-color: var(--header-notification-bg);
    color: var(--header-notification-text);
    border-bottom: var(--header-border-width, 1px) solid var(--header-notification-border);
}

.notification-container {
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Add the message via CSS */
.notification-container::before {
    content: var(--notification-content);
}

/* Page content spacing for fixed header */
body.fixed-header {
    padding-top: var(--header-total-height);
}

/* Mobile adjustments */
@media (max-width: 767px) {
    :root {
        --header-total-height: calc(var(--header-height-mobile) + var(--header-notification-height-mobile));
    }

    .header-main {
        height: var(--header-height-mobile);
    }

    .header-notification {
        height: var(--header-notification-height-mobile);
    }

    .header-logo {
        width: var(--header-logo-width-mobile);
        height: calc(var(--header-height-mobile) - var(--space-4));
    }

    .header-container,
    .notification-container {
        padding: 0 var(--space-4);
    }

    .notification-container {
        font-size: var(--text-xs);
    }

    body.fixed-header {
        padding-top: var(--header-total-height);
    }
}

/* header.css */
.header {
    padding-top: 48px;
    width: 100%;
}

@media (max-width: 1200px) {
    .header {
        width: 100%;
        max-width: 100%;
    }
}

.header .logo {
    /* Container */
    max-width: 300px;
    width: 90%;
    margin: 0 auto;
    height: 72px;

    /* Background image */
    background: url("/images/logo.svg") no-repeat center center;
    background-size: contain;

    /* Hide text */
    text-indent: -9999px;
    overflow: hidden;
}

/* Mobile */
@media (max-width: 480px) {
    .header .logo {
        width: 60%;
    }
}

/* hint-box.css */
.hint-box {
    display: none;
    position: absolute;
    bottom: 75px;
    right: 50%;
    margin-right: -130px;
    width: 250px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.90);
    color: #fff;
    z-index: 99;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
}

.hint-box ul, .hint-box li {
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* input.css */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    /* Visual */
    background-color: var(--input-bg);
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    outline: none;

    /* Typography */
    color: var(--input-text);
    font-size: var(--text-lg);
    font-family: var(--font-strong);

    /* Layout */
    display: block;
    width: 330px;
    max-width: 100%;
    height: 52px;
    margin: auto;
    padding: 0 10px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--input-focus-border);
}

.form input[type='checkbox'] {
    margin-left: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    background-color: var(--input-checkbox-bg);
    border: 1px solid var(--input-checkbox-border);
    outline: 0;
}

.form input[type='checkbox']:checked {
    background: url("/framework/images/icons/check-white.svg") center center no-repeat var(--input-checkbox-checked-bg);
    background-size: 10px auto;
    vertical-align: middle;
}

input[type=submit] {
    width: 140px;
    height: 52px;
    font-family: var(--font-strong);
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #e84648;
    color: #fff;
    border: 0 none;
    cursor: pointer;
    border-radius: var(--input-border-radius);
    appearance: none;
    animation: pulse 1.2s infinite;
}

::placeholder {
    color: var(--input-placeholder);
}

.errorPlaceholder {
    color: var(--input-error-color);
}

.errorPlaceholder::placeholder {
    color: var(--input-error-color);
}

@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    .form input[type='checkbox']:checked {
        background: url("/framework/images/icons/check-white.svg") center center no-repeat var(--input-checkbox-checked-bg) !important;
        background-size: 10px auto!important;
    }
}

@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    .form input[type='checkbox']:checked {
        background: url("/framework/images/icons/check-white.svg") center center no-repeat var(--input-checkbox-checked-bg) !important;
        background-size: 10px auto!important;
    }
}

@media (max-width: 480px) {
    input[type="text"] {
        width: 100%;
    }

    input[type="password"] {
        width: 100%;
    }

    input[type="email"] {
        width: 100%;
    }

    textarea {
        width: 100%;
    }

}



/* label.css */
.label {
    font-size: var(--text-2xl);
    font-family: var(--font-headings);
}

.label {
    width: 270px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto 36px auto;
}

/* media.css */
/* ============================================================
   MEDIA COMPONENT STYLES
   Styles for all media components (images, videos, SVG, text)
============================================================ */

/* Base media component - just a wrapper, no styles */
.media {
}

.step.form .form-top .media {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    place-items: center;
}

/* All direct children occupy the same grid cell in forms */
.step.form .form-top .media > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* ============================================================
   IMAGE CONTAINERS
   Base layer - normal document flow
============================================================ */

/* Form step image containers */
#form-gender .form-top .media .image,
#form-seekingGender .form-top .media .image,
#form-zip .form-top .media .image,
#form-age .form-top .media .image,
#form-email .form-top .media .image,
#form-ethnicity .form-top .media .image,
#form-haveChildren .form-top .media .image,
#form-income .form-top .media .image,
#form-religion .form-top .media .image,
#form-churchInvolvement .form-top .media .image,
#form-relationshipIntent .form-top .media .image,
#form-education .form-top .media .image {
    width: 100%;
    max-width: var(--media-image-max-width, var(--media-max-width));
    aspect-ratio: var(--media-image-aspect-ratio, var(--media-aspect-ratio));
    margin: var(--media-image-margin, var(--media-margin));
    margin-bottom: var(--media-image-margin-bottom, var(--media-margin-bottom));
    border-radius: var(--media-image-border-radius, var(--media-border-radius));
    border: var(--media-image-border-width, var(--media-border-width)) solid var(--media-image-border-color, var(--media-border-color));
    background-color: var(--media-image-bg-color, var(--media-bg-color));
    overflow: var(--media-image-overflow, var(--media-overflow));
    z-index: 1;
    justify-self: center;
    align-self: start;
}

/* Mobile adjustments for images */
@media (max-width: 767px) {
    #form-gender .form-top .media .image,
    #form-seekingGender .form-top .media .image,
    #form-zip .form-top .media .image,
    #form-age .form-top .media .image,
    #form-email .form-top .media .image,
    #form-ethnicity .form-top .media .image,
    #form-haveChildren .form-top .media .image,
    #form-income .form-top .media .image,
    #form-religion .form-top .media .image,
    #form-churchInvolvement .form-top .media .image,
    #form-relationshipIntent .form-top .media .image,
    #form-education .form-top .media .image {
        max-width: var(--media-image-max-width-mobile, var(--media-max-width-mobile));
    }
}

/* ============================================================
   VIDEO CONTAINERS
   Overlay layer - absolute positioning
============================================================ */

/* Form step video containers */
#form-gender .form-top .media .video,
#form-seekingGender .form-top .media .video,
#form-zip .form-top .media .video,
#form-age .form-top .media .video,
#form-email .form-top .media .video,
#form-ethnicity .form-top .media .video,
#form-haveChildren .form-top .media .video,
#form-income .form-top .media .video,
#form-religion .form-top .media .video,
#form-churchInvolvement .form-top .media .video,
#form-relationshipIntent .form-top .media .video,
#form-education .form-top .media .video {
    height: auto;
    max-width: var(--media-video-max-width, var(--media-max-width));
    aspect-ratio: var(--media-video-aspect-ratio, var(--media-aspect-ratio));
    margin: var(--media-video-margin, var(--media-margin));
    margin-bottom: var(--media-video-margin-bottom, var(--media-margin-bottom));
    border-radius: var(--media-video-border-radius, var(--media-border-radius));
    border: var(--media-video-border-width, var(--media-border-width)) solid var(--media-video-border-color, var(--media-border-color));
    background-color: var(--media-video-bg-color, var(--media-bg-color));
    overflow: var(--media-video-overflow, var(--media-overflow));
    z-index: 2;
    justify-self: center;
    align-self: start;
}

/* Mobile adjustments for videos */
@media (max-width: 767px) {
    #form-gender .form-top .media .video,
    #form-seekingGender .form-top .media .video,
    #form-zip .form-top .media .video,
    #form-age .form-top .media .video,
    #form-email .form-top .media .video,
    #form-ethnicity .form-top .media .video,
    #form-haveChildren .form-top .media .video,
    #form-income .form-top .media .video,
    #form-religion .form-top .media .video,
    #form-churchInvolvement .form-top .media .video,
    #form-relationshipIntent .form-top .media .video,
    #form-education .form-top .media .video {
        max-width: var(--media-video-max-width-mobile, var(--media-max-width-mobile));
    }
}

/* ============================================================
   SVG CONTAINERS
   Overlay layer - absolute positioning
============================================================ */

/* Form step SVG containers */
#form-gender .form-top .media .svg,
#form-seekingGender .form-top .media .svg,
#form-zip .form-top .media .svg,
#form-age .form-top .media .svg,
#form-email .form-top .media .svg,
#form-ethnicity .form-top .media .svg,
#form-haveChildren .form-top .media .svg,
#form-income .form-top .media .svg,
#form-religion .form-top .media .svg,
#form-churchInvolvement .form-top .media .svg,
#form-relationshipIntent .form-top .media .svg,
#form-education .form-top .media .svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--media-svg-max-width, var(--media-max-width));
    aspect-ratio: var(--media-svg-aspect-ratio, var(--media-aspect-ratio));
    margin: var(--media-svg-margin, var(--media-margin));
    margin-bottom: var(--media-svg-margin-bottom, var(--media-margin-bottom));
    border-radius: var(--media-svg-border-radius, var(--media-border-radius));
    border: var(--media-svg-border-width, var(--media-border-width)) solid var(--media-svg-border-color, var(--media-border-color));
    background-color: var(--media-svg-bg-color, var(--media-bg-color));
    overflow: var(--media-svg-overflow, var(--media-overflow));
    z-index: 3;
}

/* Mobile adjustments for SVGs */
@media (max-width: 767px) {
    #form-gender .form-top .media .svg,
    #form-seekingGender .form-top .media .svg,
    #form-zip .form-top .media .svg,
    #form-age .form-top .media .svg,
    #form-email .form-top .media .svg,
    #form-ethnicity .form-top .media .svg,
    #form-haveChildren .form-top .media .svg,
    #form-income .form-top .media .svg,
    #form-religion .form-top .media .svg,
    #form-churchInvolvement .form-top .media .svg,
    #form-relationshipIntent .form-top .media .svg,
    #form-education .form-top .media .svg {
        max-width: var(--media-svg-max-width-mobile, var(--media-max-width-mobile));
    }
}

/* ============================================================
   TEXT CONTAINERS
   Overlay layer - absolute positioning
============================================================ */

/* Form step text containers */
#form-gender .form-top .media. text,
#form-seekingGender .form-top .media. text,
#form-zip .form-top .media. text,
#form-age .form-top .media. text,
#form-email .form-top .media. text,
#form-ethnicity .form-top .media. text,
#form-haveChildren .form-top .media. text,
#form-income .form-top .media. text,
#form-religion .form-top .media. text,
#form-churchInvolvement .form-top .media. text,
#form-relationshipIntent .form-top .media. text,
#form-education .form-top .media. text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--media-text-max-width);
    aspect-ratio: var(--media-text-aspect-ratio);
    margin: var(--media-text-margin);
    margin-bottom: var(--media-text-margin-bottom);
    border-radius: var(--media-text-border-radius);
    border: var(--media-text-border-width) solid var(--media-text-border-color);
    background-color: var(--media-text-bg-color);
    overflow: var(--media-text-overflow);
    z-index: 4;
}

/* Mobile adjustments for text */
@media (max-width: 767px) {
    #form-gender .form-top .media. text,
    #form-seekingGender .form-top .media. text,
    #form-zip .form-top .media. text,
    #form-age .form-top .media. text,
    #form-email .form-top .media. text,
    #form-ethnicity .form-top .media. text,
    #form-haveChildren .form-top .media. text,
    #form-income .form-top .media. text,
    #form-religion .form-top .media. text,
    #form-churchInvolvement .form-top .media. text,
    #form-relationshipIntent .form-top .media. text,
    #form-education .form-top .media. text {
        max-width: var(--media-text-max-width-mobile);
    }
}

/* ============================================================
   IMAGE ELEMENTS
   Styles for image media type
============================================================ */

/* Standard step images */
#form-zip .form-top .media .image,
#form-age .form-top .media .image,
#form-email .form-top .media .image,
#form-ethnicity .form-top .media .image,
#form-haveChildren .form-top .media .image,
#form-income .form-top .media .image,
#form-religion .form-top .media .image,
#form-churchInvolvement .form-top .media .image,
#form-relationshipIntent .form-top .media .image,
#form-education .form-top .media .image {
    object-fit: var(--media-image-object-fit, var(--media-object-fit));
    object-position: var(--media-image-object-position, var(--media-object-position));
}

/* Individual step image sources and visibility */
#form-gender .form-top .media .image {
    display: var(--gender-image-display, block);
    content: var(--gender-image-url);
}

#form-seekingGender .form-top .media .image {
    display: var(--seeking-gender-image-display, block);
    content: var(--seeking-gender-image-url);
}

#form-zip .form-top .media .image {
    display: var(--zip-image-display, block);
    content: var(--zip-image-url);
}

#form-age .form-top .media .image {
    display: var(--age-image-display, block);
    content: var(--age-image-url);
}

#form-email .form-top .media .image {
    display: var(--email-image-display, block);
    content: var(--email-image-url);
}

#form-ethnicity .form-top .media .image {
    display: var(--ethnicity-image-display, block);
    content: var(--ethnicity-image-url);
}

#form-haveChildren .form-top .media .image {
    display: var(--have-children-image-display, block);
    content: var(--have-children-image-url);
}

#form-income .form-top .media .image {
    display: var(--income-image-display, block);
    content: var(--income-image-url);
}

#form-religion .form-top .media .image {
    display: var(--religion-image-display, block);
    content: var(--religion-image-url);
}

#form-churchInvolvement .form-top .media .image {
    display: var(--church-involvement-image-display, block);
    content: var(--church-involvement-image-url);
}

#form-relationshipIntent .form-top .media .image {
    display: var(--relationship-intent-image-display, block);
    content: var(--relationship-intent-image-url);
}

#form-education .form-top .media .image {
    display: var(--education-image-display, block);
    content: var(--education-image-url);
}

/* ============================================================
   VIDEO ELEMENTS
   Styles for video media type
============================================================ */

.form-top .media .video {
    object-fit: var(--media-video-object-fit, var(--media-object-fit));
    object-position: var(--media-video-object-position, var(--media-object-position));
}

/* Individual step video sources and visibility */
#form-gender .form-top .media .video {
    display: var(--gender-video-display, none);
}

#form-seekingGender .form-top .media .video {
    display: var(--seeking-gender-video-display, none);
}

#form-zip .form-top .media .video {
    display: var(--zip-video-display, none);
}

#form-age .form-top .media .video {
    display: var(--age-video-display, none);
}

#form-email .form-top .media .video {
    display: var(--email-video-display, none);
}

#form-ethnicity .form-top .media .video {
    display: var(--ethnicity-video-display, none);
}

#form-haveChildren .form-top .media .video {
    display: var(--have-children-video-display, none);
}

#form-income .form-top .media .video {
    display: var(--income-video-display, none);
}

#form-religion .form-top .media .video {
    display: var(--religion-video-display, none);
}

#form-churchInvolvement .form-top .media .video {
    display: var(--church-involvement-video-display, none);
}

#form-relationshipIntent .form-top .media .video {
    display: var(--relationship-intent-video-display, none);
}

#form-education .form-top .media .video {
    display: var(--education-video-display, none);
}

/* ============================================================
   SVG ELEMENTS
   Styles for SVG media type
============================================================ */

.form-top .media .svg {
    object-fit: var(--media-svg-object-fit);
    object-position: var(--media-svg-object-position);
}

/* Individual step SVG sources and visibility */
#form-gender .form-top .media .svg {
    display: var(--gender-svg-display, none);
}

#form-seekingGender .form-top .media .svg {
    display: var(--seeking-gender-svg-display, none);
}

#form-zip .form-top .media .svg {
    display: var(--zip-svg-display, none);
}

#form-age .form-top .media .svg {
    display: var(--age-svg-display, none);
}

#form-email .form-top .media .svg {
    display: var(--email-svg-display, none);
}

#form-ethnicity .form-top .media .svg {
    display: var(--ethnicity-svg-display, none);
}

#form-haveChildren .form-top .media .svg {
    display: var(--have-children-svg-display, none);
}

#form-income .form-top .media .svg {
    display: var(--income-svg-display, none);
}

#form-religion .form-top .media .svg {
    display: var(--religion-svg-display, none);
}

#form-churchInvolvement .form-top .media .svg {
    display: var(--church-involvement-svg-display, none);
}

#form-relationshipIntent .form-top .media .svg {
    display: var(--relationship-intent-svg-display, none);
}

#form-education .form-top .media .svg {
    display: var(--education-svg-display, none);
}

/* ============================================================
   TEXT OVERLAYS
   Text content overlays - positioned with pseudo-element
============================================================ */

.form-top .media. text::before {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--media-text-content-bg);
    color: var(--media-text-content-color);
    padding: var(--media-text-content-padding);
    border-radius: var(--media-text-content-border-radius);
    font-size: var(--media-text-content-font-size);
    font-weight: var(--media-text-content-font-weight);
    pointer-events: none;
    text-align: center;
}

/* Individual step text visibility and content */
#form-gender .form-top .media. text {
    display: var(--gender-text-display, none);
}
#form-gender .form-top .media. text::before {
    content: var(--gender-text-content, '');
}

#form-seekingGender .form-top .media. text {
    display: var(--seeking-gender-text-display, none);
}
#form-seekingGender .form-top .media. text::before {
    content: var(--seeking-gender-text-content, '');
}

#form-zip .form-top .media. text {
    display: var(--zip-text-display, none);
}
#form-zip .form-top .media. text::before {
    content: var(--zip-text-content, '');
}

#form-age .form-top .media. text {
    display: var(--age-text-display, none);
}
#form-age .form-top .media. text::before {
    content: var(--age-text-content, '');
}

#form-email .form-top .media. text {
    display: var(--email-text-display, none);
}
#form-email .form-top .media. text::before {
    content: var(--email-text-content, '');
}

#form-ethnicity .form-top .media. text {
    display: var(--ethnicity-text-display, none);
}
#form-ethnicity .form-top .media. text::before {
    content: var(--ethnicity-text-content, '');
}

#form-haveChildren .form-top .media. text {
    display: var(--have-children-text-display, none);
}
#form-haveChildren .form-top .media. text::before {
    content: var(--have-children-text-content, '');
}

#form-income .form-top .media. text {
    display: var(--income-text-display, none);
}
#form-income .form-top .media. text::before {
    content: var(--income-text-content, '');
}

#form-religion .form-top .media. text {
    display: var(--religion-text-display, none);
}
#form-religion .form-top .media. text::before {
    content: var(--religion-text-content, '');
}

#form-churchInvolvement .form-top .media. text {
    display: var(--church-involvement-text-display, none);
}
#form-churchInvolvement .form-top .media. text::before {
    content: var(--church-involvement-text-content, '');
}

#form-relationshipIntent .form-top .media. text {
    display: var(--relationship-intent-text-display, none);
}
#form-relationshipIntent .form-top .media. text::before {
    content: var(--relationship-intent-text-content, '');
}

#form-education .form-top .media. text {
    display: var(--education-text-display, none);
}
#form-education .form-top .media. text::before {
    content: var(--education-text-content, '');
}

/* ============================================================
   GENDER SELECTION SPECIAL STYLES
   Male/Female selection buttons with images
============================================================ */

/* Base layout for gender selection */
#form-gender ul,
#form-seekingGender ul {
    display: var(--step-form-gender-ul-display);
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

#form-gender ul li,
#form-seekingGender ul li {
    padding: 0;
    height: var(--step-form-gender-li-height);
    width: var(--step-form-gender-li-width);
    position: relative;
}

/* Gender selection images - Male/Female buttons */
#form-gender ul li:first-child::before,
#form-gender ul li:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: var(--media-image-border-radius);
    box-shadow: inset 0 0 0 0 var(--neutral-950), 0 0 0 var(--media-image-border-width) var(--media-image-border-color);
    background-color: var(--media-image-bg-color);
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    display: var(--gender-split-male-image-display, block);
}

#form-gender ul li:first-child::before {
    background-image: var(--gender-split-male-image-url);
    background-size: 159px 140px;
}

#form-gender ul li:last-child::before {
    background-image: var(--gender-split-female-image-url);
    background-size: 155px 140px;
}

/* High Resolution (1.25x) */
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
    #form-gender ul li:first-child::before {
        background-image: var(--gender-split-male-image-url-2x);
    }
    #form-gender ul li:last-child::before {
        background-image: var(--gender-split-female-image-url-2x);
    }
}

/* High Resolution (2.25x) */
@media only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 216dpi) {
    #form-gender ul li:first-child::before {
        background-image: var(--gender-split-male-image-url-3x);
    }
    #form-gender ul li:last-child::before {
        background-image: var(--gender-split-female-image-url-3x);
    }
}

/* Seeking Gender selection images */
#form-seekingGender ul li:first-child::before,
#form-seekingGender ul li:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: var(--media-image-border-radius);
    box-shadow: inset 0 0 0 0 var(--neutral-950), 0 0 0 var(--media-image-border-width) var(--media-image-border-color);
    background-color: var(--media-image-bg-color);
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    display: var(--seeking-gender-split-male-image-display, block);
}

#form-seekingGender ul li:first-child::before {
    background-image: var(--seeking-gender-split-male-image-url);
    background-size: 155px 137px;
}

#form-seekingGender ul li:last-child::before {
    background-image: var(--seeking-gender-split-female-image-url);
    background-size: 152px 135px;
}

/* High Resolution (1.25x) */
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
    #form-seekingGender ul li:first-child::before {
        background-image: var(--seeking-gender-split-male-image-url-2x);
    }
    #form-seekingGender ul li:last-child::before {
        background-image: var(--seeking-gender-split-female-image-url-2x);
    }
}

/* High Resolution (2.25x) */
@media only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 216dpi) {
    #form-seekingGender ul li:first-child::before {
        background-image: var(--seeking-gender-split-male-image-url-3x);
    }
    #form-seekingGender ul li:last-child::before {
        background-image: var(--seeking-gender-split-female-image-url-3x);
    }
}

/* Mobile adjustments for gender buttons */
@media (max-width: 320px) {
    #form-gender ul li:first-child,
    #form-gender ul li:last-child,
    #form-seekingGender ul li:first-child,
    #form-seekingGender ul li:last-child {
        width: 46%;
    }
}

/* msg.css */
/* error section */
.msg {
    color: var(--failure-500);
    font-family: var(--font-strong);
    font-size: var(--text-base);
    height: 16px;
    text-align: center;
}

/* private-safe.css */
.private-safe {
    display: none;
}

.private-safe {
    height: 22px;
    padding-top: 10px;
    padding-left: 20px;
    position: absolute;
    bottom: 5px;
    right: 18px;
    color: #666;
    font-size: 12px;
    background-image: url('/images/private-safe.png');
    background-position: left;
    background-repeat: no-repeat;
}

/* question.css */
.question {
    font-size: var(--text-2xl);
    font-family: var(--font-headings);
}

.question {
    display: var(--question-display);
    width: 270px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}

#form-gender .question {
    margin-bottom: var(--question-gender-margin-bottom);
}

#form-seekingGender .question {
    margin-bottom: var(--question-seeking-gender-margin-bottom);
}

#form-zip .question {
    margin-bottom: var(--question-zip-margin-bottom);
}

#form-age .question {
    margin-bottom: var(--question-age-margin-bottom);
}

#form-email .question {
    margin-bottom: var(--question-email-margin-bottom);
}

#form-ethnicity .question {
    margin-bottom: var(--question-ethnicity-margin-bottom);
}

#form-haveChildren .question {
    margin-bottom: var(--question-have-children-margin-bottom);
}

#form-income .question {
    margin-bottom: var(--question-income-margin-bottom);
}

#form-religion .question {
    margin-bottom: var(--question-religion-margin-bottom);
}

#form-churchInvolvement .question {
    margin-bottom: var(--question-church-involvement-margin-bottom);
}

#form-relationshipIntent .question {
    margin-bottom: var(--question-relationship-intent-margin-bottom);
}

#form-education .question {
    margin-bottom: var(--question-education-margin-bottom);
}

/* scrollbar.css */
::-webkit-scrollbar {
    width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* select.css */
/* ============================================================
   SELECT COMPONENT
   Modern select styles with custom dropdown arrow and focus states
============================================================ */

/* Base select styles */
select {
    /* Typography */
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1.125em;
    font-family: var(--font-body);

    /* Dimensions */
    height: 47px;
    width: 100%;
    max-width: 400px;
    padding: 8px 2px;
    margin: 0;
    text-indent: 4px;

    /* Borders and shape */
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    outline: none;

    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom arrow background */
    background: url("/framework/images/icons/chevron-down-black.svg") no-repeat 97% transparent;
    background-size: 10px auto;
}

/* Focus state */
select:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

/* Option styles */
option {
    font-size: 16px;
    background-color: var(--input-bg);
}

/* ============================================================
   DATE OF BIRTH LAYOUT - INLINE SIDE BY SIDE
   Three fields that ALWAYS stay side by side and fill 100%
============================================================ */

/* Container */
#form-age {
    font-size: 0; /* Remove whitespace gaps between inline elements */
    width: 100%;
}

/* Date field containers - ALWAYS inline */
.field#bmonth-input,
.field#bday-input,
.field#byear-input {
    display: inline-block !important;
    vertical-align: top;
    margin: 0;
    padding: 0;
    font-size: 1rem; /* Reset font size */
    margin-bottom: 20px;
}

/* Fill exactly 100% with gaps between */
.field#bmonth-input {
    width: 50%;
    padding-right: 4px;
}

.field#bday-input {
    width: 25%;
    padding-left: 4px;
    padding-right: 4px;
}

.field#byear-input {
    width: 25%;
    padding-left: 4px;
}

/* Make selects fill their containers minus padding */
.field#bmonth-input select,
.field#bday-input select,
.field#byear-input select {
    width: 100%;
    box-sizing: border-box;
}

/* Legacy ID support - specific widths */
#bmonth { width: 101px; }
#bday   { width: 65px; }
#byear  { width: 65px; }

/* Text field variants - same spacing */
.field#bmonth-input-text,
.field#bday-input-text,
.field#byear-input-text {
    margin-bottom: 20px;
}


/* Super specific selector with !important */
#form-age .form-body .msg,
#form-age .form-body .msg.invalid {
    font-size: var(--text-base)
}

/* ============================================================
   HIGH DPI SUPPORT
   Retina and high-resolution display optimizations
============================================================ */

/* 1.25x displays */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    select {
        background: url("/framework/images/icons/chevron-down-black.svg") no-repeat 97% transparent;
        background-size: 10px auto;
    }
}

/* 2.25x displays */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    select {
        background: url("/framework/images/icons/chevron-down-black.svg") no-repeat 97% transparent;
        background-size: 10px auto;
    }
}

/* step-images.css */
/*
!* ============================================================
   GENDER SELECTION IMAGES
   Male/Female selection buttons with images
============================================================ *!

!* Base layout for all gender forms *!
#form-gender ul,
#form-seekingGender ul {
    display: var(--step-form-gender-ul-display);
    align-items: center;
    justify-content: space-between;
}

#form-gender ul li,
#form-seekingGender ul li {
    padding: 0;
    height: var(--step-form-gender-li-height);
    width: var(--step-form-gender-li-width);
    position: relative;
}

!* Pseudo-elements contain ONLY decorative styling *!
#form-gender ul li:first-child::before,
#form-gender ul li:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: var(--image-border-radius);
    box-shadow: inset 0 0 0 0 var(--neutral-950), 0 0 0 var(--image-border-width) var(--image-border-color);
    background-color: var(--image-bg-color);
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    display: var(--gender-split-display, block);
}

#form-gender ul li:first-child::before {
    background-image: var(--gender-split-male);
    background-size: 159px 140px;
}

#form-gender ul li:last-child::before {
    background-image: var(--gender-split-female);
    background-size: 155px 140px;
}

!* High Resolution (1.25x) *!
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #form-gender ul li:first-child::before {
        background-image: var(--gender-split-male-2x);
        background-size: 159px 140px;
    }
    #form-gender ul li:last-child::before {
        background-image: var(--gender-split-female-2x);
        background-size: 126px 133px;
    }
}

!* High Resolution (2.25x) *!
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #form-gender ul li:first-child::before {
        background-image: var(--gender-split-male-3x);
        background-size: 159px 140px;
    }
    #form-gender ul li:last-child::before {
        background-image: var(--gender-split-female-3x);
        background-size: 126px 133px;
    }
}

!* ============================================================
   SEEKING GENDER IMAGES
   Male/Female seeking preference selection
============================================================ *!

!* Pseudo-elements contain ONLY decorative styling *!
#form-seekingGender ul li:first-child::before,
#form-seekingGender ul li:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: var(--image-border-radius);
    box-shadow: inset 0 0 0 0 var(--neutral-950), 0 0 0 var(--image-border-width) var(--image-border-color);
    background-color: var(--image-bg-color);
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    display: var(--seeking-gender-split-display, block);
}

#form-seekingGender ul li:first-child::before {
    background-image: var(--seeking-gender-split-male);
    background-size: 155px 137px;
}

#form-seekingGender ul li:last-child::before {
    background-image: var(--seeking-gender-split-female);
    background-size: 152px 135px;
}

!* High Resolution (1.25x) *!
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #form-seekingGender ul li:first-child::before {
        background-image: var(--seeking-gender-split-male-2x);
        background-size: 155px 137px;
    }
    #form-seekingGender ul li:last-child::before {
        background-image: var(--seeking-gender-split-female-2x);
        background-size: 152px 135px;
    }
}

!* High Resolution (2.25x) *!
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #form-seekingGender ul li:first-child::before {
        background-image: var(--seeking-gender-split-male-3x);
        background-size: 155px 137px;
    }
    #form-seekingGender ul li:last-child::before {
        background-image: var(--seeking-gender-split-female-3x);
        background-size: 152px 135px;
    }
}

@media (max-width: 320px) {
    #form-gender ul li:first-child,
    #form-gender ul li:last-child,
    #form-seekingGender ul li:first-child,
    #form-seekingGender ul li:last-child {
        width: 46%;
    }
}

!* ============================================================
   REGULAR FORM STEP IMAGES
   Images for zip, age, email, and other form steps
============================================================ *!

#form-gender .form-top,
#form-seekingGender .form-top,
#form-zip .form-top,
#form-age .form-top,
#form-email .form-top,
#form-ethnicity .form-top,
#form-haveChildren .form-top,
#form-income .form-top,
#form-religion .form-top,
#form-churchInvolvement .form-top,
#form-relationshipIntent .form-top,
#form-education .form-top {
    background: var(--image-bg-color) no-repeat center center;
    width: 100%;
    max-width: var(--image-max-width);
    aspect-ratio: var(--image-aspect-ratio);
    margin: 0 auto;
    margin-bottom: var(--image-margin-bottom);
    background-size: contain;
    display: block;
    border-radius: var(--image-border-radius);
    border: var(--image-border-width) solid var(--image-border-color);
    overflow: hidden;
    position: relative;
    !* Reset text styles since these are image containers *!
    font-size: initial;
    font-weight: initial;
}

!* Content overlay for form-top images *!
#form-gender .form-top::after,
#form-seekingGender .form-top::after,
#form-zip .form-top::after,
#form-age .form-top::after,
#form-email .form-top::after,
#form-ethnicity .form-top::after,
#form-haveChildren .form-top::after,
#form-income .form-top::after,
#form-religion .form-top::after,
#form-churchInvolvement .form-top::after,
#form-relationshipIntent .form-top::after,
#form-education .form-top::after {
    content: var(--step-image-content, '');
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--step-image-content-bg);
    color: var(--step-image-content-color);
    padding: var(--step-image-content-padding);
    border-radius: var(--step-image-content-radius);
    font-size: var(--step-image-content-font-size);
    font-weight: var(--step-image-content-font-weight);
    display: var(--step-image-content-display);
    pointer-events: none;
}

!* Individual content for each step *!
#form-gender .form-top::after {
    content: var(--step-image-gender-content, '');
}

#form-seekingGender .form-top::after {
    content: var(--step-image-seeking-gender-content, '');
}

#form-zip .form-top::after {
    content: var(--step-image-zip-content, '');
}

#form-age .form-top::after {
    content: var(--step-image-age-content, '');
}

#form-email .form-top::after {
    content: var(--step-image-email-content, '');
}

#form-ethnicity .form-top::after {
    content: var(--step-image-ethnicity-content, '');
}

#form-haveChildren .form-top::after {
    content: var(--step-image-have-children-content, '');
}

#form-income .form-top::after {
    content: var(--step-image-income-content, '');
}

#form-religion .form-top::after {
    content: var(--step-image-religion-content, '');
}

#form-churchInvolvement .form-top::after {
    content: var(--step-image-church-involvement-content, '');
}

#form-relationshipIntent .form-top::after {
    content: var(--step-image-relationship-intent-content, '');
}

#form-education .form-top::after {
    content: var(--step-image-education-content, '');
}

!* Individual step image assignments and visibility *!
#form-gender .form-top {
    display: var(--gender-display, block);
    background-image: var(--gender);
}

#form-seekingGender .form-top {
    display: var(--seeking-gender-display, block);
    background-image: var(--seeking-gender);
}

#form-zip .form-top {
    display: var(--zip-display, block);
    background-image: var(--zip);
}

#form-age .form-top {
    display: var(--age-display, block);
    background-image: var(--age);
}

#form-email .form-top {
    display: var(--email-display, block);
    background-image: var(--email);
}

#form-ethnicity .form-top {
    display: var(--ethnicity-display, block);
    background-image: var(--ethnicity);
}

#form-have-children .form-top {
    display: var(--have-children-display, block);
    background-image: var(--have-children);
}

#form-income .form-top {
    display: var(--income-display, block);
    background-image: var(--income);
}

#form-religion .form-top {
    display: var(--religion-display, block);
    background-image: var(--religion);
}

#form-churchInvolvement .form-top {
    display: var(--church-involvement-display, block);
    background-image: var(--church-involvement);
}

#form-relationshipIntent .form-top {
    display: var(--relationship-intent-display, block);
    background-image: var(--relationship-intent);
}

#form-education .form-top {
    display: var(--education-display, block);
    background-image: var(--education);
}

!* ============================================================
   MOBILE ADJUSTMENTS
   Responsive styles for smaller screens
============================================================ *!
@media (max-width: 767px) {
    #form-zip .form-top,
    #form-age .form-top,
    #form-email .form-top,
    #form-ethnicity .form-top,
    #form-haveChildren .form-top,
    #form-income .form-top,
    #form-religion .form-top,
    #form-churchInvolvement .form-top,
    #form-relationshipIntent .form-top,
    #form-education .form-top {
        max-width: var(--image-max-width-mobile);
    }
}*/


/* table.css */
table {
    border-collapse: separate;
    border-spacing: 2px;
    margin: auto;
}

/* tagline.css */
/* Tagline Component */
.tagline {
    font-family: var(--font-headings);
    font-size: var(--text-4xl);
    margin-top: 55px;
    margin-bottom: 31px;
    text-align: center;
    color: var(--neutral-900);
}

.sub-tagline {
    font-family: var(--font-body);
    color: var(--neutral-900);
    font-size: 1.15em;
    font-weight: bold;
    margin-top: 10px;
    white-space: nowrap;

}

/* Tablet and below */
@media (max-width: 900px) {
    .tagline {
        font-size: var(--text-xl); /* 1.25rem = 20px */
        margin-top: 20px;
        margin-bottom: 1rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .tagline {
        font-size: var(--text-3xl); /* 1.875rem = 30px */
        margin-top: 50px;
    }
}

/* terms.css */
.terms a {
    color: var(--primary-500);
    text-decoration: underline;
}

.terms a:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

.terms a:visited {
    color: var(--primary-400);
    text-decoration: none;
}

.terms a:visited:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

.terms a:active {
    color: var(--primary-700);
    text-decoration: none;
}


/* ============================================================
   PAGE STYLES
   Page-specific styles and overrides
============================================================ */

/* basic-index.css */
/**
 * basic-index.css
 * Refactored styles with reusable class names
 */

/* ========== HERO SECTION ========== */
.hero-section {
    height: calc(100vh - 5rem);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    position: relative;
    background-image: var(--background-bg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    box-sizing: border-box;
}

/* High resolution backgrounds */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-section {
        background-image: var(--background-bg-2x);
    }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    .hero-section {
        background-image: var(--background-bg-3x);
    }
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
}

.hero-logo {
    margin-bottom: 2rem;
}

.hero-logo img {
    max-width: 200px;
    height: auto;
}

.hero-button {
    margin-top: 2rem;
    width: 100%;
    max-width: 330px; /* Reasonable max width for button container */
    margin-left: auto;
    margin-right: auto;
}


/* ========== ICON BAR ========== */
.icon-bar {
    width: 100%;
    height: 5rem;
    background: var(--primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.icon-bar svg {
    width: 60px;
    height: 60px;
    color: var(--primary-50);
}

/* ========== INTRO SECTION ========== */
.intro-section {
    background: var(--primary-100);
}

/* ========== TWO COLUMN LAYOUT ========== */
.two-column {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .two-column {
        grid-template-columns: 1fr 1fr;
    }
}

.left-column,
.right-column {
    padding: 3rem 2rem;
    position: relative;
    background: var(--primary-100);
}

/* Vertical divider on desktop */
.right-column::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 2px;
    background: var(--primary-500);
}

/* Horizontal divider on mobile */
@media (max-width: 767px) {
    .right-column::before {
        left: 10%;
        right: 10%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 2px;
    }
}

/* ========== FEATURES SECTION ========== */
.features-section {
    background: var(--neutral-100);
    padding: 4rem 1rem;
}

.features-section h2 {
    text-align: center;
    color: var(--primary-900);
    margin-bottom: 1rem;
}

.features-section p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
    color: var(--neutral-700);
}

/* ========== ICON BLOCKS ========== */
.icon-blocks {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .icon-blocks {
        flex-direction: row;
        justify-content: space-between;
    }
}

.icon-block {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    flex: 1;
}

.icon-block-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-100);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--primary-700);
}

.icon-block-icon svg {
    width: 40px;
    height: 40px;
}

.icon-block h3 {
    color: var(--primary-800);
    margin-bottom: 1rem;
    font-size: var(--text-xl);
}

.icon-block p {
    color: var(--neutral-700);
    line-height: 1.6;
}

/* ========== CLOSING SECTION ========== */
.closing-section {
    background: var(--neutral-50);
    padding: 4rem 0;
}

.closing-section > * {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.closing-section h2 {
    color: var(--primary-900);
    margin-bottom: 2rem;
}

.closing-section p {
    color: var(--neutral-700);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 767px) {

    .features-section {
        padding: 3rem 1rem;
    }

    .icon-block {
        padding: 1.5rem;
    }
}

/* app-install.css */
/* ============================================================
   APP INSTALL REDIRECT PAGE
   Styles for app-install.php using framework variables
============================================================ */

body.app-install-page {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--neutral-50);
    min-height: 100vh;
}

.app-install-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content */
.redirect-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
}

.redirect-container {
    text-align: center;
    max-width: 500px;
    width: 90%;
    padding: var(--space-8);
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.message {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.app-name {
    font-family: var(--font-strong);
    color: var(--primary-700);
}

.store-name {
    font-family: var(--font-strong);
}

.loading-bar {
    width: 100%;
    height: 8px;
    background-color: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.loading-progress {
    height: 100%;
    background-color: var(--primary-500);
    border-radius: var(--radius-full);
    animation: loading 1.5s ease-out forwards;
    position: relative;
}

/* Shimmer effect on the progress bar */
.loading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
    );
    animation: shimmer 1s infinite;
}

@keyframes loading {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@keyframes shimmer {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {

    .redirect-content {
        padding: var(--space-6) var(--space-4);
    }

    .redirect-container {
        padding: var(--space-6);
    }

    .message {
        font-size: var(--text-base);
    }
}

/* login.css */
.login .form-body .logo {
    margin: 10px auto;
    width: 330px;
    background: #fff;
    border: var(--global-border-width) solid var(--input-border);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--global-border-radius);
}

.login .form-body .logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60px;
}

.login .form-body .logo {
    margin-bottom: 30px;
}

.login.form {
    height: 540px;
}
.login.form .form-top {
    font-size: 2.25em;
    font-family: "Lato-Bold","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 400px;
}

@media (max-width: 480px) {
    .login.form .form-top {
        width: 95%;
    }
}

.login.form .form-top .sub {
    font-size: 20px;
    margin-top: 10px;
    font-family: "Lato-Regular","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.login.form .form-body .info {
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    .login .form-body {
        width: 87%;
    }
    .login .form-body .logo {
        width: 100%;
    }

    .login.form .form-top {
        font-size: 29px;
    }

    .login.form .form-top .sub {
        font-size: 18px;
    }
}



/* offer-apps.css */
/* ============================================================
   OFFER APPS STYLES
   Styles for offer-apps.php using existing CSS variables
============================================================ */

/* Main container */
.form.apps-choice {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-5);
    font-family: var(--font-body);
}

/* Header section - specific to apps-choice */
.form.apps-choice .form-top {
    text-align: center;
    margin-bottom: var(--space-3);
    /* Style like h1 */
    font-family: var(--font-headings);
    font-size: var(--text-4xl);
    line-height: 1.1;
    color: var(--neutral-900);
}

.form.apps-choice .form-top .sub {
    /* Style like h5 */
    font-family: var(--font-headings);
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--neutral-700);
    margin-top: var(--space-3);
    font-weight: normal;
}

/* Results separator - same height as error */
.form.apps-choice .results-separator {
    height: var(--space-2); /* Same as app_error */
    background-color: transparent; /* or use var(--neutral-200) for a line */
    margin: 0;
}

/* App results container */
#appResults,
.apps-choice.result {
    /* No background or padding - cards take full width */
}

/* Force column layout for app results */
.apps-choice.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Individual app container */
.app {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition-default);
    border: 1px solid var(--neutral-200);
    width: 100%;
    max-width: 500px;
}

.app:hover {
    box-shadow: var(--shadow-md);
}

.app:last-child {
    margin-bottom: 0;
}

/* App layout - Line 1 */
.app .line-1 {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

/* App logo */
.app-logo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    margin-right: var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--neutral-100);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific app logos */
.app-logo.match {
    background: url("../images/apps/match@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.jigsaw {
    background: url("../images/apps/jigsaw@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.blackpeoplemeet {
    background: url("../images/apps/blackpeoplemeet@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.eharmony {
    background: url("../images/apps/eharmony@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.pof {
    background: url("../images/apps/pof@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.elitesingles {
    background: url("../images/apps/elitesingles@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.friended {
    background: url("../images/apps/friended@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.ourtime {
    background: url("../images/apps/ourtime@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.edate {
    background: url("../images/apps/edate@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.rsvp {
    background: url("../images/apps/rsvp@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.silversingles {
    background: url("../images/apps/silversingles@3x.png") center center no-repeat;
    background-size: contain;
}

.app-logo.zoosk {
    background: url("../images/apps/zoosk@3x.png") center center no-repeat;
    background-size: contain;
}

/* App description */
.app .description {
    flex: 1;
}

.app .description h3 {
    margin: 0 0 var(--space-2) 0;
}

.app .description p {
    margin: 0;
    color: var(--neutral-600);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* App layout - Line 2 */
.app .line-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Rating */
.app .rating {
    display: flex;
    align-items: center;
    color: var(--primary-600);
    font-size: var(--text-sm);
}

.app .rating::before {
    content: "★★★★★";
    letter-spacing: 2px;
    margin-right: var(--space-2);
}

/* App links and button */
.apps-links button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: var(--button-border-width) var(--button-border-style) var(--button-border);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--button-radius);
    font-size: var(--button-font-size);
    font-family: var(--font-button);
    font-weight: normal;
    cursor: pointer;
    transition: all var(--transition-default);
    box-shadow: var(--button-shadow);
    max-width: 180px; /* Constrain button width */
}

.apps-links button:hover {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

.apps-links button:active {
    background-color: var(--button-bg-active);
    box-shadow: var(--button-shadow-active);
}

/* Separator between apps (hidden by default) */
.app .separator {
    display: none;
}

/* Error messages - text styling only */
.app_error {
    color: var(--failure-700);
    text-align: center;
    height: var(--space-2); /* Same as app_error */
    font-weight: 500;
}

/* No apps found message */
#appResults:empty::after {
    content: "Loading apps...";
    display: block;
    text-align: center;
    color: var(--neutral-500);
    font-style: italic;
}

/* Desktop specific styles */
.qrcode-container.desktop {
    background-color: var(--neutral-50);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.results-info {
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--neutral-600);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.result-options {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-8);
}

.qrcode,
.phone-number {
    text-align: center;
}

.qrcode h1,
.phone-number h1 {
    margin-bottom: var(--space-5);
}

#qrcode {
    padding: var(--space-5);
    background-color: var(--white);
    border-radius: var(--radius-lg);
    display: inline-block;
    box-shadow: var(--shadow);
}

/* Options separator */
.options-separator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.vertical-line {
    width: 1px;
    height: 100px;
    background-color: var(--neutral-300);
}

.or-text {
    color: var(--neutral-500);
    font-weight: 500;
}

/* Phone form */
.phone-number form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.phone-number input[type="text"] {
    padding: var(--space-3) var(--space-4);
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background-color: var(--input-bg);
    color: var(--input-text);
}

.phone-number input[type="text"]:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

.phone-number button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: var(--button-border-width) var(--button-border-style) var(--button-border);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--button-radius);
    font-size: var(--button-font-size);
    font-family: var(--font-button);
    cursor: pointer;
    transition: all var(--transition-default);
    box-shadow: var(--button-shadow);
}

.phone-number button:hover {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

.phone-number .success {
    color: var(--success-700);
    margin-bottom: var(--space-3);
}

.phone-number .error {
    color: var(--failure-700);
    margin-bottom: var(--space-3);
}

/* Dynamic app form */
#form.apps-choice {
    max-width: 600px;
    margin: 0 auto;
}

#form.apps-choice .form-element {
    margin-bottom: var(--space-5);
}

#form.apps-choice label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--neutral-700);
    font-weight: 500;
}

#form.apps-choice select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background-color: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
}

#form.apps-choice select:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

/* Hidden template */
.app-template.hidden {
    display: none;
}

/* Responsive design */
@media (max-width: 767px) {
    .form.apps-choice {
        padding: var(--space-4);
    }

    .app {
        padding: var(--space-4);
    }

    .app-logo {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .app .description h3 {
        font-size: var(--text-lg);
    }

    .apps-links button {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    .result-options {
        flex-direction: column;
        gap: var(--space-6);
    }

    .vertical-line {
        width: 100px;
        height: 1px;
    }

    .options-separator {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
}

/* Animation for pulse effect (if needed) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* offer-matchmaking.css */
/* ============================================================
   OFFER MATCHMAKING PAGE
   Layout and spacing for matchmaking form
============================================================ */

/* Main wrapper */
.matchmaking.form {
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: 36px;
    margin-bottom: 4rem; /* Increased from 3rem */
    padding: 0 1rem 2rem; /* Added bottom padding */
}

/* Content wrapper */
.matchmaking-content {
    width: 100%;
}

/* Headings - already styled by typography */
.matchmaking h2 {
    margin-bottom: 1rem;
    background-color: var(--primary-600);
    color: var(--primary-100);
    padding: 0.25rem .5rem; /* Extended padding for highlight effect */
    border-radius: var(--global-border-radius);
}

.matchmaking h3 {
    margin-bottom: 2rem;
}

/* List container */
.mm-list {
    margin: 0 auto 2.5rem;
    max-width: 380px;
}

.mm-list ol {
    margin: 0;
    padding-left: 1.5rem;
    text-align: left;
}

.mm-list li {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Description text */
.description {
    font-size: var(--text-sm);
    text-align: center;
    line-height: 1.6;
}

/* Form container */
.form-container {
    width: 100%;
    /* Removed margin-bottom that might be causing gap */
}

/* Error messages */
.mm-error {
    margin-bottom: 1.5rem;
    color: var(--failure-600);
}

/* Form field containers */
.mm-box {
    margin-bottom: 1.25rem; /* Reduced from 2rem */
    text-align: left;
}

/* Labels - USE HEADING FONT */
.mm-label {
    display: block;
    margin-bottom: 0.75rem;
    text-align: left;
    font-family: var(--font-headings);
    font-size: var(--text-xl);
}

/* Input wrapper */
.mm-input {
    width: 100%;
}

.mm-input input {
    width: 100%;
    max-width: 100%;
}

/* Continue text */
.continue {
    margin: 0 0 1rem; /* Reduced from 2.5rem 0 2rem */
    line-height: 1.6;
}

/* Button containers */
.mm-button-container {
    margin-bottom: 1rem;
}

.mm-button-container button {
    width: 100%;
    max-width: 350px;
}

/* Premium disclaimer */
.premium {
    margin-top: 1.5rem;
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* ============================================================
   MOBILE RESPONSIVE
============================================================ */

@media (max-width: 768px) {
    .matchmaking.form {
        padding: 1rem 1.25rem 2rem; /* Added vertical padding */
        margin-top: 24px; /* Reduced from 36px */
        margin-bottom: 2rem; /* Less margin on mobile */
    }

    /* Tighter spacing on mobile */
    .mm-box {
        margin-bottom: .5rem; /* Even tighter on mobile */
    }

    .mm-label {
        margin-bottom: 0.5rem;
    }

    .mm-box:first-child {
        margin-top: -0.5rem; /* Pull first name field up more */
    }

    .continue {
        margin: 0 0 1.25rem; /* Removed top margin */
    }

    .mm-button-container {
        margin-bottom: 0.75rem; /* Reduced from 1rem */
    }

    .premium {
        margin-top: .5rem;
    }
}

@media (max-width: 480px) {
    .matchmaking.form {
        padding: 0 1.125rem;
        max-width: 100%;
    }

    .mm-list {
        max-width: 100%;
    }

    .mm-button-container button {
        max-width: 100%;
    }
}

/* offer-onlinedating.css */
/* ============================================================
   OFFER ONLINE DATING - Cleaned up from existing file
   Proper flexbox, consistent spacing, mobile-first
============================================================ */

/* ============================================================
   MAIN WRAPPER
============================================================ */
.offer.form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto; /* Keep margin auto for centering */
}

/* ============================================================
   FORM SECTIONS
============================================================ */

/* Form top - header text */
.offer.form .form-top {
    width: 100%;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1rem; /* 16px base instead of 15px */
    font-weight: bold;
    line-height: 1.2;
}

/* Form body - main content container */
.offer.form .form-body {
    width: 100%;
    padding-bottom: 5rem; /* Increased from 3rem for more breathing room */
}

/* ============================================================
   RESULTS SECTION
============================================================ */


/* Info text - "We've found 1000's..." */
.offer .form-body .info {
    margin: 0 auto .25rem; /* Consistent rem units */
    font-size: var(--text-3xl);
    font-family: var(--font-headings);
    text-align: center;
}

/* Message text - "Continue to see..." */
.offer .form-body .message {
    font-size: 1rem;
    margin-bottom: 1.5rem; /* Space before logo */
    text-align: center;
}

/* ============================================================
   LOGO SECTION
============================================================ */
.offer .form-body .logo {
    width: 100%;
    max-width: 330px;
    height: 100px;
    margin: 0 auto ; /* Consistent spacing */
    padding: 1rem;
    background: var(--white);
    border: var(--global-border-width) solid var(--input-border);
    border-radius: var(--global-border-radius);

    /* Center logo image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer .form-body .logo img {
    width: auto;
    height: auto;
    max-width: 90%; /* Slight padding from edges */
    max-height: 60px;
}

/* ============================================================
   FORM FIELDS
============================================================ */

/* Field labels */
.offer .label {
    font-size: 1.25rem; /* Keep existing size */
    margin-bottom: 0.5rem; /* Convert 6px to rem */
    text-align: center;
    display: block;
}

/* Field containers */
.offer.form .field {
    display: block;
}

/* Two-column field layout */
.offer .form-body .field-row {
    display: flex;
    gap: 2%; /* Use gap instead of margins */
    width: 100%;
    max-width: 274px; /* Keep existing max-width */
    margin: 0 auto;
}

.offer .form-body .field-left,
.offer .form-body .field-right {
    flex: 1;
    /* Removed individual margins - using gap instead */
}

/* ============================================================
   BUTTON & TERMS
============================================================ */

/* Submit button */
.offer.form button {
    margin-top: 1rem;
    /* Button width handled by button.css */
}

/* Terms text */
.offer.form .terms {
    margin: 1rem auto 0;
    font-size: 0.75rem; /* 12px */
    text-align: center;
    line-height: 1.4; /* Better readability */
}

/* Disclaimer text */
.offer .form-body .disclaimer {
    font-size: 0.75rem; /* 12px */
    text-align: center;
    margin-top: 0.5rem;
}

/* ============================================================
   RESPONSIVE
============================================================ */

/* Mobile adjustments */
@media (max-width: 480px) {
    .offer.form {
        width: 90%; /* Move the width constraint to the parent */
        max-width: none; /* Remove max-width on mobile */
    }

    .offer.form .form-body {
        padding-bottom: 10rem; /* Extra space on mobile */
    }

    .offer .form-body .logo {
        width: 100%;
    }

    /* Stack two-column fields on mobile */
    .offer .form-body .field-row {
        flex-direction: column;
        gap: 1rem;
        max-width: 100%;
    }
}

/* Tablet adjustments */
@media (max-width: 800px) {
    .offer.form .terms {
        width: 95%; /* Better than 99% */
        margin: 1rem auto;
    }
}

/* optout.css */
/**
 * optout.css
 * Styles for email opt-out form pages
 * Updated to follow the same structure as step.css
 */

/* Main wrapper - controls max width */
.optout.form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

/* Form sections - matching step.css structure */
.optout .form-top {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
    /* Currently hidden but keeping structure for potential future use */
    display: none;
}

.optout .form-body {
    width: 100%;
    text-align: center;
    padding-bottom: 3rem; /* Spacing before footer */
}

/* Hide form-bottom - using padding instead */
.optout .form-bottom {
    display: none;
}

/* Question/message area */
.optout.form .question {
    margin: 0 auto 1.5rem;
    width: 100%;
    max-width: 330px;
}

/* Success message sub text */
.optout.form .question .sub {
    font-size: 14px;
    margin-top: 10px;
    color: var(--neutral-600);
}

/* Form fields */
.optout.form .label {
    margin-bottom: 0.5rem;
    font-weight: var(--font-semibold);
}

.optout.form .field {
    margin-bottom: 1rem;
}

/* Disclaimer text */
.optout.form .disclaimer {
    font-size: 14px;
    width: 100%;
    max-width: 330px;
    margin: -0.5rem auto 1.5rem;
    color: var(--neutral-600);
}

/* Message box - layout only, visual styles should come from msg.css */
.optout.form .msg {
    width: 100%;
    max-width: 330px;
    margin: 0 auto 1rem;
    text-align: left;
}

/* Button container */
.optout.form .button {
    margin-top: 1.5rem;
}

/* Responsive - matching step.css breakpoints */
@media (max-width: 768px) {
    .optout.form {
        padding: 2rem 1rem;
    }

    .optout .form-body {
        padding-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .optout.form .form-body {
        width: 90%;
        margin: 0 auto;
    }

    .optout.form .question,
    .optout.form .disclaimer {
        width: 100%;
    }

    .optout.form .msg {
        text-align: center;
    }
}

/* step.css */
/**
 * step.css
 * Styles for multi-step form pages
 * Uses existing selectors and consolidates scattered styles
 */

/* Main wrapper - controls max width */
.step.form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: var(--step-form-padding);
    border: var(--step-form-border-width) solid var(--step-form-border);
    border-radius: var(--step-form-border-radius);
    background-color: var(--step-form-background-color);
    box-shadow: var(--step-form-shadow);
    margin-bottom: 24px;
}

#form-gender .step.form {
    margin-top: var(--step-form-gender-margin-top);
}

#form-seekingGender .step.form {
    margin-top: var(--step-form-seeking-gender-margin-top);
}

#form-zip .step.form {
    margin-top: var(--step-form-zip-margin-top);
}

#form-age .step.form {
    margin-top: var(--step-form-age-margin-top);
}

#form-email .step.form {
    margin-top: var(--step-form-email-margin-top);
}

#form-ethnicity .step.form {
    margin-top: var(--step-form-ethnicity-margin-top);
}

#form-haveChildren .step.form {
    margin-top: var(--step-form-have-children-margin-top);
}

#form-income .step.form {
    margin-top: var(--step-form-income-margin-top);
}

#form-religion .step.form {
    margin-top: var(--step-form-religion-margin-top);
}

#form-churchInvolvement .step.form {
    margin-top: var(--step-form-church-involvement-margin-top);
}

#form-relationshipIntent .step.form {
    margin-top: var(--step-form-relationship-intent-margin-top);
}

#form-education .step.form {
    margin-top: var(--step-form-education-margin-top);
}


.step .form-body {
    width: 100%;
    text-align: center;
}

/* Hide form-bottom - using padding instead */
.step .form-bottom {
    display: none;
}

/* Message box - layout only, visual styles in msg.css */
.step.form .msg, .offer .form-body .msg {
    margin: 0 auto 10px;
}

.step.form .msg {
    width: 330px;
    text-align: left;
}

/* Lists for option buttons */
.step.form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step.form li {
    margin: 0 0 14px;
}

.step.form li:last-child {
    padding-bottom: 16px;
}

/* Navigation */
.step .navigation {
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-align: center;
}

.step .navigation .arrow {
    float: left;
    width: 10px;
    height: 16px;
}

.step .navigation-text {
    float: left;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
    margin: -1px 3px;
}

.question .sub {
    font-size: 14px;
    margin-top: 10px;
}

#form-email .question .sub {
    position: absolute;
    margin-top: 92px;
    width: 330px;
    text-align: center;
    left: 50%;
    margin-left: -165px;
}

#form-email .button {
    margin-top: 47px;
}


/* Responsive */
@media (max-width: 768px) {
    .step.form {
        padding: var(--step-form-padding-mobile);
        max-width: var(--step-form-max-width-mobile);

    }

    #form-gender .step.form {
        margin-top: var(--step-form-gender-margin-top-mobile);
    }

    #form-seekingGender .step.form {
        margin-top: var(--step-form-seeking-gender-margin-top-mobile);
    }

    #form-zip .step.form {
        margin-top: var(--step-form-zip-margin-top-mobile);
    }

    #form-age .step.form {
        margin-top: var(--step-form-age-margin-top-mobile);
    }

    #form-email .step.form {
        margin-top: var(--step-form-email-margin-top-mobile);
    }

    #form-ethnicity .step.form {
        margin-top: var(--step-form-ethnicity-margin-top-mobile);
    }

    #form-haveChildren .step.form {
        margin-top: var(--step-form-have-children-margin-top-mobile);
    }

    #form-income .step.form {
        margin-top: var(--step-form-income-margin-top-mobile);
    }

    #form-religion .step.form {
        margin-top: var(--step-form-religion-margin-top-mobile);
    }

    #form-churchInvolvement .step.form {
        margin-top: var(--step-form-church-involvement-margin-top-mobile);
    }

    #form-relationshipIntent .step.form {
        margin-top: var(--step-form-relationship-intent-margin-top-mobile);
    }

    #form-education .step.form {
        margin-top: var(--step-form-education-margin-top-mobile);
    }
}

@media (max-width: 480px) {
    .step.form .msg {
        text-align: center;
    }

    .form-body .field {
        width: 100%;
    }

    #form-email .question .sub {
        width: 90%;
        margin-left: -45%;
    }
}


/* ============================================================
   ARCHIVE STYLES
   Legacy and miscellaneous styles
============================================================ */

/* archive.css */
.form-body .field {
	padding-bottom: 20px;
}

.question .sub {
	font-size: 14px;
	margin-top: 10px;
}

#form-email .question .sub {
	position: absolute;
	margin-top: 92px;
	width: 330px;
	text-align: center;
	left: 50%;
	margin-left: -165px;
}

#form-email .button {
	margin-top: 47px ;
}

a {color:#fefefe; text-decoration:none;}
a:hover {color:#fefefe; text-decoration:underline;}
a:visited {color:#fefefe; text-decoration:none;}
a:visited:hover {color:#fefefe; text-decoration:underline;}
a:active {color:#fefefe; text-decoration:underline;}




/* ============================================================
   RESPONSIVE STYLES
   Media queries and responsive overrides
============================================================ */

/* responsive.css */