/**
 * Landing Page Styles
 * Version: 2.0
 *
 * CSS Variables (--primary-color, --background-color-light, etc.)
 * are set dynamically via inline style in the layout.
 */

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body, 'Inter'), 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    /* 72rem inhoud plus 20px marge aan weerszijden. Met border-box blijft de
       inhoud dus overal 1152px breed, en tot die breedte houdt de pagina
       altijd lucht tot de schermrand, ook op een tablet. Zelfde maten in
       landing.css, bonus.css en download.css, zodat het logo op elke pagina
       van de funnel op dezelfde lijn staat. */
    max-width: calc(72rem + 40px);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.wrapper {
    padding-top: 84px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    background-color: #ffffff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
}

.header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 84px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: auto;
}

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

.hero > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-content {
    flex: 1.8;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero h1 {
    font-size: 28px;
    font-family: var(--font-heading, 'Inter'), 'Inter Fallback', sans-serif;
    font-weight: 400;
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
    max-width: 90%;
}

.hero h1 strong {
    font-weight: 700;
}

.hero-subtitle {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.7;
    max-width: 90%;
}

.hero-bullets {
    margin: 0 0 20px 0;
    padding: 0;
}

.hero-bullets ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-bullets ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

.hero-bullets ul li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    background-color: var(--bullet-color, #16a34a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hero-bullets ul li strong {
    font-weight: 700;
}

/* WYSIWYG paragraph bullets */
.hero-bullets p {
    position: relative;
    padding-left: 32px;
    margin: 0 0 10px 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

.hero-bullets p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    background-color: var(--bullet-color, #16a34a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hero-bullets p:last-child {
    margin-bottom: 0;
}

.hero-bullets p strong {
    font-weight: 700;
}

/* Legacy support for old bullet structure */
.hero-bullets > li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

.hero-bullets .bullet-icon {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: var(--primary-color);
}

.hero-bullets .bullet-text strong {
    font-weight: 700;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.placeholder-image {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #f3f4f6; */
    border-radius: 8px;
    padding: 40px;
}

/* ==========================================================================
   FEATURES SECTION
   ========================================================================== */
.features-section {
    padding: 60px 0 75px 0;
    background-color: var(--background-color-light);
}

.features-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.feature-content {
    flex: 1;
    min-width: 55%;
}

.feature-content h2 {
    font-size: 28px;
    font-family: var(--font-heading, 'Inter'), 'Inter Fallback', sans-serif;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 20px;
}

.feature-content h2 strong {
    font-weight: 700;
}

.feature-subtitle {
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
    color: var(--text-color);
}

.feature-body-text {
    margin-bottom: 25px;
    line-height: 1.7;
    color: var(--text-color);
    font-size: 16px;
}

/* WYSIWYG paragraph styling */
/* .feature-body-text p {
    margin: 0 0 1em 0;
} */

.feature-body-text p:last-child {
    margin-bottom: 0;
}

.feature-subtitle p {
    margin: 0;
    display: inline;
}

/* Headline with WYSIWYG - keep inline */
.feature-content h2 p {
    margin: 0;
    display: inline;
}

.feature-body-text ul,
.feature-subtitle ul {
    list-style: none;
    margin: 0.5em 0;
    padding: 0;
}

.feature-body-text ul li,
.feature-subtitle ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.feature-body-text ul li::before,
.feature-subtitle ul li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    background-color: var(--bullet-color, #16a34a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.feature-body-text ul li strong,
.feature-subtitle ul li strong {
    font-weight: 700;
}

.feature-image {
    justify-content: center;
    align-items: end;
}

.feature-image img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   TESTIMONIAL SECTION
   ========================================================================== */
.testimonial-section {
    padding: 60px 0;
    background-color: var(--background-color-dark);
    color: var(--dark-bg-text-color, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

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

.testimonial-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.testimonial img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    color: white;
}

.testimonial-name {
    font-size: 16px;
    font-family: var(--font-testimonial, 'Inter'), 'Inter Fallback', sans-serif;
    color: var(--dark-bg-text-color, #ffffff);
    text-align: center;
    margin-top: 8px;
}

.testimonial-company {
    display: block;
    font-size: 14px;
    font-family: var(--font-testimonial, 'Inter'), 'Inter Fallback', sans-serif;
    opacity: 0.8;
}

.testimonial-text {
    max-width: 650px;
}

.testimonial-text h2 {
    font-size: 24px;
    font-family: var(--font-testimonial, 'Inter'), 'Inter Fallback', sans-serif;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--dark-bg-text-color, #ffffff);
}

.testimonial-text p {
    font-size: 16px;
    font-family: var(--font-testimonial, 'Inter'), 'Inter Fallback', sans-serif;
    font-style: var(--testimonial-style, italic);
    font-weight: 400;
    color: var(--dark-bg-text-color, #ffffff);
    line-height: 1.6;
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta-section {
    padding: 60px 0;
    background-color: var(--background-color-dark);
}

.cta-section .feature-content h2,
.cta-section .feature-subtitle,
.cta-section .feature-body-text {
    color: var(--dark-bg-text-color, #ffffff);
}

.cta-section .feature-body-text ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ==========================================================================
   CTA BUTTONS
   ========================================================================== */
.cta-button {
    font-family: var(--font-button, 'Inter'), 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--primary-color);
    color: var(--btn-text-color);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease, color 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    width: max-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 44px;
}

/* De knoptekst van hero, features en CTA draagt zijn vet zelf (<strong>), zodat de
   vet-knop in de visuele editor echt aan en uit kan. De popup-knop en de knoppen op
   de bedank-, download-, bonus- en videopagina houden het vaste gewicht hierboven.
   600 en niet 700 voor <strong>: Inter is in 400/500/700 geladen en rondt 600 af
   naar 700, een gekozen Google Font heeft 600 wel; zo blijft de knop er precies
   uitzien als daarvoor. Bestaande knopteksten zijn op 6 september 2026 met een
   migratie in <strong> gewikkeld. */
.hero .cta-button,
.feature-content .cta-button,
.cta-section .cta-button {
    font-weight: 400;
}

.hero .cta-button strong,
.hero .cta-button b,
.feature-content .cta-button strong,
.feature-content .cta-button b,
.cta-section .cta-button strong,
.cta-section .cta-button b {
    font-weight: 600;
}

.cta-button:hover {
    background-color: var(--primary-hover);
    color: var(--btn-hover-text-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.cta-button-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.button-micro-text {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.9;
    font-weight: 400;
}

/* ==========================================================================
   POPUP / MODAL
   ========================================================================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.popup-content {
    background: #fff;
    width: 100%;
    max-width: 640px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 1.75rem;
    position: relative;
}

.close-button {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    line-height: 1;
    z-index: 10;
}
.close-button:hover {
    color: #374151;
}

.progress-container {
    background: #e5e7eb;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    height: 22px;
}

.progress-bar {
    background: linear-gradient(90deg, #10B981, #059669);
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 22px;
    border-radius: 100px;
    transition: width 0.4s ease;
}

.popup-header {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
    margin: 0.5rem 0 0.25rem;
    text-align: center;
}

.popup-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.popup-subtitle p {
    margin: 0;
}

.popup-form-wrapper {
    width: 100%;
}

.popup-body {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.popup-image {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-image img {
    max-width: 100%;
    border-radius: 8px;
}

.popup-form {
    flex: 1;
    min-width: 0;
}

/* Multi-step */
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}

.popup-form .form-group {
    margin-bottom: 12px;
}
.popup-form .form-group:last-child {
    margin-bottom: 0;
}

.popup-form .form-group label {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-weight: 500;
    font-size: 0.8125rem;
}

.popup-form .form-group input:not([type="checkbox"]),
.popup-form .form-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111827;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.popup-form .form-group input:not([type="checkbox"])::placeholder {
    color: #9ca3af;
}

.popup-form .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #3b82f6);
    cursor: pointer;
}

.popup-form .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    cursor: pointer;
}
.popup-form .form-group select.placeholder-shown {
    color: #9ca3af;
}
.popup-form .form-group select option {
    color: #111827;
}
.popup-form .form-group select option[value=""] {
    color: #9ca3af;
}

.popup-form .form-group input:not([type="checkbox"]):focus,
.popup-form .form-group select:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Checkbox label (inline) */
.popup-form .form-group .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    color: #374151;
    font-size: 0.8125rem;
}

/* Multi-select (checkbox list) */
.popup-form .form-group .multi-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.popup-form .form-group .multi-select-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.8125rem;
    margin-bottom: 0;
    color: #374151;
}

/* Footer: buttons */
.popup-form-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

/* Popup CTA button override */
.popup-form-footer .cta-button {
    flex-direction: row;
    min-height: 44px;
    padding: 10px 28px;
    font-size: 0.9375rem;
    width: auto;
}

/* Back button */
.popup-back-button {
    font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background-color: #fff;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    min-height: 44px;
    flex-shrink: 0;
}
.popup-back-button:hover {
    background-color: #f9fafb;
    color: #374151;
}

.security-note {
    font-size: 0.8rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.security-note .lock-icon {
    font-size: 0.75rem;
}

.security-note .privacy-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.security-note .privacy-link:hover {
    color: var(--primary-color, #2563EB);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: flex !important;
}

/* ==========================================================================
   ADMIN EDIT BUTTON
   ========================================================================== */
.admin-edit-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s;
}

.admin-edit-button:hover {
    background-color: var(--primary-hover);
}

/* ==========================================================================
   PROOF BUBBLE
   ========================================================================== */
#proof-bubble {
    position: fixed;
    bottom: 1.875rem;
    left: 1.875rem;
    background: #fff;
    border-radius: 999px;
    padding: 0.625rem 1rem;
    box-shadow: 0 0.3125rem 1.5625rem rgba(0, 0, 0, 0.2);
    font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    color: #333;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.6s ease;
    opacity: 0;
    transform: translateY(1.25rem);
}

#proof-bubble.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.proof-icon {
    width: 1.875rem;
    height: 1.875rem;
    background-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
}

.proof-text .name {
    font-weight: bold;
    margin-bottom: 0.125rem;
}

.proof-meta {
    font-size: 0.6875rem;
    color: #666;
    margin-top: 0.0625rem;
}

/* ==========================================================================
   MOBILE RESPONSIVE (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    .header > .container {
        min-height: 64px;
    }

    .wrapper {
        padding-top: 64px;
    }

    .hero {
        padding: 40px 0;
    }

    .hero > .container {
        flex-direction: column;
    }

    .hero-content {
        text-align: center;
        order: 1;
        margin-bottom: 30px;
        align-items: center;
        display: flex;
    }

    .hero h1 {
        font-size: 22px;
        max-width: 90%;
    }

    .hero-subtitle {
        max-width: 100%;
    }

    .hero-image img {
        max-width: 80%;
        height: auto;
        padding: 20px 0;
    }

    .hero-bullets {
        text-align: left;
        max-width: 100%;
        margin: 0 auto 30px auto;
    }

    .hero-bullets ul li,
    .hero-bullets > li {
        text-align: left;
        display: inline-flex;
        width: 100%;
        justify-content: flex-start;
    }

    .testimonial-section {
        padding: 40px 0;
    }

    .testimonial {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .testimonial-text h2 {
        font-size: 20px;
    }

    .features-section {
        padding: 40px 0;
    }

    .features-inner {
        flex-direction: column;
        gap: 30px;
    }

    .feature-content {
        min-width: 100%;
    }

    .feature-content h2 {
        font-size: 22px;
        text-align: center;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-image img {
        max-width: 80%;
        margin-bottom: 30px;
    }

    .cta-section {
        padding: 40px 0 75px 0;
    }

    .cta-section .feature-content h2 {
        text-align: center;
    }

    .hero .cta-button,
    .feature-content .cta-button,
    .cta-section .cta-button {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        justify-content: center;
        display: flex;
    }

    .popup-content {
        width: 95%;
        padding: 1.25rem;
        border-radius: 10px;
    }

    .popup-header {
        font-size: 1.25rem;
    }

    .popup-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .popup-form .form-group label {
        font-size: 0.8125rem;
    }

    .popup-form .form-group {
        margin-bottom: 12px;
    }

    .popup-form .form-group input:not([type="checkbox"]),
    .popup-form .form-group select {
        height: 40px;
        padding: 0 12px;
        font-size: 16px; /* Prevent iOS zoom */
        box-sizing: border-box;
    }

    .popup-body {
        flex-direction: column;
        gap: 1rem;
    }

    .popup-image {
        display: none;
    }

    .popup-form {
        flex: none;
        width: 100%;
    }

    .popup-form-wrapper {
        width: 100%;
    }

    .popup-form-footer {
        flex-direction: column;
    }

    .popup-form-footer .cta-button {
        width: 100%;
        justify-content: center;
    }
    .popup-back-button {
        order: 2;
    }
    .popup-form-footer .cta-button {
        order: 1;
    }
}

@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #proof-bubble {
        bottom: 1.25rem;
        left: 1.25rem;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        border-radius: 999px;
    }

    .proof-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1rem;
    }

    .proof-text .name {
        font-size: 0.8125rem;
    }

    .proof-meta {
        font-size: 0.6875rem;
    }
}