/* ============================================================
   GENERATED CSS FILE
   Generated on: 2025-07-20 12:17:55 CDT
   Version: leadthink-version-two
   Index Style: why-how-index
   Primary Palette: tailwind-violet
   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-violet */
:root {
    --primary-50:  #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;
    --primary-950: #2e1065;
}

/* 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-border-width: 1px;
    --global-border-style: solid;
    --global-border-radius: var(--radius-lg);
}

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

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

    /* Button component */
    --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-neobrute-20);
    --button-shadow-active: var(--shadow-neobrute-20);
    --button-radius: var(--radius-full);
    --button-font-size: var(--text-lg);

    /* Input component */
    --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);

    /* Image component */
    --image-bg-color: var(--primary-50);
    --image-border-width: var(--global-border-width);
    --image-border-color: var(--primary-500);
    --image-border-radius: var(--global-border-radius);
    --image-max-width: 320px;
    --image-aspect-ratio: 4 / 3;
    --image-margin-bottom: 24px;
    --image-background-size: contain;
    --image-display: block;

    /* Step-background component */
    --step-background-size: contain;
    --step-background-position: center;
    --step-background-repeat: repeat;
    --step-background-attachment: scroll;
    --step-background-color: transparent;

    /* Header component */
    --header-notification-display: block;
    --header-height: 60px;
    --header-notification-height: 36px;
    --header-height-mobile: 50px;
    --header-notification-height-mobile: 32px;
    --header-bg: var(--white);
    --header-border-width: 1;
    --header-border-color: var(--neutral-200);
    --header-shadow: var(--shadow-sm);
    --header-max-width: 900px;
    --header-logo-width: 200px;
    --header-logo-width-mobile: 160px;
    --header-container-justify: flex-start;
    --header-container-align: center;
    --header-notification-bg: var(--primary-100);
    --header-notification-text: var(--primary-900);
    --header-notification-border: var(--primary-200);

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

    /* Highlight component */
    --highlight-bg-color: var(--primary-100);

}

/* ============================================================
   IMAGE VARIABLES
   CSS custom properties for images
============================================================ */

:root {
    --logo: url('/images/logo.svg');
    --hero-image: url('/framework/images/couple/man-woman-coffee-shop-landscape-0002.png');
    /* Icons */
    --icons-why-1-content: '👆';
    --icons-why-2-content: '🎯';
    --icons-why-3-content: '❤️';

    /* StepBackground */
    --step-background-display: block;
    --step-background-bg: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001.jpg');
    --step-background-bg-2x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-2x.jpg');
    --step-background-bg-3x: url('/framework/images/backgrounds/mixed-gender-tile-light-landscape-0001-3x.jpg');

    /* Gender */
    --gender-display: block;
    --gender-male: url('/framework/images/men/smiling-man-transparent-square-0001.png');
    --gender-male-2x: url('/framework/images/men/smiling-man-transparent-square-0001-2x.png');
    --gender-male-3x: url('/framework/images/men/smiling-man-transparent-square-0001-3x.png');
    --gender-female: url('/framework/images/women/smiling-woman-transparent-square-0001.png');
    --gender-female-2x: url('/framework/images/women/smiling-woman-transparent-square-0001-2x.png');
    --gender-female-3x: url('/framework/images/women/smiling-woman-transparent-square-0001-3x.png');

    /* SeekingGender */
    --seeking-gender-display: block;
    --seeking-gender-male: url('/framework/images/men/smiling-man-transparent-square-0002.png');
    --seeking-gender-male-2x: url('/framework/images/men/smiling-man-transparent-square-0002-2x.png');
    --seeking-gender-male-3x: url('/framework/images/men/smiling-man-transparent-square-0002-3x.png');
    --seeking-gender-female: url('/framework/images/women/smiling-woman-transparent-square-0002.png');
    --seeking-gender-female-2x: url('/framework/images/women/smiling-woman-transparent-square-0002-2x.png');
    --seeking-gender-female-3x: url('/framework/images/women/smiling-woman-transparent-square-0002-3x.png');

    /* Zip */
    --zip-display: block;
    --zip: url('/framework/images/nature/beach-at-sunset-landscape-0001.png');

    /* Age */
    --age-display: block;
    --age: url('/framework/images/couple/man-woman-hiking-sunset-landscape-0001.png');

    /* Email */
    --email-display: block;
    --email: url('/framework/images/women/woman-opening-email-landscape-0001.png');

    /* Ethnicity */
    --ethnicity-display: block;
    --ethnicity: url('/framework/images/activity/people-holding-up-arms-landscape-0001.png');

    /* HaveChildren */
    --have-children-display: block;
    --have-children: url('/framework/images/activity/children-on-playground-landscape-0001.png');

    /* Income */
    --income-display: block;
    --income: url('/framework/images/scenes/man-walking-into-bank-0001.png');

    /* Religion */
    --religion-display: block;
    --religion: url('/framework/images/christian/bible-on-table-landscape-0001.png');

    /* ChurchInvolvement */
    --church-involvement-display: block;
    --church-involvement: url('/framework/images/christian/church-spire-with-sun-landscape-0001.png');

    /* RelationshipIntent */
    --relationship-intent-display: block;
    --relationship-intent: url('/framework/images/couple/man-woman-beach-sunset-landscape-0001.png');

    /* Education */
    --education-display: block;
    --education: url('/framework/images/scenes/inside-bright-classroom-landscape-0001.png');

}

/*======================================
 * 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: 'NotoSerif-Regular';
    src: url('/framework/fonts/noto-serif/NotoSerif-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'NotoSerif-Bold';
    src: url('/framework/fonts/noto-serif/NotoSerif-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'NotoSerif-Black';
    src: url('/framework/fonts/noto-serif/NotoSerif-Black.ttf') format('truetype');
}

:root {
    /* Font families */
    --font-color: 'neutral-950', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'NotoSerif-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-headings: 'NotoSerif-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-paragraph: 'NotoSerif-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-strong: 'NotoSerif-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-button: 'NotoSerif-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-color: var(--highlight-bg-color);
    padding: 0 8px;
    display: inline-block;
}

/* Animated gradient text fill */
.highlight-v2 {
    background: linear-gradient(
            270deg,
            var(--primary-400),
            var(--primary-600),
            var(--primary-500)
    );
    background-size: 400% 400%;
    animation: gradientShift 4s linear infinite;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 700;
    padding: 0;
    display: inline;
}

@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-radius: var(--button-radius);
    border: 1px 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: 127px;
}

#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;
}

/* container.css */
.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

/* 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;
    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;
}

/* msg.css */
/* error section */
.msg {
    color: var(--failure-500);
    font-family: var(--font-strong);
    font-size: var(--font-md);
    height: var(--text-base);
    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 {
    width: 270px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto 36px auto;
}

/* 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 */
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.125em;
    font-family: var(--font-body);

    /* Dimensions */
    height: 47px;
    width: 272px;
    max-width: 100%;
    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% #ffffff;
    background-size: 10px auto;
}

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

/* Option styles */
option {
    font-size: 16px;
}

/* ============================================================
   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;
}

/* ============================================================
   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% #ffffff;
        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% #ffffff;
        background-size: 10px auto;
    }
}

/* step-images.css */
/**
 * step-images.css
 * Static CSS for form step images and backgrounds
 * Controls visibility via CSS variables with display property
 */

/* ============================================================
   STEP FORM BACKGROUND
   Background styles for the step form container
============================================================ */
.container {
    background-image: var(--step-background-bg);
    background-repeat: var(--step-background-repeat, repeat);
    background-size: var(--step-background-size, contain);
    background-position: var(--step-background-position, center);
    background-attachment: var(--step-background-attachment, scroll);
    background-color: var(--step-background-color, transparent);
}

/* ============================================================
   GENDER SELECTION IMAGES
   Male/Female selection buttons with images
============================================================ */
#form-gender ul li:first-child,
#form-gender ul li:last-child {
    display: var(--gender-display, block);
    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);
}

#form-gender ul li:first-child {
    background: var(--gender-male) no-repeat center center var(--image-bg-color);
    background-size: 159px 140px;
}

#form-gender ul li:last-child {
    background: var(--gender-female) no-repeat center center var(--image-bg-color);
    background-size: 155px 140px;
}

/* Gender/Seeking Gender Form Layouts */
#form-gender ul,
#form-seekingGender ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#form-gender ul li,
#form-seekingGender ul li {
    padding: 0;
    height: 140px;
    width: 159px;
    position: relative;
}

/* 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 {
        background: var(--gender-male-2x) no-repeat center center var(--image-bg-color);
        background-size: 159px 140px;
    }
    #form-gender ul li:last-child {
        background: var(--gender-female-2x) no-repeat center center var(--image-bg-color);
        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 {
        background: var(--gender-male-3x) no-repeat center center var(--image-bg-color);
        background-size: 159px 140px;
    }
    #form-gender ul li:last-child {
        background: var(--gender-female-3x) no-repeat center center var(--image-bg-color);
        background-size: 126px 133px;
    }
}

/* ============================================================
   SEEKING GENDER IMAGES
   Male/Female seeking preference selection
============================================================ */
#form-seekingGender ul li:first-child,
#form-seekingGender ul li:last-child {
    display: var(--seeking-gender-display, block);
    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);
}

#form-seekingGender ul li:first-child {
    background: var(--seeking-gender-male) no-repeat center center var(--image-bg-color);
    background-size: 155px 137px;
}

#form-seekingGender ul li:last-child {
    background: var(--seeking-gender-female) no-repeat center center var(--image-bg-color);
    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 {
        background: var(--seeking-gender-male-2x) no-repeat center center var(--image-bg-color);
        background-size: 155px 137px;
    }
    #form-seekingGender ul li:last-child {
        background: var(--seeking-gender-female-2x) no-repeat center center var(--image-bg-color);
        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 {
        background: var(--seeking-gender-male-3x) no-repeat center center var(--image-bg-color);
        background-size: 155px 137px;
    }
    #form-seekingGender ul li:last-child {
        background: var(--seeking-gender-female-3x) no-repeat center center var(--image-bg-color);
        background-size: 152px 135px;
    }
}

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

    #form-gender ul li:last-child {
        width: 46%;
    }

    #form-seekingGender ul li:first-child {
        width: 46%;
    }

    #form-seekingGender ul li:last-child {
        width: 46%;
    }
}

/* ============================================================
   REGULAR FORM STEP IMAGES
   Images for zip, age, email, and other form steps
============================================================ */
#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: 320px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    margin-bottom: 24px;
    background-size: contain;
    display: block;
    border-radius: var(--image-border-radius);
    border: var(--image-border-width) solid var(--image-border-color);
    overflow: hidden;
    /* Reset text styles since these are image containers */
    font-size: initial;
    font-weight: initial;
}

/* Individual step image assignments and visibility */
#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: 280px;
    }
}

/* 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
============================================================ */


/* Index Page Style Overrides */
:root {
    /* Hero image */
    --hero-image-border-radius: var(--radius-lg);
    --hero-image-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --hero-image-border-width: 1px;
    --hero-image-border-color: var(--primary-500);
    --hero-image-aspect-ratio: 4 / 3;
    --hero-image-max-width: 100%;

    /* Hero section */
    --hero-section-bg-color: body-bg-color;

    /* Why section */
    --why-section-bg-color: body-bg-color;

    /* How section */
    --how-section-bg-color: body-bg-color;

    /* Icon block */
    --icon-block-bg-color: var(--white);
    --icon-block-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --icon-block-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* How icon */
    --how-icon-bg-color: var(--primary-100);
    --how-icon-text-color: var(--neutral-900);

    /* Hero content */
    --hero-content-text-color: body-bg-color;

    /* Icon block title */
    --icon-block-title-text-color: body-bg-color;

    /* Icon block text */
    --icon-block-text-text-color: body-bg-color;

    /* Section intro */
    --section-intro-text-color: body-bg-color;

    /* Hero image border */
    --hero-image-border-border-color: var(--primary-500);

}

/* why-how-index.css */
/**
 * why-how-index.css
 * Styles for why-how index template
 */

/* ========== HERO SECTION ========== */
.hero-section {
    padding: 60px 0;
    background: var(--hero-section-bg-color);
}

.hero-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-content {
    flex: 1;
    min-width: 0;
}

.hero-content h1 {
    /* Using semantic defaults from typography.css */
    margin: 0 0 20px 0;
}

.hero-content p {
    /* Using semantic defaults from typography.css */
    color: var(--hero-content-text-color);
    margin: 0 0 30px 0;
}

.hero-button {
    margin: 0;
}

.hero-button .buttonized {
    width: 100%;
    max-width: 330px;
    margin: 0;
}

.hero-image {
    flex: 1 1 400px;  /* Allow it to grow/shrink with 400px base */
    width: 100%;  /* Fill container width */
    max-width: 400px;  /* But never exceed 400px */
    aspect-ratio: var(--hero-image-aspect-ratio);  /* Configurable aspect ratio */
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--hero-image-border-radius);
    box-shadow: var(--hero-image-shadow);
    border: var(--hero-image-border-width) solid var(--hero-image-border-color);
}

/* ========== SECTION STYLES ========== */
.why-section,
.how-section {
    padding: 60px 0;
}

.why-section {
    background: var(--why-section-bg-color);
}

.how-section {
    background: var(--how-section-bg-color);
}

.why-section h2,
.how-section h2 {
    text-align: center;
    /* Using semantic defaults from typography.css */
    margin: 0 0 40px 0;
}

/* Features intro paragraph */
.features-section p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    /* Using semantic defaults from typography.css */
    color: var(--section-intro-text-color);
}

/* ========== ICON BLOCKS ========== */
.icon-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    justify-content: center;
}

.icon-block {
    flex: 1 1 250px;
    max-width: 280px;
    background: var(--icon-block-bg-color);
    border-radius: 8px;
    padding: 30px 24px;
    box-shadow: var(--icon-block-shadow);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--icon-block-shadow-hover);
}

/* Why section icons - no background */
.why-section .icon-block-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 32px;
}

/* Why section icon mappings */
[data-icon="why-1"] {
    background-image: var(--icons-why-1-bg-image);
}

[data-icon="why-1"]::before {
    content: var(--icons-why-1-content);
}

[data-icon="why-2"] {
    background-image: var(--icons-why-2-bg-image);
}

[data-icon="why-2"]::before {
    content: var(--icons-why-2-content);
}

[data-icon="why-3"] {
    background-image: var(--icons-why-3-bg-image);
}

[data-icon="why-3"]::before {
    content: var(--icons-why-3-content);
}

.why-section .icon-block-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--primary-700);
}

/* How section - transparent background cards */
.how-section .icon-block {
    background: transparent;
    box-shadow: none;
}

/* How section numbered icons */
.how-section .icon-block-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--how-icon-bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headings);
    font-size: var(--text-2xl);
    font-weight: bold;
    color: var(--how-icon-text-color);
    position: relative;
}

/* Hide SVG in how section */
.how-section .icon-block-icon svg {
    display: none;
}

/* Add divider bar after title */
.icon-block h3::after {
    content: '';
    display: block;
    width: 45px;
    height: 2px;
    background-color: var(--primary-600);
    margin: 10px auto;
    border-radius: 50px;
}

.icon-block h3 {
    /* Using semantic defaults from typography.css */
    margin: 0 0 12px 0;
    color: var(--icon-block-title-text-color);
}

.icon-block p {
    /* Using semantic defaults from typography.css */
    color: var(--icon-block-text-text-color);
    margin: 0;
}

/* ========== SECTION CTA BUTTONS ========== */
.section-cta {
    text-align: center;
    margin-top: 50px;
    padding: 0 20px;
}

.section-cta .buttonized {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 330px;
    width: 100%;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    /* Hero mobile layout */
    .hero-section {
        padding: 40px 20px;
    }

    .hero-container {
        flex-direction: column;
        gap: 30px;
    }

    /* Image on top for mobile */
    .hero-image {
        order: -1;  /* Move image above content */
        flex: 0 0 auto;  /* Don't grow/shrink in column layout */
        margin: 0 auto;  /* Center the image */
    }

    .hero-content {
        order: 1;
        text-align: center;
    }

    .hero-button .buttonized {
        width: 100%;
        max-width: 100%;
    }

    /* Section adjustments */
    .why-section,
    .how-section {
        padding: 40px 20px;
    }

    /* Icon blocks mobile */
    .icon-blocks {
        flex-direction: column;
        align-items: center;
    }

    .icon-block {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }

    /* Section CTA mobile */
    .section-cta {
        margin-top: 40px;
    }

    .section-cta .buttonized {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-image {
        max-width: 300px;  /* Smaller max width on very small screens */
    }
}

/* 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;
    color: var(--neutral-800);
    margin-bottom: var(--space-6);
}

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

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

.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-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);
    font-weight: bold;
    color: var(--neutral-800);
    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 1.5rem; /* 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 */
    color: var(--neutral-700); /* Better than pure black */
    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 {
        min-height: 100vh; /* Push footer below fold */
        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: 3rem 1rem;
}

/* Form sections - owned by step pages */
.step .form-top {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

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

/* 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;
}

/* Remove bottom margin for specific form steps */
#form-zip .label,
#form-zip .question,
#form-age .label,
#form-age .question,
#form-email .label,
#form-email .question,
#form-ethnicity .label,
#form-ethnicity .question,
#form-haveChildren .label,
#form-haveChildren .question,
#form-income .label,
#form-income .question,
#form-religion .label,
#form-religion .question,
#form-churchInvolvement .label,
#form-churchInvolvement .question,
#form-relationshipIntent .label,
#form-relationshipIntent .question,
#form-education .label,
#form-education .question {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .step.form {
        min-height: 100vh; /* Push footer below fold */
        padding: 2rem 1rem;
    }

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

@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 */