/* Brand Colors and Variables
   Single tonal scale derived from the Hoolie brand teal (#5ac8bd, hue ~172).
   Steps 600+ are the only ones that carry text on white (AA verified). */
:root {
    /* --- Brand tonal scale --- */
    --teal-50:  #f1faf8;
    --teal-100: #dcf3ef;
    --teal-200: #b3e5dd;
    --teal-300: #7dd3ca;
    --teal-400: #5ac8bd;
    --teal-500: #3fa89e;
    --teal-600: #2b8981;   /* 3.9:1 on white - large text / UI only */
    --teal-700: #1f6f68;   /* 5.8:1 on white - body text OK */
    --teal-800: #17544f;   /* 8.0:1 on white */
    --teal-900: #0e3a36;   /* 12.3:1 on white */

    /* --- Neutrals --- */
    --ink-900: #10312e;    /* primary text */
    --ink-700: #395551;    /* secondary text, 7.2:1 on white */
    --ink-500: #5c7370;    /* muted text, 4.6:1 on white */
    --line:    #d7e5e2;    /* borders / dividers */
    --line-strong: #b6cdc9;

    /* --- Surfaces --- */
    --surface:      #ffffff;
    --surface-soft: #f4faf9;
    --page-bg:      #f1f7f6;

    /* --- Semantic roles --- */
    --color-primary: var(--teal-700);
    --color-primary-hover: var(--teal-800);
    --on-primary: #ffffff;
    --color-accent: var(--teal-400);
    --color-success: #17694b;
    --color-success-soft: #e6f4ee;
    --color-warning: #7a4b09;
    --color-warning-soft: #fdf3e2;
    --color-danger: #b3261e;
    --color-danger-soft: #fdecea;
    --focus-ring: 0 0 0 3px rgba(31, 111, 104, 0.35);

    /* --- Plan tiers (harmonised with the brand, no off-palette purple/orange) --- */
    --tier-silver: #5c7370;
    --tier-gold:   #2b8981;
    --tier-platinum: #17544f;

    /* --- Legacy aliases ---
       15 rules in this file referenced --primary-color / --secondary-color,
       which were never defined: every one of those declarations was dropped by
       the parser (that is why .submit-btn rendered with no background). */
    --primary-color: var(--teal-700);
    --secondary-color: var(--teal-500);

    /* The Hoolie brand gradient is untouched — it stays the identity of the
       product and the background of the app.  Contrast is fixed by putting
       DARK ink on it (6.2-8.0:1) instead of white (2.0:1, unfixable). */
    --brand-primary: #5ac8bd;
    --brand-secondary: #4fb3a8;
    --brand-light: #7dd3ca;
    --brand-gradient: linear-gradient(135deg, #5ac8bd 0%, #4fb3a8 50%, #7dd3ca 100%);
    --brand-gradient-reverse: linear-gradient(135deg, #7dd3ca 0%, #4fb3a8 50%, #5ac8bd 100%);
    --brand-gradient-deep: linear-gradient(135deg, #2b8981 0%, #1f6f68 55%, #17544f 100%);
    /* Ink that clears AA on every stop of the brand gradient */
    --on-brand: #10312e;
    --text-dark: #10312e;
    --text-light: #ffffff;

    /* --- Elevation scale --- */
    --shadow-sm:    0 1px 2px rgba(16, 49, 46, 0.06), 0 1px 3px rgba(16, 49, 46, 0.08);
    --shadow-soft:  0 2px 4px rgba(16, 49, 46, 0.05), 0 8px 24px rgba(16, 49, 46, 0.09);
    --shadow-hover: 0 4px 8px rgba(16, 49, 46, 0.07), 0 16px 36px rgba(16, 49, 46, 0.14);

    /* --- Spacing / radius rhythm (4pt) --- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Greek-capable stack; the fallbacks are the system faces that were silently
       doing all the work while 'Poppins' was declared. */
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background: var(--brand-gradient);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animated Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(90, 200, 189, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(125, 211, 202, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(79, 179, 168, 0.1) 0%, transparent 50%);
    animation: backgroundFloat 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes backgroundFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
    66% { transform: translateY(10px) rotate(-1deg); }
}

/* Logo Header */
.logo-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 0;
    animation: slideInFromTop 1s ease-out;
}

.logo-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}

.company-logo {
    height: 60px;
    width: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: logoGlow 3s ease-in-out infinite alternate;
}

.company-logo:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(90, 200, 189, 0.4));
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes logoGlow {
    from {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }
    to {
        filter: drop-shadow(0 4px 8px rgba(90, 200, 189, 0.3));
    }
}

/* Main Container */
#main-content {
    position: relative;
    z-index: 1;
    padding-top: 80px; /* Add space for fixed header */
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem 0;
}

.hero-content {
    text-align: center;
    color: var(--text-light);
    animation: fadeInUp 1.2s ease-out;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
    to { text-shadow: 2px 2px 20px rgba(255,255,255,0.5), 2px 2px 4px rgba(0,0,0,0.3); }
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 3rem;
    opacity: 0.9;
    animation: fadeInUp 1.2s ease-out 0.3s both;
}

/* Benefits Section */
.benefits-section {
    margin: 2rem 0 3rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.benefit-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeInUp 1.2s ease-out;
    position: relative;
    overflow: hidden;
}

.benefit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.benefit-item:hover::before {
    left: 100%;
}

.benefit-item:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 15px 35px rgba(90, 200, 189, 0.3);
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    animation: benefitIconFloat 3s ease-in-out infinite;
}

.benefit-item:nth-child(1) .benefit-icon {
    animation-delay: 0s;
}

.benefit-item:nth-child(2) .benefit-icon {
    animation-delay: 1s;
}

.benefit-item:nth-child(3) .benefit-icon {
    animation-delay: 2s;
}

@keyframes benefitIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

.benefit-text {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Pet Reminder Card */
.selected-pet-reminder {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.pet-reminder-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInUp 1s ease-out 0.2s both;
}

.pet-icon-small {
    font-size: 2rem;
    animation: petBounce 2s ease-in-out infinite;
}

.pet-reminder-text {
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Gender Selection Cards */
.gender-selection {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.gender-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    min-width: 280px;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.gender-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    transition: left 0.5s ease;
    z-index: -1;
}

.gender-card:hover::before {
    left: 0;
}

.gender-card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: var(--shadow-hover);
    color: var(--text-light);
}

.gender-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
    animation: genderIconFloat 3s ease-in-out infinite;
}

.gender-card:hover .gender-icon {
    transform: scale(1.2) rotate(10deg);
    animation-play-state: paused;
}

@keyframes genderIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.gender-name {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.4s ease;
}

.gender-card:hover .gender-name {
    color: var(--text-light);
}

.gender-description {
    font-size: 1rem;
    color: #666;
    margin-top: 1rem;
    transition: color 0.4s ease;
}

.gender-card:hover .gender-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Pet Info Reminder */
.pet-info-reminder {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.pet-info-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInUp 1s ease-out 0.2s both;
}

.gender-indicator {
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Birth Date Options */
.birthdate-options {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.date-option-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.date-option-card.active {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}

.date-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    opacity: 0.1;
    transition: left 0.5s ease;
    z-index: -1;
}

.date-option-card.active::before {
    left: 0;
}

.option-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.option-icon {
    font-size: 2.5rem;
    animation: optionIconFloat 3s ease-in-out infinite;
}

@keyframes optionIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

.option-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #27ae60 !important;
    margin: 0;
}

h3.option-title {
    color: #27ae60 !important;
}

span.option-title {
    color: #27ae60 !important;
}

/* Date Input Styling */
.date-input-container {
    margin-top: 1rem;
}

.date-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.date-input {
    width: 80px;
    height: 60px;
    border: 2px solid var(--brand-primary);
    border-radius: 15px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    transition: all 0.3s ease;
    outline: none;
}

.date-input:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(90, 200, 189, 0.2);
    background: white;
}

.date-input::placeholder {
    color: #5ac8bd !important;
    opacity: 0.8 !important;
}

.date-field label {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

.date-separator {
    font-size: 2rem;
    font-weight: bold;
    color: var(--brand-primary);
    margin: 0 0.5rem;
}

/* Approximate Date Styling */
.approximate-inputs {
    margin-top: 1rem;
}

.approximate-selects {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.select-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
}

.select-field select {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--brand-primary);
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    outline: none;
}

.select-field select:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(90, 200, 189, 0.2);
    background: white;
}

.select-field label {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* Breed Knowledge Options */
.breed-knowledge-options {
    margin: 2rem 0;
}

.knowledge-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.knowledge-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--brand-primary);
    border-radius: 20px;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.knowledge-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(90, 200, 189, 0.3);
}

.knowledge-btn.active {
    background: var(--brand-gradient);
    color: white;
    border-color: var(--brand-secondary);
    box-shadow: 0 8px 25px rgba(90, 200, 189, 0.4);
}

/* Breed Selection Section */
.breed-selection-section {
    max-width: 700px;
    margin: 0 auto;
}

.breed-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.breed-option-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.breed-option-card.active {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}

.breed-dropdown-container {
    margin-top: 1rem;
}

.breed-select {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--brand-primary);
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #2c3e50 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    transition: all 0.3s ease;
    outline: none;
}

.breed-select option {
    color: #2c3e50 !important;
    background: white !important;
}

.breed-select:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(90, 200, 189, 0.2);
    background: white;
}

.custom-breed-inputs {
    margin-top: 1rem;
}

.instruction-text {
    color: #27ae60;
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.breed-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--brand-primary);
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    transition: all 0.3s ease;
    outline: none;
    margin-bottom: 1rem;
}

.breed-input::placeholder {
    color: #5ac8bd !important;
    opacity: 0.7 !important;
}

.breed-input:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(90, 200, 189, 0.2);
    background: white;
}

.mixed-breed-section {
    background: rgba(90, 200, 189, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.mixed-breed-question {
    margin-bottom: 1rem;
}

.form-check-input {
    margin-right: 0.5rem;
    transform: scale(1.2);
    accent-color: var(--brand-primary);
}

.form-check-label {
    font-weight: 500;
    color: #27ae60;
    cursor: pointer;
}

/* Weight Selection Section */
.weight-selection-section {
    max-width: 800px;
    margin: 0 auto;
}

/* Cat Default Section */
.cat-default-section {
    max-width: 600px;
    margin: 0 auto;
}

.cat-info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--brand-primary);
    animation: fadeInUp 1s ease-out 0.3s both;
}

.cat-info-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: petBounce 2s ease-in-out infinite;
}

.cat-breed-name {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.cat-breed-description {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

.cat-weight-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.weight-title {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.weight-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.weight-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.weight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    transition: left 0.5s ease;
    z-index: -1;
}

.weight-card:hover::before,
.weight-card.selected::before {
    left: 0;
}

.weight-card:hover,
.weight-card.selected {
    transform: translateY(-10px) scale(1.05);
    box-shadow: var(--shadow-hover);
    color: var(--text-light);
    border-color: var(--brand-primary);
}

.weight-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: weightIconFloat 3s ease-in-out infinite;
}

.weight-card:hover .weight-icon,
.weight-card.selected .weight-icon {
    animation-play-state: paused;
    transform: scale(1.2);
}

@keyframes weightIconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.weight-range {
    font-size: 1.3rem;
    font-weight: 600;
    color: #27ae60;
    margin-bottom: 0.5rem;
    transition: color 0.4s ease;
}

.weight-card:hover .weight-range,
.weight-card.selected .weight-range {
    color: var(--text-light);
}

.weight-description {
    font-size: 0.9rem;
    color: #27ae60;
    transition: color 0.4s ease;
}

.weight-card:hover .weight-description,
.weight-card.selected .weight-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Pet Summary Card */
.pet-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border-radius: 25px;
    padding: 2.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(90, 200, 189, 0.2);
    max-width: 550px;
    margin: 0 auto 3rem auto;
    animation: fadeInUp 1s ease-out 0.3s both;
    transition: all 0.3s ease;
}

.pet-summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(90, 200, 189, 0.15);
}

.pet-summary-content {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.pet-avatar {
    font-size: 4.5rem;
    animation: petBounce 2s ease-in-out infinite;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px rgba(90, 200, 189, 0.3);
}

.pet-details {
    flex-grow: 1;
}

.pet-name {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    background: linear-gradient(45deg, #2c3e50, #34495e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pet-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.pet-info-item {
    background: rgba(90, 200, 189, 0.1);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    font-size: 0.95rem;
    display: block;
    transition: all 0.3s ease;
}

.pet-info-item:hover {
    background: rgba(90, 200, 189, 0.15);
    transform: translateX(5px);
}

.pet-info-item strong {
    color: #34495e;
    font-weight: 600;
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pet-info-item span:not(strong) {
    color: #2c3e50;
    font-weight: 500;
    font-size: 1rem;
}

.pet-basic-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.pet-type {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
}

.pet-gender {
    font-size: 1.2rem;
    font-weight: 500;
}

.pet-breed-info {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

/* Name Input Section */
.name-input-section {
    max-width: 600px;
    margin: 0 auto;
}

.name-input-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out 0.5s both;
}

.name-input-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    opacity: 0.05;
    transition: left 0.8s ease;
    z-index: -1;
}

.name-input-card:hover::before {
    left: 0;
}

.input-header {
    margin-bottom: 2rem;
}

.input-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: inputIconFloat 3s ease-in-out infinite;
}

@keyframes inputIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(10deg); }
}

.input-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.name-input-container {
    margin-bottom: 2rem;
}

.name-field {
    position: relative;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.pet-name-input {
    width: 100%;
    padding: 1.5rem 1rem 1rem 1rem;
    border: none;
    border-bottom: 3px solid var(--brand-primary);
    background: transparent;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.pet-name-input:focus {
    color: var(--brand-primary);
    font-weight: 600;
    transform: scale(1.02);
}

.pet-name-input::placeholder {
    color: rgba(44, 62, 80, 0.5);
    font-weight: 400;
}

.input-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 0%;
    background: var(--brand-gradient);
    transition: width 0.4s ease;
    border-radius: 2px;
}

/* Name Suggestions */
.name-suggestions {
    margin-top: 2rem;
}

.suggestions-title {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 500;
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.name-suggestion {
    background: rgba(90, 200, 189, 0.1);
    border: 2px solid var(--brand-primary);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out both;
}

.name-suggestion:hover {
    background: var(--brand-gradient);
    color: white;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(90, 200, 189, 0.3);
}

.name-suggestion.selected {
    background: var(--brand-gradient);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(90, 200, 189, 0.4);
}

/* Pet Name Display */
.pet-name-display {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.pet-summary-card.compact {
    padding: 2rem;
    margin-bottom: 2rem;
    max-width: 450px;
}

.pet-summary-card.compact .pet-avatar {
    width: 70px;
    height: 70px;
    font-size: 3.5rem;
}

.pet-summary-card.compact .pet-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.pet-summary-card.compact .pet-info-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.pet-summary-card.compact .pet-info-item {
    padding: 0.6rem 0.8rem;
}

/* Simple Pet Info Card */
.pet-info-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s ease;
}

.pet-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(90, 200, 189, 0.2);
}

.pet-icon-small {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.pet-reminder-text {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    flex-grow: 1;
}

.gender-indicator {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

/* Health Status Options */
.health-status-options {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.health-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 2.5rem 2rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.health-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    transition: left 0.5s ease;
    z-index: -1;
}

.health-card:hover::before,
.health-card.selected::before {
    left: 0;
}

.health-card:hover,
.health-card.selected {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-hover);
    color: var(--text-light);
    border-color: var(--brand-primary);
}

.health-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: healthIconFloat 3s ease-in-out infinite;
}

.health-card:hover .health-icon,
.health-card.selected .health-icon {
    animation-play-state: paused;
    transform: scale(1.2);
}

@keyframes healthIconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.health-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    transition: color 0.4s ease;
}

.health-card:hover .health-title,
.health-card.selected .health-title {
    color: var(--text-light);
}

.health-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    transition: color 0.4s ease;
}

.health-card:hover .health-description,
.health-card.selected .health-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Health Conditions Grid */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.condition-item {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(90, 200, 189, 0.3);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.condition-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    transition: left 0.3s ease;
    z-index: -1;
}

.condition-item:hover::before,
.condition-item.selected::before {
    left: 0;
}

.condition-item:hover,
.condition-item.selected {
    border-color: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(90, 200, 189, 0.3);
}

.condition-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--brand-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.condition-item.selected .condition-checkbox {
    background: white;
    border-color: white;
}

.condition-checkbox i {
    font-size: 14px;
    color: var(--brand-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.condition-item.selected .condition-checkbox i {
    opacity: 1;
}

.condition-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.condition-item:hover .condition-text,
.condition-item.selected .condition-text {
    color: white;
}

.condition-item.other-condition {
    border-color: var(--brand-secondary);
    font-weight: 600;
}

/* Other Condition Input */
.other-input-section {
    margin: 2rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.other-input-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--brand-primary);
}

.other-input-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.other-condition-textarea {
    width: 100%;
    min-height: 120px;
    border: 2px solid var(--brand-primary);
    border-radius: 15px;
    padding: 1rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
}

.other-condition-textarea:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(90, 200, 189, 0.2);
}

.char-counter {
    text-align: right;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Selected Conditions Summary */
.selected-conditions {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--brand-primary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.selected-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-tag {
    background: var(--brand-gradient);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(90, 200, 189, 0.3);
}

.selected-tag.other-tag {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

/* Navigation Buttons */
.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.navigation-buttons .btn {
    transition: all 0.3s ease;
}

.navigation-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Pet Selection Cards */
.pet-selection {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.pet-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    min-width: 280px;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.pet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    transition: left 0.5s ease;
    z-index: -1;
}

.pet-card:hover::before {
    left: 0;
}

.pet-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: var(--shadow-hover);
    color: var(--text-light);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pet-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
    animation: petBounce 2s ease-in-out infinite;
}

.pet-card:hover .pet-icon {
    transform: scale(1.15) rotate(5deg);
    animation-play-state: paused;
    filter: drop-shadow(0 0 15px rgba(90, 200, 189, 0.6));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Gentle dog animations with flying pets */
.pet-card[data-pet="dog"]:hover .pet-icon {
    transform: scale(1.2) rotate(8deg);
    filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.7));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pet-card[data-pet="dog"]:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.4);
    transition: all 0.4s ease;
}


/* Gentle cat animations with flying pets */
.pet-card[data-pet="cat"]:hover .pet-icon {
    transform: scale(1.2) rotate(-6deg);
    filter: drop-shadow(0 0 20px rgba(156, 39, 176, 0.7));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pet-card[data-pet="cat"]:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(233, 30, 99, 0.1));
    border: 1px solid rgba(156, 39, 176, 0.4);
    transition: all 0.4s ease;
}


@keyframes petBounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}



.pet-name {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.4s ease;
}

.pet-card:hover .pet-name {
    color: var(--text-light);
}

.pet-description {
    font-size: 1rem;
    color: #666;
    margin-top: 1rem;
    transition: color 0.4s ease;
}

.pet-card:hover .pet-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Floating Elements */
.floating-element {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 20%;
    right: 10%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

.floating-element:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-5deg); }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Trust & Reviews Section */
.trust-section {
    padding: 1rem 0;
}

.trust-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.trust-card {
    background: white;
    padding: 1.2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 180px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideInUp 0.6s ease-out;
}

.trust-card:nth-child(1) { animation-delay: 0.1s; }
.trust-card:nth-child(2) { animation-delay: 0.2s; }
.trust-card:nth-child(3) { animation-delay: 0.3s; }

.trust-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Combined cards replace old separate logo/stats styles */

/* Combined logo + stats trust cards */
.combined-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(90, 200, 189, 0.2);
    min-height: 160px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-radius: 15px;
}

.combined-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.35);
}

.trust-logo {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.trust-logo-image {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    display: block;
    border-radius: 5px;
}

.trust-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.rating-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.trust-count {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.customer-quote {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.6s ease-out 0.4s both;
}

.customer-quote p {
    font-style: italic;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
}

.quote-author {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Simple slide-in animation */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Journey Guide Section */
.journey-guide-section {
    padding: 4rem 0;
    margin-top: 3rem;
}

.guide-header {
    text-align: center;
    margin-bottom: 3rem;
}

.guide-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.guide-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.step-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all 0.4s ease;
    animation: slideInUp 0.8s ease-out;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 280px;
}

.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }
.step-card:nth-child(4) { animation-delay: 0.4s; }
.step-card:nth-child(5) { animation-delay: 0.5s; }
.step-card:nth-child(6) { animation-delay: 0.6s; }
.step-card:nth-child(7) { animation-delay: 0.7s; }

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.step-card:hover::before {
    left: 100%;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.3);
}

.step-number {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: var(--brand-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 5px 15px rgba(90, 200, 189, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.step-content {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    flex: 1;
    justify-content: flex-start;
    gap: 1rem;
}

.step-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.step-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.step-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

.feature {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.feature:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.guide-cta {
    text-align: center;
    margin-top: 3rem;
}

.guide-cta-btn {
    background: var(--brand-gradient);
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(90, 200, 189, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.guide-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(90, 200, 189, 0.4);
    background: var(--brand-gradient-reverse);
}

.cta-text {
    font-size: 1.1rem;
}

.cta-icon {
    font-size: 1.3rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Affiliate Code Section */
.affiliate-section {
    padding: 2rem 0;
    margin: 2rem 0;
}

.affiliate-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(90, 200, 189, 0.2);
    animation: slideInUp 0.8s ease-out;
}

.affiliate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.35);
}

.affiliate-header {
    margin-bottom: 1.5rem;
}

.affiliate-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.affiliate-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.affiliate-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 0;
}

.affiliate-input-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.affiliate-input {
    flex: 1;
    max-width: 300px;
    padding: 0.8rem 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.affiliate-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.affiliate-input:focus {
    outline: none;
    border-color: rgba(90, 200, 189, 0.6);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(90, 200, 189, 0.3);
}

.affiliate-apply-btn {
    background: var(--brand-gradient);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(90, 200, 189, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.affiliate-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(90, 200, 189, 0.4);
    background: var(--brand-gradient-reverse);
}

.affiliate-status {
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 15px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.affiliate-status.success {
    background: rgba(76, 175, 80, 0.3);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #e8f5e8;
}

.affiliate-status.error {
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid rgba(244, 67, 54, 0.5);
    color: #ffebee;
}

.affiliate-benefits {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.affiliate-benefits .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    min-width: 120px;
}

.affiliate-benefits .benefit-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.affiliate-benefits .benefit-icon {
    font-size: 1.5rem;
}

.affiliate-benefits .benefit-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-container {
        padding-left: 1rem;
    }
    
    .company-logo {
        height: 50px;
    }
    
    #main-content {
        padding-top: 70px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .benefit-item {
        padding: 1rem;
    }
    
    .benefit-icon {
        font-size: 2rem;
    }
    
    .benefit-text {
        font-size: 0.9rem;
    }
    
    .pet-selection, .gender-selection {
        gap: 2rem;
    }
    
    .pet-card, .gender-card {
        min-width: 250px;
        padding: 2rem 1.5rem;
    }
    
    .pet-icon, .gender-icon {
        font-size: 4rem;
    }
    
    .pet-name, .gender-name {
        font-size: 1.5rem;
    }
    
    .pet-reminder-card {
        padding: 0.8rem 1.5rem;
    }
    
    .pet-icon-small {
        font-size: 1.5rem;
    }
    
    .pet-reminder-text {
        font-size: 1rem;
    }
    
    .birthdate-options {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .date-option-card {
        padding: 1.5rem;
    }
    
    .date-inputs {
        gap: 0.5rem;
    }
    
    .date-input {
        width: 70px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .date-separator {
        font-size: 1.5rem;
        margin: 0 0.2rem;
    }
    
    .approximate-selects {
        flex-direction: column;
        gap: 1rem;
    }
    
    .select-field {
        min-width: auto;
        width: 100%;
    }
    
    .pet-info-card {
        padding: 0.8rem 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .knowledge-buttons {
        gap: 1rem;
    }
    
    .knowledge-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        min-width: 100px;
    }
    
    .breed-option-card {
        padding: 1.5rem;
    }
    
    .weight-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .weight-card {
        padding: 1.5rem 1rem;
    }
    
    .weight-icon {
        font-size: 2.5rem;
    }
    
    .weight-range {
        font-size: 1.1rem;
    }
    
    .weight-title {
        font-size: 1.6rem;
    }
    
    .cat-info-card {
        padding: 1.5rem;
    }
    
    .cat-info-icon {
        font-size: 3rem;
    }
    
    .cat-breed-name {
        font-size: 1.4rem;
    }
    
    .cat-weight-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pet-summary-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .pet-summary-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .pet-avatar {
        font-size: 3rem;
    }
    
    .pet-basic-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .pet-type {
        font-size: 1.3rem;
    }
    
    .name-input-card {
        padding: 2rem 1.5rem;
    }
    
    .pet-name-input {
        font-size: 1.5rem;
        padding: 1rem 0.5rem 0.5rem 0.5rem;
    }
    
    .input-title {
        font-size: 1.2rem;
    }
    
    .suggestions-list {
        gap: 0.5rem;
    }
    
    .name-suggestion {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .pet-card {
        min-width: 200px;
        padding: 1.5rem 1rem;
    }

    .pet-icon {
        font-size: 3.5rem;
    }
    
    /* Reduce animation intensity on mobile */
    .pet-card[data-pet="dog"]:hover .pet-icon,
    .pet-card[data-pet="cat"]:hover .pet-icon {
        transform: scale(1.2) rotate(8deg);
        filter: drop-shadow(0 0 15px rgba(90, 200, 189, 0.6));
    }
    
    .pet-card[data-pet="dog"]:hover::after,
    .pet-card[data-pet="cat"]:hover::after {
        font-size: 1rem;
    }
}

/* Contact Info Page Styles */
.email-form-container {
    max-width: 500px;
    margin: 0 auto;
}

.form-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 3rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-header h3 {
    color: #ffffff !important;
    background: linear-gradient(45deg, #ffffff, #f0f8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-header p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.privacy-notice small {
    color: rgba(255, 255, 255, 0.7) !important;
}

.email-input-group {
    margin-bottom: 1.5rem;
}

.form-label {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.email-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.email-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.email-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.input-feedback {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.input-feedback.valid {
    color: #2ecc71;
}

.input-feedback.invalid {
    color: #e74c3c;
}

.privacy-notice {
    text-align: center;
}

.submit-email-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    transition: all 0.3s ease;
}

.submit-email-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(90, 200, 189, 0.4);
}

/* Thank You Page Styles */
.success-animation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #2ecc71;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #2ecc71;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
    position: relative;
}

.success-checkmark.animate .check-icon {
    opacity: 1;
    animation: checkmark 0.6s ease-in-out 0.6s forwards;
}

.check-icon {
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 0;
    box-shadow: inset 0px 0px 0px #2ecc71;
    opacity: 0;
}

.icon-line {
    height: 2px;
    background: #2ecc71;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.icon-circle {
    top: -2px;
    left: -2px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(46, 204, 113, 0.2);
    position: absolute;
}

.icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
}

.confirmation-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 3rem;
    margin: 2rem 0;
    backdrop-filter: blur(15px);
}

.confirmation-steps {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.step-content h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.final-pet-summary {
    text-align: center;
}

.cta-section {
    text-align: center;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-info {
    text-align: center;
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #2ecc71;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

/* Insurance Choice Page Styles */
.insurance-choice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.choice-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 2.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.choice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(90, 200, 189, 0.1), rgba(90, 200, 189, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.choice-card:hover::before {
    opacity: 1;
}

.choice-card:hover {
    transform: translateY(-10px);
    border-color: rgba(90, 200, 189, 0.5);
    box-shadow: 0 25px 50px rgba(90, 200, 189, 0.3);
}

.choice-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.choice-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.choice-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.choice-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.benefit-item {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Review Page Styles */
.review-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.review-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(90, 200, 189, 0.2);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.review-header h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.edit-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(90, 200, 189, 0.4);
}

.review-content {
    display: grid;
    gap: 1rem;
}

.review-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 3px solid var(--primary-color);
}

.review-item strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
}

.review-item span:not(strong) {
    color: #ffffff;
    font-weight: 500;
    text-align: right;
}

.action-buttons {
    text-align: center;
}

/* Inline Edit Styles */
.edit-mode {
    display: grid;
    gap: 1.5rem;
}

.edit-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-item label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
}

.edit-input, .edit-select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.edit-input:focus, .edit-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.edit-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.edit-select option {
    background: #2c3e50;
    color: #ffffff;
}

.readonly-field {
    padding: 0.8rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.readonly-field span {
    color: #ffffff;
    font-weight: 500;
}

.edit-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.save-btn, .cancel-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(46, 204, 113, 0.4);
}

.cancel-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(231, 76, 60, 0.4);
}

/* Success Message Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
    
    /* Trust section mobile styles */
    .trust-cards-container {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .trust-card {
        min-width: auto;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .combined-card {
        max-width: 280px;
        min-height: 140px;
        min-width: 200px;
        padding: 1rem;
    }
    
    .trust-logo {
        height: 60px;
        margin-bottom: 0.8rem;
    }
    
    .trust-logo-image {
        max-height: 50px;
    }
    
    .rating-number {
        font-size: 1.2rem;
    }
    
    .trust-count {
        font-size: 0.85rem;
    }
    
    .customer-quote {
        margin-top: 1rem;
        padding: 1rem;
    }
    
    .customer-quote p {
        font-size: 0.9rem;
    }
    
    /* Journey guide mobile styles */
    .journey-guide-section {
        padding: 2rem 0;
        margin-top: 2rem;
    }
    
    .guide-title {
        font-size: 2rem;
    }
    
    .guide-subtitle {
        font-size: 1rem;
    }
    
    .journey-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .step-card {
        padding: 1.5rem;
        margin: 0 1rem;
        min-height: 240px;
        text-align: center;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
    }
    
    .step-content {
        margin-top: 3rem;
    }
    
    .step-title {
        font-size: 1.2rem;
    }
    
    .step-description {
        font-size: 0.9rem;
    }
    
    .feature {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .guide-cta-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    /* Affiliate section mobile styles */
    .affiliate-section {
        padding: 1.5rem 0;
        margin: 1.5rem 0;
    }
    
    .affiliate-card {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .affiliate-title {
        font-size: 1.5rem;
    }
    
    .affiliate-subtitle {
        font-size: 0.9rem;
    }
    
    .affiliate-input-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .affiliate-input {
        max-width: 100%;
        width: 100%;
    }
    
    .affiliate-apply-btn {
        width: 100%;
        justify-content: center;
    }
    
    .affiliate-benefits {
        gap: 1rem;
    }
    
    .affiliate-benefits .benefit-item {
        min-width: 100px;
        padding: 0.6rem;
    }
    
    .affiliate-benefits .benefit-text {
        font-size: 0.8rem;
    }
}

/* Responsive Design for New Pages */
@media (max-width: 768px) {
    .insurance-choice-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .choice-card {
        padding: 2rem;
    }
    
    .choice-title {
        font-size: 1.3rem;
    }
    
    .review-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .review-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .review-item span:not(strong) {
        text-align: left;
    }
    
    .edit-actions {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .save-btn, .cancel-btn {
        width: 100%;
        padding: 1rem;
    }
}

/* Insurance Programs Page Styles */
.programs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.program-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(90, 200, 189, 0.3);
}

.program-card.popular {
    border-color: #f39c12;
    box-shadow: 0 15px 35px rgba(243, 156, 18, 0.2);
}

.popular-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
}

.program-header {
    background: linear-gradient(135deg, rgba(90, 200, 189, 0.2), rgba(90, 200, 189, 0.1));
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.program-badge {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.silver-badge {
    color: #95a5a6;
}

.gold-badge {
    color: #f39c12;
}

.platinum-badge {
    color: #9b59b6;
}

.program-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.program-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 500;
}

.program-features {
    padding: 1.5rem;
    flex-grow: 1;
}

.feature-group {
    margin-bottom: 1.5rem;
}

.feature-group h4 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-group li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.3rem;
    padding-left: 0.5rem;
}

.feature-group small {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.program-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.participation-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.select-program-btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.silver-btn {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

.gold-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}

.platinum-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
}

.select-program-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.common-features {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    margin: 3rem 0;
    backdrop-filter: blur(15px);
}

.common-features h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.common-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.8rem;
}

.common-feature {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.additional-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.info-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.info-card h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.info-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsive Design for Programs */
@media (max-width: 768px) {
    .programs-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .program-card {
        margin-bottom: 1rem;
    }
    
    .program-price {
        font-size: 2rem;
    }
    
    .common-features-grid {
        grid-template-columns: 1fr;
    }
    
    .additional-info {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Non-Covered Page Styles */
.selected-program-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.program-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.program-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
}

.program-name {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.selected-program-card.program-silver .program-name {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.selected-program-card.program-gold .program-name {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.selected-program-card.program-platinum .program-name {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.non-covered-container {
    max-width: 900px;
    margin: 0 auto;
}

.non-covered-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 2rem;
    backdrop-filter: blur(15px);
    margin-bottom: 3rem;
}

.non-covered-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.non-covered-header h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.non-covered-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.non-covered-list {
    display: grid;
    gap: 1.5rem;
}

.non-covered-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
}

.non-covered-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.item-icon {
    font-size: 2rem;
    min-width: 50px;
    text-align: center;
}

.item-content h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.item-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.declaration-section {
    text-align: center;
    margin: 3rem 0;
}

.declaration-title {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.declaration-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

.declaration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.declaration-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.declaration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.declaration-card:hover::before {
    left: 100%;
}

.declaration-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(90, 200, 189, 0.3);
    border-color: var(--primary-color);
}

.declaration-card.has-conditions:hover {
    box-shadow: 0 25px 50px rgba(231, 76, 60, 0.3);
    border-color: #e74c3c;
}

.declaration-card.no-conditions:hover {
    box-shadow: 0 25px 50px rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
}

.declaration-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.declaration-content h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.declaration-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Design for Non-Covered */
@media (max-width: 768px) {
    .non-covered-card {
        padding: 1.5rem;
    }
    
    .non-covered-header h2 {
        font-size: 1.6rem;
    }
    
    .non-covered-item {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }
    
    .item-icon {
        font-size: 2.5rem;
    }
    
    .declaration-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .declaration-title {
        font-size: 1.5rem;
    }
    
    .selected-program-card {
        padding: 0.8rem 1rem;
    }
    
    .program-info {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* User Data Page Styles */
.summary-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.user-data-container {
    max-width: 900px;
    margin: 0 auto;
}

.user-data-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 2.5rem;
    backdrop-filter: blur(15px);
    margin-bottom: 2rem;
}

.form-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.form-header h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.6;
}

.user-form {
    max-width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.required {
    color: #e74c3c;
    font-weight: 700;
}

.form-group input {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(90, 200, 189, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.form-group input.error {
    border-color: #e74c3c;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.3);
}

.form-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    font-style: italic;
}

.pricing-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
}

.pricing-section h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.pricing-header {
    margin-bottom: 1.5rem;
}

.pet-program-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pet-type {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.program-badge {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    color: white;
}

.silver-badge {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.gold-badge {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.platinum-badge {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.weight-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
}

.pricing-options {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pricing-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-option:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.pricing-option.main-option {
    border-color: var(--primary-color);
    background: rgba(90, 200, 189, 0.1);
}

.option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.option-title {
    color: #27ae60 !important;
    font-size: 1rem;
    font-weight: 600;
}

.option-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
}

.option-badge.recommended {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.option-price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.price {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
}

.period {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 500;
}

.option-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.benefit {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.option-total {
    margin-top: 0.5rem;
}

.option-total small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.second-pet-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.discount-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 10px;
    padding: 1rem;
}

.discount-icon {
    font-size: 2rem;
}

.discount-text strong {
    color: #2ecc71;
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.3rem;
}

.discount-text small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.form-actions {
    text-align: center;
    margin-top: 2rem;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary-color), #4db6ac);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 1.2rem 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 10px 30px rgba(90, 200, 189, 0.3);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(90, 200, 189, 0.4);
}

.btn-icon {
    font-size: 1.2rem;
}

/* Success/Error Messages */
.success-message, .error-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease;
}

.success-message {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.error-message {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.success-content, .error-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.success-icon, .error-icon {
    font-size: 1.2rem;
}

/* Responsive Design for User Data */
@media (max-width: 768px) {
    .user-data-card {
        padding: 1.5rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pet-program-info {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .pricing-options {
        gap: 0.8rem;
    }
    
    .option-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .discount-badge {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }
    
    .submit-btn {
        width: 100%;
        padding: 1rem;
    }
    
    .success-message, .error-message {
        right: 10px;
        left: 10px;
        top: 10px;
    }
}

/* Health Issue Message Styles */
.health-issue-message {
    margin-bottom: 2rem;
}

.message-card {
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.message-icon {
    font-size: 2rem;
    min-width: 50px;
    text-align: center;
}

.message-content h4 {
    color: #e74c3c;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.message-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Second Pet Add Button Styles */
.second-pet-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
}

.second-pet-card {
    text-align: center;
}

.second-pet-header h4 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.second-pet-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.add-pet-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.add-pet-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(46, 204, 113, 0.3);
}

.second-pet-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    display: block;
}

/* Two Pets Pricing Styles */
.two-pets-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.two-pets-header h4 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.discount-highlight {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-block;
}

.discount-text {
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-breakdown {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.pet-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pet-pricing-row:last-child {
    border-bottom: none;
}

.pet-pricing-row.discount-row {
    background: rgba(46, 204, 113, 0.1);
    border-radius: 8px;
    padding: 0.8rem;
    margin-top: 0.5rem;
}

.pet-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
}

.pet-price {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
}

.original-price {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* Responsive Design for Second Pet */
@media (max-width: 768px) {
    .message-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .message-icon {
        font-size: 2.5rem;
    }
    
    .add-pet-btn {
        width: 100%;
        justify-content: center;
    }
    
    .pet-pricing-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    
    .original-price {
        margin-left: 0;
    }
}

/* Second Pet Form Styles */
.second-pet-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 1.5rem;
}

.second-pet-form .form-header h5 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.second-pet-form .form-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.second-pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pet-type-options, .gender-options, .health-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pet-type-display {
    width: 100%;
}

.same-pet-type {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
}

.same-pet-type .pet-icon {
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.same-pet-type .pet-label {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.pet-type-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-style: italic;
    display: block;
}

.pet-option, .gender-option, .health-option {
    flex: 1;
    min-width: 120px;
    cursor: pointer;
}

.pet-option input, .gender-option input, .health-option input {
    display: none;
}

.pet-option-content, .gender-content, .health-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
}

.pet-option input:checked + .pet-option-content,
.gender-option input:checked + .gender-content,
.health-option input:checked + .health-content {
    background: rgba(90, 200, 189, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(90, 200, 189, 0.3);
}

.pet-option-content:hover,
.gender-content:hover,
.health-content:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.pet-icon {
    font-size: 1.5rem;
}

.pet-label, .gender-content, .health-text {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.health-icon {
    font-size: 1.2rem;
}

.health-option.healthy .health-content {
    border-color: rgba(46, 204, 113, 0.3);
}

.health-option.problems .health-content {
    border-color: rgba(231, 76, 60, 0.3);
}

.health-option.healthy input:checked + .health-content {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.health-option.problems input:checked + .health-content {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
}

.health-warning {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.health-warning p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin: 0;
}

.save-second-pet-btn, .cancel-second-pet-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.5rem;
}

.save-second-pet-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.cancel-second-pet-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.save-second-pet-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.3);
}

.cancel-second-pet-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Second Pet Summary Styles */
.second-pet-summary {
    background: rgba(46, 204, 113, 0.1);
    border: 2px solid rgba(46, 204, 113, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.pet-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pet-summary-header h5 {
    color: #2ecc71;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.edit-second-pet-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.edit-second-pet-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.pet-info-display {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pet-avatar {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pet-name {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
}

.pet-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* Loading Animation Styles */
.pricing-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    padding: 1.5rem;
    z-index: 10;
}

.loading-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* Responsive Design for Second Pet Form */
@media (max-width: 768px) {
    .second-pet-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pet-type-options, .gender-options, .health-options {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .pet-option, .gender-option, .health-option {
        min-width: auto;
    }
    
    .pet-summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .pet-info-display {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }
    
    .save-second-pet-btn, .cancel-second-pet-btn {
        width: 100%;
        margin: 0.3rem 0;
    }
}


/* ============================================================================
   UI UPGRADE LAYER  —  design tokens applied
   ----------------------------------------------------------------------------
   Everything below re-grounds the interface on the tonal scale defined in
   :root.  Rules are ordered shell -> surfaces -> type -> forms -> actions ->
   selection -> tiers -> motion -> responsive.

   !important is used deliberately and only where a template inline style would
   otherwise win; the templates carry ~895 inline style attributes, so cleaning
   them one by one is a separate pass.
   ========================================================================= */

/* ---------- 1. Page shell ------------------------------------------------ */
/* The saturated teal page background was the root of every contrast failure:
   white text and pale cards were both sitting on a mid-tone.  The page is now
   a near-white tint; teal returns as accent, CTA and hero band. */
body {
    background: var(--page-bg) !important;
    color: var(--ink-900);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
    opacity: 0.35;
}

.hero-section {
    background: transparent !important;
    padding: 2.5rem 0 4rem;
}

.logo-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.container,
.hero-content {
    max-width: 1140px;
}

/* ---------- 2. Typography ------------------------------------------------ */
/* Neutralises the `background-clip:text + transparent fill` headline hack that
   18 templates apply inline.  It produced near-white text on a light ground. */
[style*="-webkit-text-fill-color"],
[style*="background-clip"] {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    color: var(--teal-900) !important;
}

.hero-title,
.weight-title,
.section-title,
.subsection-title,
.step-title,
.question-label,
h1, h2, h3, h4, h5 {
    color: var(--teal-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.hero-title {
    font-weight: 700;
    text-shadow: none !important;
}

.hero-subtitle,
.info-text,
.step-description,
.instruction-text,
.weight-description,
.program-subtitle {
    color: var(--ink-700) !important;
    text-shadow: none !important;
}

.form-hint,
.text-muted,
small.text-muted {
    color: var(--ink-500) !important;
}

/* Prices and figures line up in columns */
.price, .option-price, .option-total, .pricing-value,
.program-price, .coverage-price, .detail-value {
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. Surfaces -------------------------------------------------- */
.pet-info-card,
.breed-option-card,
.weight-card,
.pet-card,
.gender-card,
.health-card,
.program-card,
.info-card,
.step-card,
.trust-card,
.condition-item,
.questionnaire-section,
.pricing-option,
.program-option,
.review-item,
.benefit-item,
.non-covered-item,
.form-section,
.card {
    background: var(--surface) !important;
    color: var(--ink-900);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.questionnaire-section,
.form-section {
    padding: 1.5rem;
}

.detail-row,
.breakdown-item,
.pricing-row,
.edit-item {
    color: var(--ink-900);
    border-bottom: 1px solid var(--line);
}

.detail-label, .pricing-label, .coverage-label {
    color: var(--ink-700) !important;
}

.detail-value, .pricing-value, .coverage-price {
    color: var(--teal-900) !important;
    font-weight: 600;
}

/* ---------- 4. Forms ----------------------------------------------------- */
/* .form-label was hard-coded white, so every Bootstrap label on a white card
   (the whole partner portal login) rendered invisible. */
.form-label,
.form-group label,
.question-label,
.declaration-label,
label {
    color: var(--ink-900) !important;
    font-weight: 600;
}

.form-control,
.form-select,
.breed-input,
.breed-select,
.email-input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    background: var(--surface) !important;
    color: var(--ink-900) !important;
    border: 1.5px solid var(--line-strong) !important;
    border-radius: var(--r-md) !important;
    font-size: 16px !important;   /* < 16px triggers iOS auto-zoom */
    min-height: 48px;
    padding: 0.75rem 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ink-500) !important;
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--teal-700) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none;
}

.form-control:disabled,
input:read-only {
    background: var(--surface-soft) !important;
    color: var(--ink-700) !important;
}

.required,
.text-danger {
    color: var(--color-danger) !important;
}

/* Radios / checkboxes: 44px touch rows, visible selected state */
.radio-label,
.checkbox-label,
.declaration-label,
.condition-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-sm);
    color: var(--ink-900) !important;
    cursor: pointer;
    transition: background 160ms ease;
}

.radio-label:hover,
.checkbox-label:hover {
    background: var(--teal-50);
}

input[type="radio"],
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    accent-color: var(--teal-700);
    flex: 0 0 auto;
}

/* ---------- 5. Actions --------------------------------------------------- */
/* One primary action per screen; back/secondary must never outrank it. */
.btn-primary,
.submit-btn,
.next-btn,
.continue-btn,
.apply-btn,
.knowledge-btn.active,
button[type="submit"],
.btn.btn-primary {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: var(--on-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: var(--r-md) !important;
    font-weight: 600;
    min-height: 48px;
    padding: 0.85rem 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.btn-primary:hover,
.submit-btn:hover,
.next-btn:hover,
button[type="submit"]:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: var(--shadow-hover);
}

.btn-primary:active,
.submit-btn:active,
button[type="submit"]:active {
    transform: scale(0.98);
}

/* Back / cancel: outlined, deliberately quieter than the primary CTA */
.btn-light,
.back-btn,
.cancel-second-pet-btn,
.navigation-buttons .btn-light {
    background: var(--surface) !important;
    color: var(--ink-700) !important;
    border: 1.5px solid var(--line-strong) !important;
    border-radius: var(--r-md) !important;
    font-weight: 500 !important;
    min-height: 48px;
    box-shadow: none !important;
}

.btn-light:hover {
    background: var(--surface-soft) !important;
    color: var(--ink-900) !important;
}

.navigation-buttons,
.form-actions,
.action-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bootstrap default indigo has no place in a teal product */
.btn-primary,
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
a { color: var(--teal-700); }
a:hover { color: var(--teal-800); }

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--teal-600);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 6. Selection states ------------------------------------------ */
/* Previously inverted: the *unselected* chip was solid white and the *selected*
   one was brand teal on a teal page, so the wrong option read as chosen. */
.knowledge-btn,
.weight-card,
.pet-card,
.gender-card,
.health-card,
.breed-option-card,
.pricing-option,
.program-option {
    background: var(--surface) !important;
    color: var(--ink-900) !important;
    border: 1.5px solid var(--line) !important;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.knowledge-btn:hover,
.weight-card:hover,
.breed-option-card:hover,
.pricing-option:hover,
.program-option:hover {
    border-color: var(--teal-400) !important;
    box-shadow: var(--shadow-soft);
}

.knowledge-btn.active,
.weight-card.selected,
.weight-card.active,
.pet-card.selected,
.gender-card.selected,
.health-card.selected,
.breed-option-card.active,
.pricing-option.selected,
.pricing-option.active,
.program-option.selected {
    background: var(--teal-50) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 104, 0.12), var(--shadow-soft);
}

/* Selection is not signalled by colour alone */
.weight-card.selected::after,
.pricing-option.selected::after,
.breed-option-card.active::after {
    content: "\2713";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.weight-card,
.pricing-option,
.breed-option-card {
    position: relative;
}

.knowledge-btn.active {
    color: var(--on-primary) !important;
    background: var(--color-primary) !important;
}

.weight-range,
.option-title,
.pet-label {
    color: var(--teal-900) !important;
}

/* Gender chips inherited hard-coded blue/pink from inline scripts */
.gender-indicator span,
.gender-indicator {
    color: var(--ink-700) !important;
}

/* ---------- 7. Plan tiers ------------------------------------------------ */
/* Grey / orange / purple replaced by three steps of the brand scale, so the
   pricing table reads as one product instead of three. */
.silver-badge, .silver-btn { background: var(--tier-silver) !important; background-image: none !important; color: #fff !important; border-color: var(--tier-silver) !important; }
.gold-badge,   .gold-btn   { background: var(--tier-gold) !important;   background-image: none !important; color: #fff !important; border-color: var(--tier-gold) !important; }
.platinum-badge, .platinum-btn { background: var(--tier-platinum) !important; background-image: none !important; color: #fff !important; border-color: var(--tier-platinum) !important; }

.program-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.5rem 1.25rem;
}

.program-card.popular {
    border: 2px solid var(--color-primary) !important;
    box-shadow: var(--shadow-hover);
}

.popular-badge {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
}

.program-price {
    color: var(--teal-900) !important;
}

.selected-program-card.program-silver .program-name { color: var(--tier-silver) !important; }
.selected-program-card.program-gold .program-name { color: var(--tier-gold) !important; }
.selected-program-card.program-platinum .program-name { color: var(--tier-platinum) !important; }

/* Status / feedback colours meet 4.5:1 on their own tint */
.success-message, .alert-success { background: var(--color-success-soft) !important; color: var(--color-success) !important; border: 1px solid rgba(23,105,75,0.25) !important; }
.error-message, .alert-danger    { background: var(--color-danger-soft) !important;  color: var(--color-danger) !important;  border: 1px solid rgba(179,38,30,0.25) !important; }
.alert-warning                   { background: var(--color-warning-soft) !important; color: var(--color-warning) !important; border: 1px solid rgba(122,75,9,0.25) !important; }

/* ---------- 8. Decoration & motion --------------------------------------- */
/* The floating emoji layer sat on top of forms and payment screens. Kept as a
   faint texture on large screens, dropped entirely on phones. */
.floating-container,
.floating-decorations {
    opacity: 0.18;
}

.floating-element {
    filter: saturate(0.6);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .floating-container, .floating-decorations { display: none !important; }
}

/* ---------- 9. Responsive ------------------------------------------------ */
@media (max-width: 767.98px) {
    .floating-container,
    .floating-decorations {
        display: none !important;
    }

    .hero-section { padding: 1.5rem 0 3rem; }
    .hero-title { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; }

    .navigation-buttons,
    .form-actions {
        flex-direction: column-reverse;   /* primary action ends up on top */
    }

    .navigation-buttons .btn,
    .form-actions .btn,
    .submit-btn {
        width: 100%;
    }
}

/* No page should scroll sideways */
html, body { overflow-x: hidden; }
.row { --bs-gutter-x: 1.5rem; }


/* ---------- 10. Text colour remap ---------------------------------------
   62 rules in the original sheet painted text white because every surface used
   to be teal.  Now that cards are white, white text has to become ink — except
   where the element itself carries a solid brand fill (badges, chips, primary
   buttons), which keeps white for AA on its own background. */

/* 10a. Content text inside surfaces */
.pet-reminder-text,
.pet-name,
.pet-label,
.pet-price,
.gender-content,
.health-text,
.choice-title,
.program-name,
.program-price,
.price,
.option-title,
.feature,
.common-feature,
.benefit-text,
.rating-number,
.trust-count,
.participation-info,
.item-content h4,
.info-card h4,
.feature-group h4,
.common-features h3,
.pricing-section h3,
.declaration-title,
.declaration-content h4,
.non-covered-header h2,
.review-header h3,
.review-item span:not(strong),
.readonly-field span,
.form-header h2,
.form-header h3,
.form-header h5,
.second-pet-header h4,
.two-pets-header h4,
.step-content h4,
.loading-content,
.upload-text,
.upload-subtext,
.upload-hint,
.condition-text,
.coverage-item,
.benefit-item,
.non-covered-item,
.step-features,
.selected-program-card {
    color: var(--ink-900) !important;
}

/* 10b. Bare tags inside white surfaces */
.card, .info-card, .program-card, .step-card, .trust-card,
.questionnaire-section, .form-section, .pricing-option, .program-option,
.review-item, .breed-option-card, .weight-card, .pet-info-card,
.common-features, .additional-info, .upload-area, .documents-section {
    color: var(--ink-900);
}

.card p, .card li, .card h4, .card small, .card strong,
.info-card p, .info-card li, .info-card h4, .info-card small,
.program-card p, .program-card li, .program-card h4, .program-card small, .program-card strong,
.step-card p, .step-card li, .step-card h4, .step-card small,
.trust-card p, .trust-card div, .trust-card small,
.questionnaire-section p, .questionnaire-section li, .questionnaire-section h4, .questionnaire-section small,
.common-features p, .common-features li, .common-features h3, .common-features h4,
.additional-info p, .additional-info li, .additional-info h4,
.pricing-option p, .pricing-option div, .pricing-option small,
.review-item p, .review-item span, .review-item strong {
    color: var(--ink-900);
}

.program-card .program-subtitle,
.card small, .info-card small, .program-card small,
.questionnaire-section small, .pricing-option small {
    color: var(--ink-700);
}

/* 10c. Elements that legitimately keep white text (solid brand fill) */
.step-number,
.selected-tag,
.popular-badge,
.program-badge,
.option-badge.recommended,
.discount-highlight,
.knowledge-btn.active,
.condition-item.selected,
.condition-item.selected .condition-text,
.condition-item.selected .condition-checkbox,
.name-suggestion.selected,
.guide-cta-btn,
.affiliate-apply-btn,
.edit-btn, .save-btn, .cancel-btn,
.add-pet-btn, .save-second-pet-btn,
.silver-btn, .gold-btn, .platinum-btn,
.submit-btn {
    color: #ffffff !important;
}

/* Those chips need a solid fill to justify the white text */
.step-number,
.selected-tag,
.discount-highlight {
    background: var(--color-primary) !important;
    background-image: none !important;
}

.condition-item.selected {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.name-suggestion {
    background: var(--surface) !important;
    color: var(--ink-900) !important;
    border: 1.5px solid var(--line) !important;
}

.name-suggestion:hover {
    background: var(--teal-50) !important;
    color: var(--ink-900) !important;
    border-color: var(--teal-400) !important;
}

.name-suggestion.selected {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.guide-cta-btn,
.affiliate-apply-btn,
.add-pet-btn,
.save-btn,
.save-second-pet-btn,
.edit-btn,
.btn-upload {
    background: var(--color-primary) !important;
    background-image: none !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: var(--r-md);
    min-height: 44px;
}

.cancel-btn,
.cancel-second-pet-btn {
    background: var(--surface) !important;
    color: var(--ink-700) !important;
    border: 1.5px solid var(--line-strong) !important;
}

/* Upload surfaces */
.upload-area, .upload-zone, .dropzone {
    background: var(--surface-soft) !important;
    border: 2px dashed var(--line-strong) !important;
    color: var(--ink-900) !important;
}

.upload-icon, .upload-icon-large { filter: none; opacity: 1; }

/* 10d. Inline overrides that fight the palette */
[style*="#4A90E2"], [style*="#E24A90"], [style*="#E91E63"] {
    color: var(--ink-700) !important;
}

[style*="background: #ccc"], [style*="background:#ccc"] {
    background: var(--line-strong) !important;
    color: var(--ink-900) !important;
}

/* Decorative floaters must never be picked up as content */
.floating-element {
    pointer-events: none;
    user-select: none;
}


/* ---------- 11. Remaining low-contrast leftovers -------------------------
   Two families were still failing after the remap:
   (a) secondary copy set to rgba(255,255,255,.7-.9) — invisible on white;
   (b) headings tinted with the light brand tones (#5ac8bd / #27ae60), which
       reach only 2.0-2.9:1 on a white card.  Both move onto the ink / deep
       teal steps, which are AA-verified. */

/* (a) translucent-white body copy -> ink */
.gender-description,
.weight-description,
.health-description,
.pet-description,
.guide-subtitle,
.step-description,
.affiliate-subtitle,
.affiliate-benefits .benefit-text,
.form-header p,
.privacy-notice small,
.step-content p,
.choice-description,
.benefit-item,
.benefit,
.review-item strong,
.edit-item label,
.readonly-field,
.program-subtitle,
.feature-group li,
.feature-group small,
.participation-info,
.common-feature,
.info-card p,
.program-label,
.non-covered-header p,
.item-content p,
.declaration-subtitle,
.declaration-content p,
.form-hint,
.weight-info,
.period,
.option-total small,
.discount-text small,
.message-content p,
.second-pet-header p,
.second-pet-note,
.pet-type-note,
.health-warning p,
.pet-info,
.trust-count,
.second-pet-form .form-header p,
.original-price,
.pet-summary-header h5 {
    color: var(--ink-700) !important;
}

.pet-type,
.pet-name-display,
.selected-title,
.other-input-title,
.cat-breed-name,
.discount-text strong {
    color: var(--ink-900) !important;
}

/* (b) light-teal / light-green headings -> deep teal */
.option-title,
h3.option-title,
span.option-title,
.section-title,
.subsection-title,
.instruction-text,
.date-separator,
.weight-range,
.form-check-label,
.pet-summary-header,
.upload-section h3,
.documents-section h3 {
    color: var(--teal-800) !important;
}

.instruction-text {
    color: var(--ink-700) !important;
}

/* Placeholders keep a single muted tone */
.affiliate-input::placeholder,
.email-input::placeholder,
.edit-input::placeholder,
.date-input::placeholder,
.breed-input::placeholder,
.form-group input::placeholder,
.pet-name-input::placeholder {
    color: var(--ink-500) !important;
}

/* Headings must never rely on the transparent-fill gradient trick */
.pet-name,
.form-header h3,
.hero-title {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

.pet-name { color: var(--ink-900) !important; }
.form-header h3, .form-header h2 { color: var(--teal-900) !important; }
.hero-title { color: var(--teal-900) !important; }

/* Counters / progress figures */
.upload-count,
.photo-count,
.upload-progress span {
    color: var(--teal-800) !important;
    font-weight: 700;
}

/* Any remaining ad-hoc CTA that only styles itself inline */
button.btn.btn-lg[style*="brand-gradient"],
a.btn.btn-lg[style*="brand-gradient"],
.btn[style*="brand-gradient"] {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: var(--on-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
}

.success-text, .valid-text, .input-feedback.valid { color: var(--color-success) !important; }
.error-text, .input-feedback.invalid { color: var(--color-danger) !important; }

/* Plan tiers: white-on-tier must clear 4.5:1, so Gold moves one step deeper */
:root {
    --tier-silver: #56706c;
    --tier-gold: #1f6f68;
    --tier-platinum: #0e3a36;
}


/* ---------- 12. Section headers on light sections ------------------------ */
.affiliate-title,
.affiliate-icon,
.guide-title,
.upload-header h3,
.upload-header .upload-icon,
.photo-counter p,
.photo-counter span,
.upload-counter span,
.guide-header h2,
.affiliate-header h3 {
    color: var(--teal-900) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

.photo-counter p,
.upload-counter p {
    color: var(--ink-700) !important;
}

.photo-counter span,
.upload-counter span {
    font-weight: 700;
}

/* Recommendation chip needs its own fill to carry white text */
.discount-badge,
.recommended-badge,
.option-badge {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
}

.discount-icon { color: #fff !important; }

/* Highlighted total: brand tone deep enough to read */
.total-price,
.option-price,
.price-value,
.pricing-option .price {
    color: var(--teal-900) !important;
}

/* Decorative emoji layer is presentational only (excluded from the contrast
   audit: emoji glyphs paint their own colours, `color` does not apply). */
.floating-element,
.floating-decorations span {
    text-shadow: none;
}

/* Discount badge: the chip itself is the filled surface, its children inherit */
.discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
}

.discount-badge .discount-text,
.discount-badge .discount-text strong,
.discount-badge .discount-text small,
.discount-highlight .discount-text {
    color: #ffffff !important;
}

/* Selected payment frequency: figure sits on the tinted card */
.pricing-option .price,
.pricing-option.selected .price,
.payment-option .price,
.option-amount {
    color: var(--teal-900) !important;
    font-weight: 700;
}


/* ---------- 13. Shell polish -------------------------------------------- */
/* The wordmark asset is a white lockup, so the header keeps a deep brand band
   rather than the white surface — otherwise the logo disappears. */
.logo-header {
    background: var(--brand-gradient) !important;
    border-bottom: none;
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0;
}

.company-logo {
    height: 44px;
    width: auto;
}

/* Feature chips: full pill instead of a stray left border */
.common-feature,
.feature-chip,
.step-features span {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    box-shadow: none;
}

.common-features,
.additional-info,
.participation-info {
    background: var(--surface-soft) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* Form shells sit on their own white card */
.form-container,
.user-data-container,
.data-form,
.pricing-section,
.second-pet-section,
.documents-section,
.upload-section {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem;
}

/* Program tier header band keeps a light tint of its own tier */
.program-header {
    background: var(--teal-50) !important;
    border-bottom: 1px solid var(--line);
}

.program-card { overflow: hidden; }

/* Selected-program pill */
.program-label + .program-value,
.selected-program-badge {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
}


/* ---------- 14. Grid alignment ------------------------------------------
   With translucent cards the ragged column widths were invisible; on solid
   surfaces they read as broken. These containers become real grids. */
.trust-cards-container,
.benefits-grid,
.pet-selection,
.journey-steps,
.common-features-grid,
.weight-options,
.breed-options,
.program-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
    justify-content: center;
}

.trust-cards-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefits-grid         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pet-selection         { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
.journey-steps         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.common-features-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.weight-options        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.breed-options         { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }

.trust-card,
.benefit-item,
.pet-card,
.step-card,
.weight-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    margin: 0 !important;
}

.pet-card, .weight-card { text-align: center; }

.affiliate-card {
    max-width: 520px;
    margin-inline: auto;
}

.customer-quote {
    max-width: 640px;
    margin-inline: auto;
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--r-md);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 991.98px) {
    .trust-cards-container,
    .benefits-grid,
    .journey-steps,
    .common-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weight-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .trust-cards-container,
    .benefits-grid,
    .pet-selection,
    .journey-steps,
    .common-features-grid,
    .weight-options { grid-template-columns: 1fr; }
}

/* Kill the leftover full-bleed decorative wash from the old teal page */
body::before,
body::after {
    opacity: 0.12;
}


/* ---------- 15. Callouts -------------------------------------------------
   Per-template <style> blocks used raw Bootstrap-3 alert tints (#fff3cd,
   #d1ecf1, #f8d7da, #d4edda). They are kept semantically (warning / info /
   error / success) but re-toned so they belong to the palette, and their text
   colours are set for AA on the new tints. */
.special-breed-section,
[style*="#fff3cd"],
[style*="#FFF3CD"] {
    background: var(--color-warning-soft) !important;
    border-left: 4px solid #c98a12 !important;
    border-radius: var(--r-md) !important;
    color: var(--ink-900) !important;
}

.special-breed-section .subsection-title,
.special-breed-section strong {
    color: #6d4406 !important;
}

.special-breed-section .info-text,
.special-breed-section .checkbox-label {
    color: var(--ink-900) !important;
}

[style*="#d1ecf1"] {
    background: var(--teal-50) !important;
    border-left: 4px solid var(--color-primary) !important;
    color: var(--ink-900) !important;
}

[style*="#f8d7da"] {
    background: var(--color-danger-soft) !important;
    border-left: 4px solid var(--color-danger) !important;
    color: var(--ink-900) !important;
}

[style*="#d4edda"] {
    background: var(--color-success-soft) !important;
    border-left: 4px solid var(--color-success) !important;
    color: var(--ink-900) !important;
}

/* Inline #333 / #666 text inside callouts and questionnaires */
[style*="color: #333"],
[style*="color:#333"] { color: var(--ink-900) !important; }
[style*="color: #666"],
[style*="color:#666"] { color: var(--ink-700) !important; }

/* Questionnaire rhythm */
.question-group,
.declaration-group {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.question-group:last-child,
.declaration-group:last-child { border-bottom: none; }

.yes-no-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.yes-no-group .radio-label {
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.9rem;
    background: var(--surface);
}

.yes-no-group .radio-label:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--teal-50);
    font-weight: 600;
}

.details-field textarea,
.details-field input { margin-top: 0.5rem; }

/* Grand total: #5AC8CD on white is 1.99:1 — moved onto the deep step */
.breakdown-total,
.breakdown-total strong,
.breakdown-total span,
.total-row strong {
    color: var(--teal-900) !important;
    font-weight: 700;
}

.breakdown-total {
    background: var(--teal-50) !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: var(--r-md);
    padding: 0.9rem 1rem;
}

/* Price rows: label and figure on one baseline, never colliding on narrow
   screens (the total was overlapping its own label at 390px) */
.breakdown-item,
.breakdown-total,
.pricing-row,
.detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.breakdown-item > *,
.breakdown-total > *,
.pricing-row > * { min-width: 0; }

.breakdown-total strong:last-child,
.breakdown-item strong:last-child,
.pricing-row .pricing-value { margin-left: auto; white-space: nowrap; }


/* ============================================================================
   16. BRAND RESTORE
   ----------------------------------------------------------------------------
   The Hoolie teal is the product's identity and goes back to being the app
   background and header, exactly as it was.

   What actually caused the original illegibility was not the colour — it was
   WHITE TEXT on it: white on #5ac8bd is 2.01:1 and no amount of tuning fixes
   that.  Dark ink on the same teal is 6.95:1.  So the teal stays and the text
   flips to ink; cards stay white so long-form content still reads.
   ========================================================================= */

body {
    background: var(--brand-gradient) !important;
    background-attachment: fixed;
    color: var(--on-brand);
}

body::before,
body::after {
    opacity: 0.5;
}

.logo-header {
    background: var(--brand-gradient) !important;
    border-bottom: 1px solid rgba(16, 49, 46, 0.08);
}

/* Text sitting directly on the brand teal (outside cards) */
.hero-title,
.weight-title,
.guide-title,
.non-covered-header h2,
h1, h2 {
    color: var(--on-brand) !important;
    text-shadow: none !important;
}

.hero-subtitle,
.guide-subtitle,
.hero-section > .container > .hero-content > p {
    color: var(--on-brand) !important;
    opacity: 0.86;
}

/* Headings INSIDE white cards keep the deep teal — more brand than plain ink */
.card .hero-title,
.questionnaire-section h2,
.questionnaire-section h3,
.form-container h2,
.form-container h3,
.section-title,
.subsection-title,
.option-title,
.step-title,
.program-name,
.form-header h2,
.form-header h3 {
    color: var(--teal-800) !important;
}

/* Primary CTA must separate from a teal ground: one step deeper, white text
   (8.7:1 on the button, 4.3:1 against the page behind it). */
.btn-primary,
.submit-btn,
.next-btn,
.continue-btn,
.apply-btn,
.affiliate-apply-btn,
.guide-cta-btn,
.add-pet-btn,
.save-btn,
.save-second-pet-btn,
.edit-btn,
.btn-upload,
button[type="submit"] {
    background: #17544f !important;
    border-color: #17544f !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.submit-btn:hover,
.next-btn:hover,
button[type="submit"]:hover {
    background: #0e3a36 !important;
    border-color: #0e3a36 !important;
}

/* Selected states use the brand teal itself, so the identity colour is what
   marks a choice */
.knowledge-btn.active,
.condition-item.selected,
.name-suggestion.selected,
.step-number,
.selected-tag,
.discount-highlight,
.discount-badge,
.popular-badge,
.recommended-badge,
.option-badge {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--on-brand) !important;
}

.knowledge-btn.active *,
.condition-item.selected *,
.discount-badge *,
.popular-badge *,
.option-badge * {
    color: var(--on-brand) !important;
}

.weight-card.selected,
.pricing-option.selected,
.breed-option-card.active,
.pet-card.selected,
.gender-card.selected,
.health-card.selected,
.program-card.popular {
    border-color: #17544f !important;
    background: var(--teal-50) !important;
}

.weight-card.selected::after,
.pricing-option.selected::after,
.breed-option-card.active::after {
    background: #17544f;
    color: #fff;
}

/* Secondary action on a teal page: solid white, quiet weight */
.btn-light,
.back-btn,
.cancel-btn,
.cancel-second-pet-btn {
    background: #ffffff !important;
    color: var(--ink-700) !important;
    border-color: rgba(16, 49, 46, 0.15) !important;
}

/* Tier chips: keep the brand family, all AA */
:root {
    --tier-silver: #56706c;
    --tier-gold: #1f6f68;
    --tier-platinum: #0e3a36;
}

/* Cards keep a clean edge against the teal ground */
.card, .info-card, .program-card, .step-card, .trust-card,
.questionnaire-section, .form-section, .form-container, .pricing-section,
.pricing-option, .program-option, .review-item, .breed-option-card,
.weight-card, .pet-info-card, .pet-card, .gender-card, .health-card,
.affiliate-card, .customer-quote, .benefit-item, .documents-section,
.upload-section, .second-pet-section, .common-features, .additional-info {
    border-color: rgba(16, 49, 46, 0.10) !important;
    box-shadow: 0 2px 4px rgba(16, 49, 46, 0.06), 0 10px 28px rgba(16, 49, 46, 0.10) !important;
}

.common-features,
.additional-info,
.participation-info {
    background: #ffffff !important;
}

.focus-ring,
:focus-visible {
    outline-color: #0e3a36;
}

/* Small chips carry white text, so they need the deep step, not the light
   brand tone (white on #4fb3a8 is 2.52:1) */
.discount-badge,
.discount-highlight,
.popular-badge,
.recommended-badge,
.option-badge,
.option-badge.recommended,
.selected-tag {
    background: #17544f !important;
    border-color: #17544f !important;
}

.discount-badge .discount-text,
.discount-badge .discount-text strong,
.discount-badge .discount-text small,
.discount-badge .discount-icon,
.discount-highlight .discount-text,
.popular-badge,
.recommended-badge,
.option-badge,
.option-badge.recommended,
.selected-tag,
.step-number {
    color: #ffffff !important;
}

.step-number { background: #17544f !important; }

/* One surface rule for every card so the page does not mix white and tinted
   panels at the same level */
.pet-card,
.affiliate-card,
.step-card,
.trust-card,
.benefit-item,
.gender-card,
.health-card,
.info-card,
.customer-quote,
.condition-item,
.name-suggestion,
.date-option-card,
.pet-option-card,
.health-option {
    background: #ffffff !important;
}

.pet-card.selected,
.gender-card.selected,
.health-card.selected,
.date-option-card.active,
.condition-item.selected {
    background: var(--teal-50) !important;
}

.condition-item.selected { background: #17544f !important; }

/* A selected control must separate from the teal ground, so the active state
   uses the deep step (the brand tone is too close to the page behind it) */
.knowledge-btn.active,
.yes-no-group .radio-label:has(input:checked) {
    background: #17544f !important;
    border-color: #17544f !important;
    color: #ffffff !important;
}

.knowledge-btn.active * ,
.yes-no-group .radio-label:has(input:checked) * {
    color: #ffffff !important;
}


/* ============================================================================
   17. CONTRAST — SECOND PASS
   ----------------------------------------------------------------------------
   Found after the audit was taught to resolve gradient backgrounds. Until then
   every element sitting directly on the brand gradient was being scored
   against white, which hid two whole families of failure:

     * body copy on the teal set to ink-700 (#395551) -> 3.2-3.7:1
     * non-text contrast (WCAG 1.4.11): input and card borders at 1.0-1.7:1
       against what surrounds them

   Verified numbers on the three gradient stops (#5ac8bd / #4fb3a8 / #7dd3ca):
     #10312e text  -> 6.95 / 5.56 / 8.02   AA for body copy
     #0e3a36 text  -> 6.22 / 4.98 / 7.18   AA
     #17544f edge  -> 4.31 / 3.45 / 4.98   and 8.69 on white  <- only tone that
                      clears 3:1 against BOTH the teal and a white card
   ========================================================================= */

/* ---- 17a. Any copy that sits directly on the brand gradient ------------- */
.hero-section > .container > .hero-content > p,
.hero-subtitle,
.guide-subtitle,
.declaration-subtitle,
.hero-content > p,
.hero-content > small,
.hero-content > strong,
.hero-content > h3,
.hero-content > h4,
.hero-content > h5,
.program-label,
.email-form-container > p,
.email-form-container > small,
.privacy-notice small {
    color: #10312e !important;
    opacity: 1 !important;
}

.hero-title,
.weight-title,
.guide-title,
.non-covered-header h2,
.hero-content > h1,
.hero-content > h2 {
    color: #0e3a36 !important;
    opacity: 1 !important;
}

/* Bootstrap muted text loses all meaning on teal */
.text-muted,
p.text-muted,
small.text-muted {
    color: #10312e !important;
    opacity: 0.9;
}

.card .text-muted,
.form-card .text-muted,
.confirmation-card .text-muted {
    color: var(--ink-700) !important;
    opacity: 1;
}

/* ---- 17b. Thank-you page (never converted; white text on teal) ---------- */
.confirmation-card,
.final-pet-summary,
.contact-info,
.cta-section,
.confirmation-steps,
.application-number-display,
.form-card,
.email-form-container {
    background: #ffffff !important;
    border: 1px solid rgba(23, 84, 79, 0.18) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.confirmation-card *,
.final-pet-summary *,
.contact-info *,
.confirmation-steps *,
.application-number-display *,
.form-card > *:not(.btn):not(button),
.email-form-container > *:not(.btn):not(button) {
    color: var(--ink-900) !important;
}

.confirmation-card h4,
.confirmation-card h5,
.confirmation-header h2,
.final-pet-summary h4,
.contact-info h5,
.form-header h2,
.form-header h3 {
    color: var(--teal-800) !important;
}

.application-number-display,
.application-number-display strong {
    color: var(--teal-900) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.contact-info a { color: var(--teal-800) !important; text-decoration: underline; }

/* Outline-light button is unreadable on a light ground */
.btn-outline-light {
    background: #ffffff !important;
    color: var(--ink-900) !important;
    border: 1.5px solid #17544f !important;
}

.btn-outline-light:hover {
    background: var(--teal-50) !important;
    color: var(--ink-900) !important;
}

/* ---- 17c. Non-text contrast: component boundaries (WCAG 1.4.11) -------- */
/* Inputs: #b6cdc9 was 1.67:1 on white. */
.form-control,
.form-select,
.breed-input,
.breed-select,
.email-input,
.date-input,
.pet-name-input,
.affiliate-input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    border-color: #17544f !important;
    border-width: 1.5px !important;
}

/* Selectable cards and controls need a boundary that reads against BOTH the
   teal page and their own white fill. */
.weight-card,
.pet-card,
.gender-card,
.health-card,
.breed-option-card,
.pricing-option,
.program-option,
.knowledge-btn,
.date-option-card,
.name-suggestion,
.condition-item,
.program-card,
.btn-light,
.back-btn,
.cancel-btn,
.cancel-second-pet-btn,
.card {
    border: 1.5px solid rgba(23, 84, 79, 0.55) !important;
}

.weight-card.selected,
.pet-card.selected,
.gender-card.selected,
.health-card.selected,
.breed-option-card.active,
.pricing-option.selected,
.date-option-card.active,
.program-card.popular,
.knowledge-btn.active,
.condition-item.selected,
.name-suggestion.selected {
    border: 2px solid #17544f !important;
}

/* Static containers stay quiet — 1.4.11 covers interactive components */
.questionnaire-section,
.form-section,
.form-container,
.common-features,
.additional-info,
.trust-card,
.step-card,
.benefit-item,
.customer-quote,
.info-card,
.affiliate-card,
.pet-info-card {
    border: 1px solid rgba(23, 84, 79, 0.18) !important;
}

/* Tier pill: grey text on a grey pill was 1.54:1 */
.program-name,
.selected-program-card .program-name,
span.program-name {
    color: #ffffff !important;
    background: #17544f !important;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    display: inline-block;
    font-weight: 600;
}


/* ---- 17d. Third pass: solid boundaries + last text nodes ---------------- */
/* rgba(23,84,79,.55) blends with the teal behind it and lands at 1.89:1.
   The boundary has to be opaque to hold 3:1 on both grounds. */
.weight-card,
.pet-card,
.gender-card,
.health-card,
.breed-option-card,
.pricing-option,
.program-option,
.knowledge-btn,
.date-option-card,
.name-suggestion,
.condition-item,
.program-card,
.btn-light,
.back-btn,
.cancel-btn,
.cancel-second-pet-btn,
.card,
.btn.btn-lg,
.btn-outline-light {
    border: 1px solid #17544f !important;
}

.weight-card.selected,
.pet-card.selected,
.gender-card.selected,
.health-card.selected,
.breed-option-card.active,
.pricing-option.selected,
.date-option-card.active,
.program-card.popular,
.knowledge-btn.active,
.condition-item.selected,
.name-suggestion.selected {
    border: 2px solid #17544f !important;
}

/* Primary buttons carry their own fill; the border must not fight it */
.btn-primary,
.submit-btn,
.next-btn,
button[type="submit"],
.affiliate-apply-btn,
.guide-cta-btn,
.add-pet-btn,
.save-btn,
.btn-upload {
    border: 1px solid #17544f !important;
}

/* Readonly / prefilled inputs kept a near-white edge */
input[readonly],
input:disabled,
.form-control:disabled,
.form-control[readonly] {
    border-color: #17544f !important;
    background: var(--surface-soft) !important;
    color: var(--ink-900) !important;
}

/* Copy on the teal inside header blocks (non-covered, declarations, guides) */
.non-covered-header p,
.non-covered-header h2,
.guide-header p,
.affiliate-header p,
.section-header p,
.hero-content .lead {
    color: #10312e !important;
    opacity: 1 !important;
}

/* Hard-coded greys from template inline styles */
[style*="#7f8c8d"],
[style*="#95a5a6"],
[style*="#bdc3c7"] {
    color: var(--ink-700) !important;
}

.cta-section p,
.cta-section small {
    color: var(--ink-700) !important;
}

/* Tier pill text must beat the tier-coloured rules that set it grey */
.selected-program-card .program-name,
.selected-program-card.program-silver .program-name,
.selected-program-card.program-gold .program-name,
.selected-program-card.program-platinum .program-name,
span.program-name,
.program-name {
    color: #ffffff !important;
    background: #17544f !important;
}


/* ---- 17e. Two leftovers ------------------------------------------------- */
/* `:read-only` also matches radios and checkboxes (they are never editable),
   so the disabled-field tint was landing on them. Scope it to text fields. */
input[type="text"]:read-only,
input[type="tel"]:read-only,
input[type="email"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
textarea:read-only {
    background: var(--surface-soft) !important;
    color: var(--ink-900) !important;
}

input[type="radio"],
input[type="checkbox"] {
    background: transparent !important;
    border: none !important;
    accent-color: #17544f;
}

/* The inline-gradient CTA rule from §11 outranked the boundary rule */
button.btn.btn-lg[style*="brand-gradient"],
a.btn.btn-lg[style*="brand-gradient"],
.btn[style*="brand-gradient"] {
    border: 1px solid #17544f !important;
}


/* ============================================================================
   18. RESPONSIVENESS FIXES
   ----------------------------------------------------------------------------
   Measured across 320 / 375 / 390 / 414 / 768 / 844-landscape.
   No page scrolled horizontally, but several elements were rendering WIDER
   than the viewport and getting silently clipped by `overflow-x: hidden`:

     .pet-card at 390px -> 422px wide, left edge at -16px

   Cause: min-width 280px + 3rem/2rem padding (= 344px before any scaling) and
   a scale(1.15) applied on selection. Cards must fit their column and a press
   state must never change layout bounds.
   ========================================================================= */

.pet-card,
.gender-card,
.health-card,
.weight-card,
.breed-option-card,
.pricing-option,
.program-card,
.date-option-card {
    min-width: 0 !important;
    max-width: 100%;
}

/* Press/selection feedback must not grow past the container */
.pet-card.selected,
.pet-card:hover,
.gender-card.selected,
.health-card.selected,
.weight-card.selected,
.pricing-option.selected {
    transform: none !important;
}

@media (hover: hover) and (min-width: 768px) {
    .pet-card:hover,
    .weight-card:hover,
    .gender-card:hover,
    .health-card:hover {
        transform: translateY(-4px) !important;
    }
}

@media (max-width: 767.98px) {
    /* Padding scaled to the smallest phones (320px still has 288px of room) */
    .pet-card,
    .gender-card,
    .health-card,
    .weight-card,
    .breed-option-card,
    .program-card,
    .questionnaire-section,
    .form-container,
    .form-section,
    .confirmation-card,
    .form-card,
    .pricing-section {
        padding: 1.25rem !important;
    }

    .container,
    .hero-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 13.6px / 12.8px body copy was landing below the 14px floor */
    .program-features li,
    .feature-group li,
    .feature-group small,
    .participation-info,
    .common-feature,
    .form-hint,
    .option-total small,
    small,
    .small {
        font-size: 0.875rem !important;   /* 14px */
        line-height: 1.55;
    }

    .popular-badge,
    .option-badge,
    .discount-badge,
    .program-badge {
        font-size: 0.8125rem !important;  /* 13px, non-body chip */
    }

    /* Long Greek headings need room to breathe on 320px */
    .hero-title { font-size: clamp(1.5rem, 5.6vw, 2rem) !important; hyphens: auto; }
    .section-title { font-size: 1.15rem !important; }
    .subsection-title { font-size: 1.05rem !important; }

    /* Nothing may exceed its column */
    img, svg, video, canvas, table { max-width: 100%; height: auto; }
}

/* Landscape phones: the fixed background made scrolling feel stuck */
@media (max-height: 480px) and (orientation: landscape) {
    body { background-attachment: scroll; }
    .hero-section { padding: 1rem 0 2rem; }
}

/* Tablet: cards were stretching to full width and losing their proportions */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pet-selection { max-width: 640px; }
    .pet-card { padding: 2rem 1.5rem !important; }
}

/* 14px floor for body copy on every screen, not just phones — the plan
   feature lists were 13.6px and the participation note 12.8px */
.program-features li,
.feature-group li,
.feature-group small,
.participation-info,
.common-feature,
.coverage-item,
.step-features span {
    font-size: 0.875rem !important;
    line-height: 1.55;
}

/* Price + unit stay on one line and wrap as a unit */
.pricing-option .price,
.option-price,
.price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.period,
.price-period {
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Money-bearing helper text should not sit at 12.8px */
.pricing-option small,
.option-total small,
.payment-option small,
.discount-text small,
.form-hint,
.second-pet-note,
.benefit {
    font-size: 0.875rem !important;
}

/* Action rows: on phones both buttons go full width and the primary is always
   last (nearest the thumb), whatever order the template used */
@media (max-width: 767.98px) {
    .navigation-buttons,
    .form-actions,
    .action-buttons,
    .cta-section .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    .navigation-buttons > *,
    .form-actions > *,
    .action-buttons > * {
        width: 100% !important;
        margin: 0 !important;
    }

    .navigation-buttons .btn-primary,
    .navigation-buttons .submit-btn,
    .navigation-buttons .next-btn,
    .navigation-buttons button[type="submit"],
    .form-actions .btn-primary,
    .form-actions .submit-btn,
    .action-buttons .btn-primary,
    .action-buttons .submit-btn { order: 2; }

    .navigation-buttons .btn-light,
    .navigation-buttons .back-btn,
    .form-actions .btn-light,
    .action-buttons .btn-light,
    .action-buttons .btn-outline-light { order: 1; }
}


/* ---------- 18b. Nested padding collapse ---------------------------------
   Measured on a 390px phone, the payment card sat six padded wrappers deep:

     container 16+16 -> hero-content 16+16 -> user-data-container 28+28
     -> user-data-card 24+24 -> pricing-section 20+20 -> pricing-card 24+24
     -> pricing-option 19+19   = 294px of padding, 82px left for content

   That is why the amounts were wrapping one word per line. On phones only the
   outermost card keeps horizontal padding; the wrappers in between go flat. */
@media (max-width: 767.98px) {
    .hero-content,
    .user-data-container,
    .user-form,
    .pricing-section,
    .pricing-card,
    .pricing-options,
    .pricing-breakdown,
    .second-pet-section,
    .payment-options,
    .questionnaire-container,
    .non-covered-container,
    .documents-container,
    .form-container > .form-section,
    .confirmation-steps,
    .email-form-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* The card that actually holds content keeps its padding */
    .user-data-card,
    .pricing-option,
    .questionnaire-section,
    .form-card,
    .confirmation-card,
    .program-card,
    .info-card,
    .step-card,
    .review-item {
        padding: 1rem !important;
    }

    .user-data-card {
        background: #ffffff !important;
        border: 1px solid rgba(23, 84, 79, 0.18) !important;
        box-shadow: var(--shadow-soft) !important;
        border-radius: var(--r-lg);
        padding: 1rem !important;
    }

    /* Payment options: label left, amount right, on one row */
    .pricing-option .option-header,
    .pricing-option .option-body {
        width: 100%;
    }

    .pricing-option .price,
    .pricing-option .option-price {
        font-size: 1.5rem !important;
        white-space: nowrap;
    }
}

/* Prose measure: consent and declaration text ran 80-100 characters per line
   on tablet and landscape. 65-75 is the readable band. */
.declaration-content p,
.declaration-group p,
.question-label,
.info-text,
.non-covered-header p,
.step-description,
.hero-subtitle,
.confirmation-card p,
.contact-info p {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

.declaration-content,
.declaration-group { max-width: 72ch; margin-inline: auto; }


/* ============================================================================
   19. FUNNEL PATTERNS
   ----------------------------------------------------------------------------
   Inspired by barkibu.com/el (inspected with Playwright, not copied):
     - one question per screen, a single centred card, everything else stripped
     - pill-shaped answer chips instead of bare radio rows
     - generous whitespace and a calm, low-density step

   Colours and the brand gradient are untouched; only rhythm, shape and density
   change. The progress bar is NOT a Barkibu pattern (their funnel has none) —
   it is added because this flow is 11 screens deep instead of their 4.
   ========================================================================= */

/* ---- 19a. Progress indicator ------------------------------------------- */
.funnel-progress {
    max-width: 1140px;
    margin: 0.5rem auto 0;
    padding: 0 1rem 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.funnel-progress__track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(16, 49, 46, 0.16);
    overflow: hidden;
}

.funnel-progress__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #17544f;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-progress__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #10312e;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .funnel-progress { flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .funnel-progress__label { font-size: 0.75rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .funnel-progress__bar { transition: none; }
}

/* ---- 19b. Answer chips -------------------------------------------------- */
/* ΝΑΙ/ΟΧΙ and option rows read as tappable pills rather than form rows. */
.yes-no-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.yes-no-group .radio-label {
    border: 1.5px solid #17544f;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    background: #ffffff;
    font-weight: 600;
    min-width: 96px;
    justify-content: center;
    transition: background 160ms ease, transform 120ms ease;
}

.yes-no-group .radio-label:active { transform: scale(0.97); }

.yes-no-group .radio-label:has(input:checked) {
    background: #17544f;
    color: #ffffff;
}

.yes-no-group .radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---- 19c. Step breathing room ------------------------------------------ */
/* Barkibu's funnel screens are one centred card with a lot of air around the
   question. These are the equivalent containers here. */
@media (min-width: 768px) {
    .breed-options,
    .pet-selection,
    .weight-options,
    .date-options,
    .gender-options,
    .health-options {
        max-width: 760px;
        margin-inline: auto;
    }

    .questionnaire-section,
    .form-container {
        max-width: 820px;
        margin-inline: auto;
        padding: 2rem 2.25rem;
    }

    .hero-section { padding-top: 3rem; }
}

.question-group {
    padding: 1.25rem 0;
}

.question-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ---- 19d. Sticky action bar -------------------------------------------- */
/* On the long screens the primary action was below several thousand pixels of
   content. It now rides the bottom of the viewport on phones. */
@media (max-width: 767.98px) {
    .navigation-buttons,
    .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 1.5rem -1rem 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid rgba(23, 84, 79, 0.18);
    }

    /* Room so the sticky bar never covers the last field */
    #main-content { padding-bottom: 1rem; }
}

/* ---- 19e. Icon chips ---------------------------------------------------- */
/* The emoji are still emoji, but they sit in a consistent tinted disc so they
   read as deliberate iconography instead of loose glyphs. */
.option-icon,
.benefit-icon,
.item-icon,
.upload-icon,
.step-icon,
.health-icon,
.weight-icon,
.pet-icon-small {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--teal-50);
    border: 1px solid rgba(23, 84, 79, 0.18);
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
}

.pet-icon-small { width: 36px; height: 36px; font-size: 18px; }

/* The fixed header grows when the progress bar is visible; --header-h is
   published by funnel-progress.js and only the surplus is added, so the
   existing 80px/70px offsets keep working when the bar is hidden. */
#main-content {
    padding-top: calc(80px + max(0px, var(--header-h, 80px) - 80px)) !important;
}

@media (max-width: 767.98px) {
    #main-content {
        padding-top: calc(70px + max(0px, var(--header-h, 70px) - 70px)) !important;
    }
}

/* Sticky action bar: back stays compact, the primary takes the width */
@media (max-width: 767.98px) {
    .navigation-buttons,
    .form-actions {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .navigation-buttons > *,
    .form-actions > * {
        width: auto !important;
        flex: 1 1 auto;
    }

    .navigation-buttons .btn-light,
    .navigation-buttons .back-btn,
    .form-actions .btn-light {
        flex: 0 0 auto !important;
        min-width: 96px;
        order: 1;
    }

    .navigation-buttons .btn-primary,
    .navigation-buttons .submit-btn,
    .navigation-buttons .next-btn,
    .navigation-buttons button[type="submit"],
    .navigation-buttons .btn[style*="brand-gradient"],
    .navigation-buttons .btn-lg:not(.btn-light),
    .form-actions .btn-primary,
    .form-actions .submit-btn,
    .form-actions .btn-lg:not(.btn-light) {
        flex: 1 1 auto !important;
        order: 2;
    }
}

/* Progress label sits at the 14px floor like the rest of the copy */
.funnel-progress__label { font-size: 0.875rem !important; }
@media (max-width: 575.98px) { .funnel-progress__label { font-size: 0.8125rem !important; } }


/* ============================================================================
   20. DISPLAY TREATMENT
   ----------------------------------------------------------------------------
   The original headlines had a white gradient shine that read well but scored
   2.01:1 on the brand teal. Flattening them to ink fixed the number and killed
   the character.

   Instead of choosing between the two, the headline gets a ground that can
   carry it: a deep-teal stage (#17544f -> #0e3a36) where white text measures
   8.69:1. The shine comes back, and it is now compliant rather than tolerated.
   ========================================================================= */

.hero-stage {
    position: relative;
    isolation: isolate;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    border-radius: 28px;
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(125, 211, 202, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, #1d635c 0%, #17544f 45%, #0e3a36 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 18px 48px rgba(9, 45, 42, 0.28);
    overflow: hidden;
    text-align: center;
}

/* Soft light sweep across the stage — one gesture, not a light show */
.hero-stage::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 160%;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.10) 47%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.10) 53%,
        transparent 62%);
    transform: translateX(-30%);
    animation: heroSheen 7s ease-in-out 1.2s infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes heroSheen {
    0%, 65%, 100% { transform: translateX(-40%); opacity: 0; }
    72%           { opacity: 1; }
    88%           { transform: translateX(40%); opacity: 0; }
}

.hero-title--display {
    color: #ffffff !important;
    font-size: clamp(2rem, 5.6vw, 3.6rem) !important;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
    text-shadow: 0 2px 24px rgba(9, 45, 42, 0.35);
}

/* The gradient shine from the original design, now over a dark ground */
.hero-title__shine {
    background: linear-gradient(96deg, #ffffff 0%, #d8f5f0 40%, #9fe4da 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* fallback for engines that ignore background-clip: text */
    text-shadow: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title__shine {
        -webkit-text-fill-color: #ffffff;
        color: #ffffff;
        background: none;
    }
}

.hero-subtitle--display {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
    margin: 1rem auto 0 !important;
    max-width: 46ch;
    opacity: 1 !important;
}

/* Funnel-step headings: not marketing, so they stay ink — but they get the
   same typographic care (scale, tracking, balance) plus a hairline highlight
   that lifts them off the teal without touching the measured contrast. */
.hero-title:not(.hero-title--display) {
    font-size: clamp(1.55rem, 3.4vw, 2.4rem) !important;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.weight-title,
.guide-title {
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .hero-stage::after { animation: none; opacity: 0; }
}

@media (max-width: 575.98px) {
    .hero-stage { border-radius: 22px; margin-bottom: 1.75rem; }
}


/* ============================================================================
   21. PROGRESS BAR — polished
   ----------------------------------------------------------------------------
   Segmented so the step count is readable at a glance, with a counter pill and
   the label. The fill animates once on load; the ticks make progress tangible
   in a way a plain bar does not.
   ========================================================================= */

.funnel-progress {
    max-width: 1140px;
    margin: 0.4rem auto 0;
    padding: 0 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.funnel-progress__track {
    position: relative;
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(9, 45, 42, 0.20);
    box-shadow: inset 0 1px 2px rgba(9, 45, 42, 0.22);
    overflow: hidden;
}

/* Tick marks: one per step, drawn as a repeating gradient so the count is
   visible without extra DOM */
.funnel-progress__track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(9.0909% - 1.5px),
        rgba(255, 255, 255, 0.55) calc(9.0909% - 1.5px),
        rgba(255, 255, 255, 0.55) 9.0909%);
    pointer-events: none;
}

.funnel-progress__bar {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #17544f 0%, #0e3a36 100%);
    box-shadow: 0 0 0 1px rgba(9, 45, 42, 0.25),
                0 0 14px rgba(14, 58, 54, 0.45);
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bright leading edge so the current position reads instantly */
.funnel-progress__bar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #d8f5f0;
    box-shadow: 0 0 8px rgba(216, 245, 240, 0.9);
}

.funnel-progress__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(9, 45, 42, 0.14);
    color: #10312e;
    font-weight: 650;
    font-size: 0.875rem !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(9, 45, 42, 0.12);
}

.funnel-progress__label b {
    font-weight: 700;
    color: #17544f;
}

@media (max-width: 575.98px) {
    .funnel-progress { gap: 0.5rem; padding-bottom: 0.4rem; }
    .funnel-progress__track { height: 8px; }
    .funnel-progress__label { font-size: 0.78rem !important; padding: 0.22rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .funnel-progress__bar { transition: none; }
}

/* Funnel-step headlines get the same stage treatment as the home hero, at a
   quieter scale: the question sits on a deep-teal band, so it can be white
   (8.7:1) instead of ink. One visual family across the whole flow — and no
   markup change, since the h1 itself becomes the band. */
.hero-section:not(.hero-section--home) .hero-title {
    display: block;
    max-width: 900px;
    margin: 0 auto 2rem !important;
    padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 22px;
    color: #ffffff !important;
    background:
        radial-gradient(120% 160% at 12% 0%, rgba(125, 211, 202, 0.26) 0%, transparent 58%),
        linear-gradient(135deg, #1d635c 0%, #17544f 50%, #0e3a36 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 12px 32px rgba(9, 45, 42, 0.22);
    text-shadow: 0 2px 18px rgba(9, 45, 42, 0.3) !important;
    text-wrap: balance;
}

/* The subtitle under it stays on the teal ground in ink */
.hero-section:not(.hero-section--home) .hero-subtitle {
    margin-top: -1rem !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 575.98px) {
    .hero-section:not(.hero-section--home) .hero-title {
        border-radius: 18px;
        margin-bottom: 1.5rem !important;
    }
}

/* §11 sets `background: none !important` on .hero-title to kill the old
   transparent-fill trick; that also erased the new band, leaving white text
   on plain teal (2.01:1). The band has to win explicitly. */
.hero-section:not(.hero-section--home) .hero-title,
section.hero-section:not(.hero-section--home) h1.hero-title {
    background:
        radial-gradient(120% 160% at 12% 0%, rgba(125, 211, 202, 0.26) 0%, transparent 58%),
        linear-gradient(135deg, #1d635c 0%, #17544f 50%, #0e3a36 100%) !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Same for the home stage headline: its shine must survive §11 */
.hero-title--display { background: none !important; }

.hero-title--display .hero-title__shine {
    background: linear-gradient(96deg, #ffffff 0%, #d8f5f0 40%, #9fe4da 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* The progress row stays horizontal at every width: in column mode the track
   is an empty flex item, so `align-items: center` collapsed it to 0x0. */
.funnel-progress {
    flex-direction: row !important;
    align-items: center !important;
}

.funnel-progress__track {
    flex: 1 1 auto !important;
    min-width: 80px;
    align-self: center;
}

@media (max-width: 575.98px) {
    .funnel-progress { gap: 0.5rem; }
    .funnel-progress__label { flex: 0 0 auto; }
}

/* Those step headings wrap part of their text in a <span> that still carries
   the old inline gradient; §17 recoloured it to deep teal, which is now dark
   text on the dark band. Inside the band everything is white. */
.hero-section:not(.hero-section--home) .hero-title span,
.hero-section:not(.hero-section--home) .hero-title * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

@media (max-width: 575.98px) {
    .funnel-progress__label { font-size: 0.8125rem !important; }
}
/* ============================================================================
   31. HOOLIE — GREEK TYPE SYSTEM (Manrope v20)
   ----------------------------------------------------------------------------
   Manrope's Greek subset is complete (75 codepoints, all tonos capitals and
   the stacked ΐ ΰ present), properly kerned (552 GPOS class cells), and its
   Greek x-height is IDENTICAL to its Latin (1080/2000 = 0.540em), so mixed
   strings like «Κάλυψη 24/7» and «€12,50/μήνα» sit on one optical line.
   All numbers below are measured from the real outlines, upem 2000:
     cap height    1440 =  0.720em
     x-height      1080 =  0.540em
     Greek accent  1530 =  0.765em   (ά έ ή ί ό ύ ώ ΐ ΰ — ABOVE Latin ascender)
     Greek desc.   -480 = -0.240em   (β ρ μ)
   Two hard limits: Manrope ships NO italic (synthesised oblique shears Greek
   α ε σ ω badly — emphasise with weight), and NO greek-ext (no polytonic).
   ========================================================================= */

/* Metric-matched fallback: kills the display=swap reflow with no JS.
   Manrope x-height 0.540em vs Arial 0.519em -> size-adjust 104%. */
@font-face {
    font-family: 'Manrope Fallback';
    src: local('Helvetica Neue'), local('Arial'),
         local('Segoe UI'), local('Roboto');
    size-adjust:        104%;
    ascent-override:    102.5%;   /* 106.6 / 1.04 */
    descent-override:    28.8%;   /*  30.0 / 1.04 */
    line-gap-override:      0%;
}

:root {
    --font-sans: 'Manrope', 'Manrope Fallback', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

    /* fluid scale — exact at 320px, exact at 1440px */
    --fs-display: clamp(2rem,      1.4286rem + 2.8571vw, 4rem);    /* 32 -> 64 */
    --fs-h1:      clamp(1.75rem,   1.4643rem + 1.4286vw, 2.75rem); /* 28 -> 44 */
    --fs-h2:      clamp(1.375rem,  1.1964rem + 0.8929vw, 2rem);    /* 22 -> 32 */
    --fs-h3:      clamp(1.125rem,  1.0179rem + 0.5357vw, 1.5rem);  /* 18 -> 24 */
    --fs-lead:    clamp(1.0625rem, 1.0089rem + 0.2679vw, 1.25rem); /* 17 -> 20 */

    /* FIXED — form UI must never scale with the viewport */
    --fs-body:  1rem;       /* 16 */
    --fs-input: 1rem;       /* 16 — below this iOS Safari zooms on focus */
    --fs-label: 0.9375rem;  /* 15 */
    --fs-help:  0.875rem;   /* 14 */
    --fs-legal: 0.875rem;   /* 14 — floor for consent copy in Greek */
    --fs-caps:  0.8125rem;  /* 13 — eyebrow only, never sentences */

    --fs-price:    clamp(2rem,   1.7143rem + 1.4286vw, 3rem); /* 32 -> 48 */
    --fs-price-xl: clamp(2.5rem, 2.0714rem + 2.1429vw, 4rem); /* 40 -> 64 */
    --fs-price-sm: 1.25rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* GREEK LINE-HEIGHT FLOOR: accent 0.765em + descender 0.240em = 1.005em.
       Below 1.005 the tonos of line N+1 physically strikes the ρ/β/μ tail of
       line N. Practical floor 1.10. This is the #1 thing Latin scales get
       wrong when Greek is poured into them. Body copy needs NO extra leading:
       Greek's total envelope (1.005em) is smaller than Latin-with-accented-
       caps (1.20em), so 1.6 is generous. */
    --lh-display: 1.12;
    --lh-heading: 1.20;
    --lh-snug:    1.30;
    --lh-body:    1.60;
    --lh-legal:   1.65;

    /* TRACKING — Greek runs LOOSER than Latin at display sizes. Its round
       lowercase (ο σ ε ω θ) and wide monolinear caps (Σ Ξ Π Ω Φ) have no
       ascender rhythm to rebuild word-shape from, so negative tracking
       destroys word recognition fast. */
    --tr-display: -0.010em;   /* Latin would take -0.025em; Greek cannot */
    --tr-h1:      -0.005em;
    --tr-h2:       0em;
    --tr-body:     0.005em;   /* a hair positive opens the accents at 16px */
    --tr-label:    0.010em;
    --tr-legal:    0.010em;
    --tr-caps:     0.060em;   /* Greek caps set solid read as a grey wall */
    --tr-price:   -0.020em;   /* digits are Latin -> Latin rules */
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size:   var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    /* Manrope covers 400-800 natively — never fake a weight. Style synthesis
       is left ON deliberately: with no italic in the family, disabling it
       would make <em> render identically to body text. */
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* No italic in Manrope; synthesised oblique mangles Greek. Emphasise by weight.
   NOTE: style.css:211 sets font-weight:300, which the loaded 400..800 axis
   silently clamps to 400 — change that rule to 400. Greek at 200-300 loses
   its tonos marks against the teal field. */
em, i { font-style: normal; font-weight: var(--fw-semi); }

h1, h2, h3, h4, .display, .question-title {
    font-family: var(--font-sans);
    text-wrap: balance;
    overflow-wrap: break-word;   /* «Προϋποθέσεις» at 320px */
    hyphens: none;               /* Greek hyphenation is unreliable in Blink */
}

.display { font-size: var(--fs-display); font-weight: var(--fw-black);
           line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h1, .h1  { font-size: var(--fs-h1); font-weight: var(--fw-black);
           line-height: var(--lh-heading); letter-spacing: var(--tr-h1); }
h2, .h2  { font-size: var(--fs-h2); font-weight: var(--fw-bold);
           line-height: var(--lh-heading); letter-spacing: var(--tr-h2); }
h3, .h3  { font-size: var(--fs-h3); font-weight: var(--fw-bold);
           line-height: var(--lh-snug); letter-spacing: 0; }
.lead, .subtitle { font-size: var(--fs-lead); font-weight: var(--fw-medium);
           line-height: 1.5; letter-spacing: 0; }
.question-title  { font-size: var(--fs-h2); font-weight: var(--fw-bold);
           line-height: 1.25; letter-spacing: 0; }

label, .form-label { font-size: var(--fs-label); font-weight: var(--fw-semi);
           line-height: 1.4; letter-spacing: var(--tr-label); }
input, select, textarea, .form-control, .form-select {
    font-family: var(--font-sans);
    font-size:   var(--fs-input);   /* 16px — stops iOS zoom-on-focus */
    font-weight: var(--fw-regular);
    line-height: 1.5;
    letter-spacing: 0;
}
::placeholder { font-weight: var(--fw-regular);
                letter-spacing: var(--tr-body); opacity: 1; }
.form-help, .help-text, .form-text {
    font-size: var(--fs-help); line-height: 1.5;
    letter-spacing: var(--tr-legal); }
.invalid-feedback, .error-text {
    font-size: var(--fs-help); font-weight: var(--fw-semi); line-height: 1.45; }

.btn, button { font-family: var(--font-sans); font-size: var(--fs-body);
    font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: 0.005em; }

/* PRICES — Manrope's default figures are PROPORTIONAL and very uneven:
   "1"=716 ... "6"/"9"=1240, a 72% spread. A column of premiums visibly
   jitters without tnum. Mandatory, not cosmetic. */
.price, .price-value, .total-price, .option-price, .option-total,
.pricing-value, .premium, .amount, .price-period, .tabular,
td.num, .total-row strong {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;   /* Safari < 14 */
}
.price, .price-value, .total-price, .pricing-value {
    font-size: var(--fs-price); font-weight: var(--fw-black);
    /* 1.05 is safe HERE ONLY: digits and € carry no Greek accent and no
       descender. Never reuse this line-height on Greek text. */
    line-height: 1.05; letter-spacing: var(--tr-price);
}
.price-xl { font-size: var(--fs-price-xl); font-weight: var(--fw-black);
    line-height: 1.05; letter-spacing: var(--tr-price); }
.price-sm { font-size: var(--fs-price-sm); font-weight: var(--fw-bold); }

/* «/μήνα» has an accented lowercase (ή) AND a descender (μ) — it must live in
   its own span at normal leading or the tonos gets clipped. */
.price-period, .price-suffix {
    font-size: var(--fs-help); font-weight: var(--fw-medium);
    line-height: 1.5; letter-spacing: var(--tr-body); }

.legal, .consent, .fine-print, .form-check-label small {
    font-size: var(--fs-legal); font-weight: var(--fw-regular);
    line-height: var(--lh-legal); letter-spacing: var(--tr-legal);
    max-width: 68ch;            /* Greek runs ~8-12% longer than English */
    text-wrap: pretty;
}

/* Greek descenders β ρ μ (-0.240em), φ ψ (-0.225em), γ (-0.180em) STRIKE a
   default underline. Your consent links are full of them: «Όρους»,
   «Προϋποθέσεις», «Απορρήτου». This offset is not optional in Greek. */
a, .legal a, .consent a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.07em;
}
.legal a, .consent a { font-weight: var(--fw-semi); }

/* ALL-CAPS: GREEK CAPITALS TAKE NO ACCENTS — «Άμεση» -> «ΑΜΕΣΗ», never
   «ΆΜΕΣΗ». text-transform is deliberately NOT set here: browsers do implement
   the el casing tailoring, but dialytika rules disagree between engines
   («άυλος» should give «ΑΫΛΟΣ») and a lang-attribute change silently
   regresses it. ACTION: delete `text-transform: uppercase` at style.css:995
   and write literal unaccented capitals in the template. */
.eyebrow, .badge-label, .section-kicker {
    font-size: var(--fs-caps); font-weight: var(--fw-bold);
    line-height: 1.3; letter-spacing: var(--tr-caps); }

/* White on the deep-teal headline bands: drop one weight step. Manrope 800
   reversed out on #17544f blooms optically and thickens the tonos into a blob. */
.band, .headline-band, .panel-deep {
    color: #ffffff; font-weight: var(--fw-bold);
    letter-spacing: 0.002em; -webkit-font-smoothing: antialiased; }

/* --- Bridge: the spec's generic class names mapped onto this codebase ----- */
.hero-title--display {
    font-size: var(--fs-display) !important;
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display) !important;
    font-weight: var(--fw-black);
}

.hero-subtitle {
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);   /* was 300; Manrope's axis starts at 400 */
    line-height: 1.5;
    letter-spacing: 0;
}

.question-label,
.section-title,
.subsection-title { letter-spacing: var(--tr-h2); }

.form-hint, .form-text, .privacy-notice small,
.declaration-content p, .declaration-group p {
    font-size: var(--fs-legal);
    line-height: var(--lh-legal);
    letter-spacing: var(--tr-legal);
}

/* Reversed white type on the deep bands loses a weight step */
.hero-title--display,
.hero-section:not(.hero-section--home) .hero-title {
    -webkit-font-smoothing: antialiased;
}

.funnel-progress__label { letter-spacing: var(--tr-label); }

/* ============================================================================
   30. HOOLIE — DEPTH ON THE BRAND TEAL  ("Βαθύ Νερό" / Deep Water)
   ----------------------------------------------------------------------------
   BRIEF: the page reads flat, the client wants "βαθύ δυναμικό" — deep and
   dynamic. They explicitly REJECTED the darkened #2b8981->#17544f attempt:
   "είναι το χρώμα της Hoolie". So the brand gradient is kept byte for byte as
   the underpaint and depth is added the way a photographic backdrop is LIT,
   not the way a wall is repainted:

     - an oblique light SHAFT across the middle (one angled band, not two
       ellipses — the two-ellipse version rendered as a lobed kidney shape)
     - two deep pools on the base gradient's own diagonal (upper-right,
       lower-left) so light interrupts deep instead of averaging into a ramp
     - a light break lower-right + one small mid mass to break symmetry
     - a corner vignette that DEEPENS BY CHROMA, NOT BY LUMINANCE
       (#08b8a2 is near iso-luminant with #4fb3a8: L 0.369412 vs 0.367296,
        so it buys ~+110% HSL chroma for ~0% lightness)
     - a 4px optical grain that dithers the ramps (longest constant run drops
       from ~16px to ~3-4px; without it 8-bit panels band visibly)

   THE FLOOR RULE — every mesh colour is >= #4fb3a8 on ALL THREE channels
   (R>=79, G>=179, B>=168). Source-over compositing is a per-channel convex
   combination and luminance is monotone per channel, so no stacking, alpha or
   drift position can produce a pixel darker than #4fb3a8 — which is already
   stop 2 of the gradient the client approved. The ONE exception is the chroma
   vignette (#08b8a2), bounded separately below by a full alpha sweep.

   BINDING CONSTRAINT IS THE CARD BORDER, NOT THE TEXT:
     ink    #10312e  L = 0.025040  ->  4.5:1 needs Lbg >= 0.287682
     border #17544f  L = 0.070873  ->  3.0:1 needs Lbg >= 0.312620   <-- binding
   Measured worst pixel of this treatment: L 0.3651 = 5.53:1 ink / 3.43:1
   border. Today's floor is 3.45:1, so the border headroom cost is 0.02.
   *** ANYONE WHO DARKENS THE VIGNETTE OR RAISES ITS ALPHA SPENDS THIS. ***

   Mean field lightness goes UP: L 0.4128 -> ~0.4370 (CIE L* 70.4 -> 72.0).
   Hue stays 171.7deg-176.6deg around the brand's 174.0deg. No new hue.

   PLACEMENT: this block MUST stay at the END of style.css. Three earlier rules
   set body::before/::after opacity (0.35 @~4744, 0.12 @~5743, 0.5 @~5885) and
   §16 sets `background: var(--brand-gradient) !important` — hence the
   !important overrides here. Appending anything below this silently breaks it.

   COLOUR TABLE — every colour that touches the page background
     hex      rgb            L         vs #10312e  vs #17544f  hue     role
     #5ac8bd  (90,200,189)   0.471563   6.95:1      4.31:1     174.0  base stop 0%
     #4fb3a8  (79,179,168)   0.367296   5.56:1      3.45:1     173.4  base stop 50% + deep pools (THE FLOOR)
     #7dd3ca  (125,211,202)  0.552128   8.02:1      4.98:1     173.7  base stop 100% + volumetric mid
     #b6f0e8  (182,240,232)  0.780915  11.07:1      6.87:1     171.7  light shaft
     #a3ece2  (163,236,226)  0.732684  10.43:1      6.48:1     171.8  grain light stop + volumetric top
     #8adfd4  (138,223,212)  0.629321   9.05:1      5.62:1     172.2  lower-right light break
     #5fcac4  (95,202,196)   0.486595   7.15:1      4.44:1     176.6  left saturation-shift mass
     #56bdb2  (86,189,178)   0.415880   6.21:1      3.85:1     173.6  small mid mass
     #08b8a2  (8,184,162)    0.369412   5.59:1      3.46:1     172.4  chroma vignette (alpha <= 0.55)
     COMPOSITE INFIMUM (vignette a-sweep over #4fb3a8) = rgb(40,182,165)
                                    L 0.365130   5.53:1      3.43:1
     Nothing on the page background falls below 5.53:1 against #10312e.
     (Deep-teal headline bands #1d635c/#17544f/#0e3a36 are contained white-text
      panels, NOT page background, and are untouched by this block.)

   MEMORY: two promoted compositor layers, ~20.7 MB EACH at 1440x900 DPR2
   (~41 MB total). Desktop only — the drift is gated to min-width: 768px, so
   phones allocate no animation and no will-change.

   NOTE FOR THE NEXT DEVELOPER: ::after paints ABOVE ::before. The "light /
   near field" is therefore on ::after here; the labels are correct as written.
   Also: body's background-attachment is `scroll`, not `fixed` — §16's
   shorthand carries !important into the longhand. That is fine and in fact
   free: these layers are position:fixed, so the base gradient parallaxes
   against them on scroll. That is the only motion a phone needs.
   ========================================================================= */

body {
    background: var(--brand-gradient) !important;   /* unchanged, byte for byte */
    background-color: #4fb3a8 !important;           /* 5.56:1 vs #10312e */
}

body::before,
body::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    opacity: 1 !important;          /* beats the 0.35 / 0.12 / 0.5 rules above */
    pointer-events: none !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    animation: none !important;     /* retires the legacy backgroundFloat */
}

/* --- LOWER PLATE: the body of water. Deep pools + chroma vignette. -------- */
body::before {
    background-image:
        /* chroma vignette — deepens without darkening. Alpha capped at 0.55;
           full sweep over #4fb3a8 gives infimum rgb(40,182,165), L 0.365130,
           5.53:1 vs ink / 3.43:1 vs border. farthest-corner keeps it
           aspect-ratio independent. */
        radial-gradient(farthest-corner ellipse at 50% 34%,
            rgba(8, 184, 162, 0.00) 0%,
            rgba(8, 184, 162, 0.00) 48%,
            rgba(8, 184, 162, 0.26) 76%,
            rgba(8, 184, 162, 0.55) 100%),
        /* deep pool, upper right — 5.56:1, exactly the floor colour */
        radial-gradient(44% 50% at 90% 10%,
            rgba(79, 179, 168, 0.80) 0%,
            rgba(79, 179, 168, 0.44) 32%,
            rgba(79, 179, 168, 0.00) 62%),
        /* deep pool, lower left — 5.56:1 */
        radial-gradient(56% 52% at 16% 82%,
            rgba(79, 179, 168, 0.74) 0%,
            rgba(79, 179, 168, 0.41) 32%,
            rgba(79, 179, 168, 0.00) 64%),
        /* the one saturation shift, 176.6deg vs the brand's 174.0deg — 7.15:1 */
        radial-gradient(40% 40% at 2% 52%,
            rgba(95, 202, 196, 0.42) 0%,
            rgba(95, 202, 196, 0.23) 34%,
            rgba(95, 202, 196, 0.00) 66%),
        /* small mid mass, breaks the two-pool symmetry — 6.21:1 */
        radial-gradient(28% 32% at 46% 74%,
            rgba(86, 189, 178, 0.44) 0%,
            rgba(86, 189, 178, 0.24) 34%,
            rgba(86, 189, 178, 0.00) 66%),
        /* volumetric: light above, density below. 10.43:1 / 8.02:1 / 5.56:1 */
        linear-gradient(172deg,
            rgba(163, 236, 226, 0.12) 0%,
            rgba(125, 211, 202, 0.00) 50%,
            rgba(79, 179, 168, 0.18) 100%) !important;
    transform: scale(1.10);
}

/* --- UPPER PLATE: the light. Shaft, break, grain. ------------------------ */
body::after {
    background-image:
        /* optical grain, topmost. 4px triangle wave, ~+-0.035 alpha, both
           stops are light-side so it can only lift: 10.43:1 and 5.56:1.
           Delete this ONE layer if moire ever shows on a low-DPI panel —
           you go back to ~16px constant runs. */
        repeating-linear-gradient(45deg,
            rgba(163, 236, 226, 0.035) 0px,
            rgba(79, 179, 168, 0.035) 2px,
            rgba(163, 236, 226, 0.035) 4px),
        /* THE SHAFT — one coherent angled band, 118deg, spanning the whole
           viewport. This replaces the two overlapping ellipses, which
           rendered as a lobed kidney with a visible waist rather than as
           light coming through something. 11.07:1 vs ink. */
        linear-gradient(118deg,
            rgba(182, 240, 232, 0.00) 26%,
            rgba(182, 240, 232, 0.16) 38%,
            rgba(182, 240, 232, 0.34) 47%,
            rgba(182, 240, 232, 0.30) 53%,
            rgba(182, 240, 232, 0.13) 62%,
            rgba(182, 240, 232, 0.00) 74%),
        /* soft ends on the shaft so it fades out rather than hitting the
           edges as a stripe — 11.07:1 */
        radial-gradient(66% 44% at 62% 46%,
            rgba(182, 240, 232, 0.20) 0%,
            rgba(182, 240, 232, 0.09) 40%,
            rgba(182, 240, 232, 0.00) 72%),
        /* light breaking through, lower right — 9.05:1 */
        radial-gradient(50% 48% at 96% 98%,
            rgba(138, 223, 212, 0.46) 0%,
            rgba(138, 223, 212, 0.25) 34%,
            rgba(138, 223, 212, 0.00) 66%),
        /* the light source, top-left corner — 11.07:1 */
        radial-gradient(64% 54% at 4% 0%,
            rgba(182, 240, 232, 0.50) 0%,
            rgba(182, 240, 232, 0.28) 32%,
            rgba(182, 240, 232, 0.00) 64%) !important;
    transform: scale(1.08);
}

/* --- PORTRAIT / MOBILE RE-COMPOSITION ------------------------------------
   Percentage positions are STRETCHED by the viewport box, not adapted: at
   390x844 the desktop composition becomes a tall vertical hook. Mobile is the
   majority of traffic on this funnel, so the masses are re-placed (not
   re-coloured — identical palette, identical floor) to keep the designed
   reading: light top-left, shaft across the middle third, pools at the two
   short ends. */
@media (orientation: portrait) and (max-width: 767.98px) {
    body::before {
        background-image:
            radial-gradient(farthest-corner ellipse at 50% 30%,
                rgba(8, 184, 162, 0.00) 0%,
                rgba(8, 184, 162, 0.00) 52%,
                rgba(8, 184, 162, 0.24) 78%,
                rgba(8, 184, 162, 0.50) 100%),
            radial-gradient(70% 26% at 94% 8%,
                rgba(79, 179, 168, 0.78) 0%,
                rgba(79, 179, 168, 0.42) 34%,
                rgba(79, 179, 168, 0.00) 64%),
            radial-gradient(86% 30% at 10% 88%,
                rgba(79, 179, 168, 0.72) 0%,
                rgba(79, 179, 168, 0.40) 34%,
                rgba(79, 179, 168, 0.00) 66%),
            radial-gradient(60% 20% at 0% 56%,
                rgba(95, 202, 196, 0.40) 0%,
                rgba(95, 202, 196, 0.22) 36%,
                rgba(95, 202, 196, 0.00) 68%),
            linear-gradient(176deg,
                rgba(163, 236, 226, 0.12) 0%,
                rgba(125, 211, 202, 0.00) 50%,
                rgba(79, 179, 168, 0.18) 100%) !important;
    }
    body::after {
        background-image:
            repeating-linear-gradient(45deg,
                rgba(163, 236, 226, 0.035) 0px,
                rgba(79, 179, 168, 0.035) 2px,
                rgba(163, 236, 226, 0.035) 4px),
            linear-gradient(148deg,
                rgba(182, 240, 232, 0.00) 30%,
                rgba(182, 240, 232, 0.15) 40%,
                rgba(182, 240, 232, 0.32) 48%,
                rgba(182, 240, 232, 0.28) 54%,
                rgba(182, 240, 232, 0.12) 63%,
                rgba(182, 240, 232, 0.00) 74%),
            radial-gradient(80% 26% at 92% 96%,
                rgba(138, 223, 212, 0.44) 0%,
                rgba(138, 223, 212, 0.24) 36%,
                rgba(138, 223, 212, 0.00) 68%),
            radial-gradient(96% 34% at 2% 0%,
                rgba(182, 240, 232, 0.50) 0%,
                rgba(182, 240, 232, 0.28) 34%,
                rgba(182, 240, 232, 0.00) 66%) !important;
    }
}

/* --- DRIFT ---------------------------------------------------------------
   Composited transform only: no repaint, no layout, no paint invalidation on
   scroll (paintCount stays 1 across a 600px scroll). Amplitude is raised over
   the first draft — at +-1.7% the motion measured 1.5/255 mean delta, i.e.
   below any perceptual threshold, so "δυναμικό" was delivered only nominally.
   At +-3.2% it is perceptible as slow water without ever reading as animation.
   Coverage: a layer needs scale >= 1 + 2*shift; worst case here is 1.064
   against a base scale of 1.08. No edge is ever exposed.
   46s vs 67s are non-harmonic: the two fields realign about once every 51
   minutes, so there is no loop to spot. 0% and 100% are identical, so any
   engine that clamps the animation lands exactly on the composition above. */
@keyframes hoolieDriftA {
    0%, 100% { transform: scale(1.10) translate3d(0, 0, 0); }
    40%      { transform: scale(1.16) translate3d(-3.0%, 2.6%, 0); }
    75%      { transform: scale(1.13) translate3d(2.7%, -2.1%, 0); }
}

@keyframes hoolieDriftB {
    0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); }
    34%      { transform: scale(1.14) translate3d(3.2%, -2.5%, 0); }
    67%      { transform: scale(1.11) translate3d(-2.8%, 2.2%, 0); }
}

/* Motion is opt-in twice over: only for users who have not asked for less of
   it, and only on screens wide enough that two promoted layers are cheap.
   Phones keep the full mesh statically and get free parallax instead. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    body::before { animation: hoolieDriftA 67s ease-in-out infinite !important;
                   will-change: transform; }
    body::after  { animation: hoolieDriftB 46s ease-in-out infinite !important;
                   will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* --- ESCAPE HATCHES ------------------------------------------------------
   prefers-contrast: more drops the chroma vignette — the only layer that can
   lower luminance at all. Everything left is per-channel >= the base stops, so
   the floor returns to EXACTLY #4fb3a8: 5.56:1 vs ink, 3.45:1 vs border,
   i.e. today's numbers, with the light kept. */
@media (prefers-contrast: more) {
    body::before {
        background-image:
            radial-gradient(44% 50% at 90% 10%,
                rgba(79, 179, 168, 0.80) 0%,
                rgba(79, 179, 168, 0.44) 32%,
                rgba(79, 179, 168, 0.00) 62%),
            radial-gradient(56% 52% at 16% 82%,
                rgba(79, 179, 168, 0.74) 0%,
                rgba(79, 179, 168, 0.41) 32%,
                rgba(79, 179, 168, 0.00) 64%),
            radial-gradient(40% 40% at 2% 52%,
                rgba(95, 202, 196, 0.42) 0%,
                rgba(95, 202, 196, 0.23) 34%,
                rgba(95, 202, 196, 0.00) 66%),
            linear-gradient(172deg,
                rgba(163, 236, 226, 0.12) 0%,
                rgba(125, 211, 202, 0.00) 50%,
                rgba(79, 179, 168, 0.18) 100%) !important;
    }
}

@media (forced-colors: active) {
    body::before, body::after { display: none !important; }
}

/* --- The fixed header must not read as a flat strip laid over a field that
   is no longer flat. Same colours, same floor rule. ---------------------- */
.logo-header {
    background-image:
        radial-gradient(120% 420% at 4% 0%,
            rgba(182, 240, 232, 0.50) 0%,     /* 11.07:1 */
            rgba(182, 240, 232, 0.28) 32%,
            rgba(182, 240, 232, 0.00) 64%),
        radial-gradient(80% 300% at 90% 0%,
            rgba(79, 179, 168, 0.55) 0%,      /* 5.56:1 — the floor */
            rgba(79, 179, 168, 0.00) 62%),
        var(--brand-gradient) !important;
}



/* ============================================================================
   32. HOOLIE — FORM ON THE WATER  (edges, not more light)

   §30 gave the teal a lot of luminance variation (measured spread 0.163 ->
   0.236) and it still read as one flat sheet. The variation was the problem,
   not the amount: every layer in §30 is a soft radial with no boundary, and
   the eye integrates an edgeless gradient back into a single surface. Depth is
   an OCCLUSION cue — you need something whose outline passes in front of
   something else.

   So this section adds silhouettes, not illumination: three overlapping
   ridge/crest forms with real (if softened) contours, drawn as inline SVG so
   the shape is a shape and not a blur.

   COLOUR BUDGET — unchanged from §30, deliberately:
     dark edge  #4fb3a8  = the validated floor, 5.56:1 vs --on-brand #10312e
     light edge #b6f0e8  = 11.07:1
   Nothing here can push a pixel outside the band §30 already proved safe,
   because no layer introduces a tone outside [floor, lightest]. The brand
   gradient itself is still untouched.

   The list below re-states §30's body::after stack because background-image is
   a single property: the SVG plates are PREPENDED (topmost), everything after
   the three url() entries is byte-identical to §30.
   ========================================================================= */

body::after {
    background-image:
        /* --- CREST 3: nearest form, lightest, breaks the horizon ---------- */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M0 806 C 190 762 336 828 520 812 C 742 792 900 726 1104 758 C 1252 781 1358 818 1440 806 L1440 900 L0 900 Z' fill='%23b6f0e8' fill-opacity='.17'/%3E%3C/svg%3E"),

        /* --- CREST 2: mid form. Its top edge crossing CREST 1 is the whole
               point — that single crossing is what says "in front of". ------ */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M0 690 C 168 640 300 726 476 706 C 700 680 848 588 1046 622 C 1224 652 1350 706 1440 690 L1440 900 L0 900 Z' fill='%234fb3a8' fill-opacity='.34'/%3E%3C/svg%3E"),

        /* --- CREST 1: farthest form, faintest, sets the horizon ----------- */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M0 548 C 214 500 372 596 604 566 C 836 536 1010 452 1206 490 C 1318 512 1392 546 1440 538 L1440 900 L0 900 Z' fill='%234fb3a8' fill-opacity='.20'/%3E%3C/svg%3E"),

        /* --- everything below this line is §30, unchanged ----------------- */
        repeating-linear-gradient(45deg,
            rgba(163, 236, 226, 0.035) 0px,
            rgba(79, 179, 168, 0.035) 2px,
            rgba(163, 236, 226, 0.035) 4px),
        linear-gradient(118deg,
            rgba(182, 240, 232, 0.00) 26%,
            rgba(182, 240, 232, 0.16) 38%,
            rgba(182, 240, 232, 0.34) 47%,
            rgba(182, 240, 232, 0.30) 53%,
            rgba(182, 240, 232, 0.13) 62%,
            rgba(182, 240, 232, 0.00) 74%),
        radial-gradient(66% 44% at 62% 46%,
            rgba(182, 240, 232, 0.20) 0%,
            rgba(182, 240, 232, 0.09) 40%,
            rgba(182, 240, 232, 0.00) 72%),
        radial-gradient(50% 48% at 96% 98%,
            rgba(138, 223, 212, 0.46) 0%,
            rgba(138, 223, 212, 0.25) 34%,
            rgba(138, 223, 212, 0.00) 66%),
        radial-gradient(64% 54% at 4% 0%,
            rgba(182, 240, 232, 0.50) 0%,
            rgba(182, 240, 232, 0.28) 32%,
            rgba(182, 240, 232, 0.00) 64%) !important;
}

/* Portrait phones: §30 re-composes the wash for a tall box, and the crests
   need the same treatment — preserveAspectRatio='none' would otherwise smear
   a 1440x900 curve down an 844px-tall viewport into near-straight lines. The
   viewBox is re-cut tall and the forms are pushed down so they read as a
   horizon under the card stack rather than as bands behind it. */
@media (orientation: portrait) and (max-width: 767.98px) {
    body::after {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='none'%3E%3Cpath d='M0 742 C 78 716 132 764 214 754 C 296 744 340 706 390 722 L390 844 L0 844 Z' fill='%23b6f0e8' fill-opacity='.17'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='none'%3E%3Cpath d='M0 648 C 70 616 118 674 200 662 C 288 648 336 592 390 614 L390 844 L0 844 Z' fill='%234fb3a8' fill-opacity='.34'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='none'%3E%3Cpath d='M0 528 C 86 496 140 560 226 542 C 302 526 344 480 390 498 L390 844 L0 844 Z' fill='%234fb3a8' fill-opacity='.20'/%3E%3C/svg%3E"),
            repeating-linear-gradient(45deg,
                rgba(163, 236, 226, 0.035) 0px,
                rgba(79, 179, 168, 0.035) 2px,
                rgba(163, 236, 226, 0.035) 4px),
            linear-gradient(158deg,
                rgba(182, 240, 232, 0.00) 22%,
                rgba(182, 240, 232, 0.18) 36%,
                rgba(182, 240, 232, 0.32) 46%,
                rgba(182, 240, 232, 0.12) 60%,
                rgba(182, 240, 232, 0.00) 74%),
            radial-gradient(70% 26% at 92% 96%,
                rgba(138, 223, 212, 0.44) 0%,
                rgba(138, 223, 212, 0.00) 66%),
            radial-gradient(86% 30% at 6% 0%,
                rgba(182, 240, 232, 0.50) 0%,
                rgba(182, 240, 232, 0.00) 64%) !important;
    }
}

/* ============================================================================
   33. HOOLIE — ACTION HIERARCHY  (the back button was winning)

   Measured on the live funnel, the two navigation buttons were siblings, not a
   primary and a secondary:

       Πίσω      fill #ffffff (solid)  text #395551  weight 500  border 1px #17544f
       Επόμενο   fill #1f6f68          text #ffffff  weight 600  border 1px #17544f

   Three things were wrong at once:
     1. SOLID WHITE is the brightest possible object on a mid-teal ground. A
        light block on a darker ground optically advances; the back button was
        literally the nearest thing on the page.
     2. Both carried the SAME 1px #17544f border, so nothing said which one was
        the offered path.
     3. The primary was not even consistent — #1f6f68 on "Επόμενο" but #17544f
        on "Υποβολή Αίτησης".

   Fix: the secondary loses its fill and becomes a ghost, so only ONE solid
   block remains on screen. .btn-light is used exclusively by goBack() in all
   14 funnel templates (verified), so this cannot leak into another control.

   CONTRAST — the ghost's text now sits directly on the teal, so it must be the
   full ink, not --ink-700:
       #395551 on the darkest background pixel (L 0.3218)  = 2.87:1   FAIL
       #10312e on the same pixel                           = 4.96:1   pass
       #10312e on white card                               = 15.5:1   pass
       border #17544f vs darkest teal                      = 3.08:1   pass (1.4.11)
   ========================================================================= */

/* Specificity note: an earlier rule is `.navigation-buttons .btn-light`
   (0,2,0). A bare `.btn-light` (0,1,0) loses to it no matter how late it comes
   or how many !important flags it carries, which is exactly what happened —
   the ghost applied on the pages using .action-buttons and silently did not on
   the ones using .navigation-buttons. Every wrapper is named explicitly. */
.btn-light,
.back-btn,
.cancel-btn,
.cancel-second-pet-btn,
.navigation-buttons .btn-light,
.navigation-buttons .back-btn,
.form-actions .btn-light,
.form-actions .back-btn,
.action-buttons .btn-light,
.action-buttons .back-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--on-brand, #10312e) !important;
    border: 1.5px solid #17544f !important;
    font-weight: 500 !important;      /* beats the inline font-weight:600 */
    box-shadow: none !important;      /* §17 gave every card/button a drop shadow */
    opacity: 1;
}

/* Inside a white card the ghost would read as a hairline box floating on
   nothing; a whisper of ink gives it a body without turning it back into a
   block. 0.04 alpha over #fff = #f5f6f6, still 14.9:1 against the ink. */
.card .btn-light,       .questionnaire-section .btn-light,
.form-section .btn-light, .form-container .btn-light,
.card .back-btn,        .questionnaire-section .back-btn {
    background: rgba(16, 49, 46, 0.04) !important;
}

.btn-light:hover,
.back-btn:hover,
.cancel-btn:hover,
.cancel-second-pet-btn:hover,
.navigation-buttons .btn-light:hover,
.form-actions .btn-light:hover,
.action-buttons .btn-light:hover {
    background: rgba(16, 49, 46, 0.10) !important;
    border-color: #10312e !important;
    color: #10312e !important;
    transform: none !important;       /* the lift belongs to the primary only */
}

/* --- and the primary takes the weight the secondary gave up -------------- */
.btn.btn-lg:not(.btn-light):not(.back-btn):not(.cancel-btn):not(.cancel-second-pet-btn),
.btn-primary,
.submit-btn,
.next-btn,
button[type="submit"] {
    background: #17544f !important;   /* one primary tone, not two */
    color: #ffffff !important;        /* 8.69:1 */
    border: 1.5px solid #17544f !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(16, 49, 46, 0.18),
                0 10px 24px rgba(16, 49, 46, 0.22) !important;
}

.btn.btn-lg:not(.btn-light):not(.back-btn):hover,
.btn-primary:hover,
.submit-btn:hover,
.next-btn:hover,
button[type="submit"]:hover {
    background: #10312e !important;
    box-shadow: 0 4px 8px rgba(16, 49, 46, 0.22),
                0 14px 32px rgba(16, 49, 46, 0.28) !important;
}

@media (prefers-reduced-motion: no-preference) {
    .btn.btn-lg:not(.btn-light):not(.back-btn):hover,
    .btn-primary:hover, .submit-btn:hover, .next-btn:hover,
    button[type="submit"]:hover { transform: translateY(-1px); }
}

/* ============================================================================
   34. HOOLIE — GENDER MARKS

   Was: the literal characters "♂️" and "♀️". Both carry U+FE0F, the emoji
   presentation selector, so the browser hands them to the platform emoji font
   — Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji — and the user sees a
   different picture on every device, none of them in the brand's colours.
   They were also paired with hardcoded #4A90E2 blue and #E91E63 pink, which
   belong to no part of this palette (and the blue only reaches 3.5:1 on white).

   Now: geometry drawn as a mask, painted with currentColor, so the mark
   inherits whatever ink its context already uses and can never fall back to an
   OS glyph. Male and female are told apart by SHAPE, not by a blue/pink coding
   — which is both on-brand and legible to a red-green colour-blind user.
   ========================================================================= */

.gsym {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: contain;      mask-size: contain;
    flex: none;
}

/* Mars: ring low-left, arrow to the upper right. round joins so it reads as
   drawn rather than as a wireframe at 16px. */
.gsym--m {
    -webkit-mask-image: var(--gsym-m); mask-image: var(--gsym-m);
}
/* Venus: ring high, cross below. */
.gsym--f {
    -webkit-mask-image: var(--gsym-f); mask-image: var(--gsym-f);
}

:root {
    --gsym-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='14.4' r='5.9'/%3E%3Cpath d='M14.1 9.9 21 3'/%3E%3Cpath d='M15.2 3H21v5.8'/%3E%3C/svg%3E");
    --gsym-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.6' r='5.9'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M8.5 18.6h7'/%3E%3C/svg%3E");
}

/* The big mark on the two selection cards. .gender-icon already sets a font
   size for the emoji it used to hold; the mask scales off that em. */
.gender-icon .gsym { width: 1em; height: 1em; }
.gender-card .gender-icon { color: #17544f; }
.gender-card.selected .gender-icon,
.gender-card:hover .gender-icon { color: #10312e; }

/* The inline "♂️ Αρσενικό" reminder that appears on eight later steps. It was
   bare coloured text; as a chip it reads as a value the user already chose
   rather than as another thing to click. */
.gender-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.22em 0.7em 0.26em;
    border-radius: 999px;
    background: rgba(16, 49, 46, 0.06);
    border: 1px solid rgba(16, 49, 46, 0.16);
    color: #10312e;                  /* 15.5:1 on white, 4.96:1 on the teal */
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}