/* ==========================================================================
   Findaroo Liquid Glass — design tokens
   Single source of truth. See DESIGN.md §4 (brand color), §5 (glass),
   §6 (shape and depth), §8 (spacing), §10 (motion).
   ========================================================================== */
:root {
    /* Brand (DESIGN.md §4) */
    --findaroo-royal: #00296b;
    --findaroo-marian: #003f88;
    --findaroo-blue: #00509d;
    --findaroo-yellow: #fdc500;
    --findaroo-gold: #ffd500;

    --canvas: #f4f8f6;
    --surface-solid: #ffffff;
    --text-primary: #212529;
    --text-heading: #333333;
    --text-secondary: #666666;
    --text-muted: #6c757d;
    --status-success: #198754;
    --status-danger: #dc3545;

    /* --text-muted clears AA on white surfaces (4.68:1) but not against the
       canvas itself (4.45:1). Text sitting directly on the canvas — the hero —
       uses this darker step instead (5.18:1). DESIGN.md §11. */
    --text-muted-on-canvas: #636b73;

    /* Legacy aliases — kept so existing selectors keep resolving */
    --royal-blue-traditional: var(--findaroo-royal);
    --marian-blue: var(--findaroo-marian);
    --polynesian-blue: var(--findaroo-blue);
    --mikado-yellow: var(--findaroo-yellow);
    --gold: var(--findaroo-gold);

    /* Functional glass layer (DESIGN.md §5) — navigation, controls, popovers */
    --glass-bg: rgba(255, 255, 255, 0.30);
    --glass-elevated-bg: rgba(255, 255, 255, 0.40);
    --glass-border: rgba(255, 255, 255, 0.46);
    --glass-blur: 48px;
    --glass-saturation: 220%;
    --glass-shadow:
        0 28px 80px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    --glass-noise-opacity: 0.05;
    --glass-edge-strength: 0.45;
    --light-angle: 45deg;
    --light-intensity: 0.6;

    /* Content layer (DESIGN.md §3) — calmer and more opaque than controls.
       Page-level section framing only; never nested inside itself. */
    --content-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
    --content-border: rgba(255, 255, 255, 0.72);
    --content-blur: 20px;
    --content-saturation: 140%;
    --content-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.07);

    /* Shape (DESIGN.md §6) */
    --radius-capsule: 999px;
    --radius-region: 20px;
    --radius-frame: 16px;
    --radius-card: 12px;
    --radius-control: 8px;

    /* Spacing (DESIGN.md §8) */
    --section-gap: 40px;

    /* Motion (DESIGN.md §10) — 160–300ms for interface state change */
    --motion-fast: 160ms;
    --motion-base: 220ms;
    --motion-slow: 300ms;
    --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);

    /* Minimum comfortable hit area (DESIGN.md §9, §11) */
    --hit-area: 44px;
}

/* Anchored sections clear the fixed navbar (DESIGN.md §8) */
html {
    scroll-behavior: smooth;
}

#how-it-works,
#why-different,
#made-in-europe,
#pricing {
    scroll-margin-top: 96px;
}

/* General Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--canvas);
    background-image:
        linear-gradient(rgba(244, 248, 246, 0.96), rgba(244, 248, 246, 0.96)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ctext x='15' y='40' font-size='25'%3E📮%3C/text%3E%3C/svg%3E");
    background-size: auto, 96px 96px;
}

/* Navigation */
.navbar {
    box-shadow: none;
    padding: 0.25rem;
    margin-top: 0.5rem;
    background: transparent;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.navbar .container {
    background: white;
    border-radius: 50px;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.navbar-nav {
    margin: 0 auto;
}

.nav-link {
    font-weight: 500;
    color: #4a4a4a !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.95rem;
    position: relative;
    text-decoration: none;
    border-radius: 50px;
    /* match CTA pill radius */
    border: 1px solid transparent;
    /* prevent border flash on hover */
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4a4a4a;
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}

/* Disable underline effect for navbar nav-links since they use glass hover */
.navbar .nav-link::after {
    display: none !important;
}

/* Give primary navbar links a gray glass hover like Login */
.navbar .nav-link:hover {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}

.navbar .nav-link:hover::after {
    width: 0 !important;
}

.navbar .btn-link {
    text-decoration: none;
    padding: 0.5rem 1rem;
    /* match navbar CTA padding */
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    border: 1px solid transparent;
    /* prevent border flash on hover */
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    border-radius: 50px;
    /* pill when hovered */
}

.navbar .btn-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4a4a4a;
    transition: width 0.3s ease-in-out;
}

.navbar .btn-link:hover::after {
    width: 100%;
}

/* Give Login a gray glass look on hover only (same as Back to Home CTA) */
.navbar .btn-link:hover {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 48px rgba(107, 114, 128, 0.40);
}

/* Suppress underline animation when glass hover is active */
.navbar .btn-link:hover::after {
    width: 0 !important;
}

.navbar .btn-dark {
    background-color: #f5f5f5;
    border: none;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.95rem;
}

.navbar .btn-dark:hover {
    background-color: #eeeeee;
    color: #000;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Hero copy sits on the bare canvas, not on a white surface. */
.hero-section .text-muted,
.hero-section .reassurance-text {
    color: var(--text-muted-on-canvas) !important;
}

/* Ensure hero copy elements align perfectly on the left edge */
.hero-copy {
    max-width: 560px;
    margin-left: 0;
}

.hero-copy h1,
.hero-copy .lead,
.hero-copy .cta-cluster,
.hero-copy .reassurance-text,
.hero-copy .stats-badge,
.hero-copy .btn {
    margin-left: 0;
    text-align: left;
}

/* Remove any inherited center alignment on small screens */
@media (max-width: 767.98px) {
    .hero-copy {
        margin-left: 0;
    }

    .hero-copy h1,
    .hero-copy .lead,
    .hero-copy .cta-cluster,
    .hero-copy .reassurance-text {
        text-align: left !important;
    }
}

.stats-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

h1 {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.btn-dark {
    background-color: #000;
    border-color: #000;
}

.btn-dark:hover {
    background-color: #000;
    border-color: #000;
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-outline-dark {
    color: #000;
    border: none;
    background-color: #f5f5f5;
}

.btn-outline-dark:hover {
    background-color: #eeeeee;
    color: #000;
    opacity: 0.9;
    transform: translateY(-1px);
}

.cta-buttons .btn {
    padding: 0.75rem 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border: none;
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    font-size: 0.95rem;
}

.cta-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.cta-buttons .btn-outline-dark {
    border-width: 1px;
}

.cta-cluster {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cta-cluster .stats-badge {
    background-color: #F4F6FA;
    padding: 0.5rem 12px;
}

.reassurance-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar .container {
        border-radius: 20px;
        padding: 1rem;
    }

    h1 {
        font-size: 2.5rem !important;
    }

    .lead {
        font-size: 1.1rem;
    }

    .cta-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
}

@media (max-width: 640px) {
    .cta-cluster {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cta-cluster .btn {
        width: 100%;
    }
}

/* Feature cards styling */
.features-section {
    background-color: #f8f9fa;
}

.feature-card {
    background: white;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    color: #0d6efd;
}

/* Footer styles (copied from dashboard to match exactly) */
.footer {
    margin-bottom: 0;
    padding-bottom: 4rem;
    /* Match Dashboard bottom spacing */
}

.footer .card {
    background: white;
    border-radius: 20px;
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.footer .card:hover {
    border-color: transparent;
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.footer .card-body {
    padding: 1.5rem;
}

/* The footer shares the page frame with .content-section rather than living in
   its own 90% container: same 1200px cap, and the same edge-to-edge behaviour
   below that width. Previously the card carried its own max-width and centred
   independently, so at 390px the sections ran 0..390 while the footer sat at
   32..359. The card now simply fills the frame, as it does in dash.findaroo. */
.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.footer .card {
    max-width: none;
    width: 100%;
}

.footer .footer-legal-card {
    margin-top: var(--section-gap);
    border-radius: 16px;
}

.footer .footer-legal-card .card-body {
    padding: 0.55rem 0.75rem;
}

/* Content container styles */
.content-section {
    background-color: white;
    border-radius: 20px;
    padding: 48px 0;
    /* match dashboard tighter rhythm */
    margin: 0 auto var(--section-gap);
    /* uniform gap between sections */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 1200px;
}

.content-section .container {
    max-width: 90%;
    margin: 0 auto;
}

/* Background for content section */
.content-background {
    padding-top: 60px;
    padding-bottom: var(--section-gap);
    /* provide consistent breathing room */
}

/* Avoid doubling spacing: last section inside content background has no bottom margin */
.content-background .content-section:last-of-type {
    margin-bottom: 0;
}

/* When a content wrapper follows a vision block, keep spacing consistent with other blocks */
.vision-section+.content-background {
    padding-top: 0;
}

/* Legal-page content and footer cards follow the navbar's responsive frame at
   every breakpoint, preserving equal gutters throughout. */
@media (max-width: 575.98px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: calc(100% - 0.5rem);
        margin-inline: auto;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: 540px;
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: 960px;
        margin-inline: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: 1140px;
        margin-inline: auto;
    }
}

@media (min-width: 1400px) {
    body:has(.legal-navbar) > .content-background,
    body:has(.legal-navbar) .footer .container {
        max-width: 1192px;
        margin-inline: auto;
    }
}

/* Index-page regions mirror the navbar's responsive container frame too. */
@media (max-width: 575.98px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: calc(100% - 0.5rem);
        margin-inline: auto;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: 540px;
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: 960px;
        margin-inline: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: 1140px;
        margin-inline: auto;
    }
}

@media (min-width: 1400px) {
    body:not(:has(.legal-navbar)) > .hero-section,
    body:not(:has(.legal-navbar)) > .vision-section,
    body:not(:has(.legal-navbar)) > .content-background > .content-section,
    body:not(:has(.legal-navbar)) > .footer .container {
        max-width: 1192px;
        margin-inline: auto;
    }
}


/* Section title styles */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--text-heading);
}

/* Section-specific spacing tweaks */
#how-it-works .section-title {
    margin-bottom: 0.75rem;
    /* bring subheadline closer to title */
}

#why-different .section-title {
    margin-bottom: 0.75rem;
    /* match spacing with How it Works */
}

/* How It Works precise grid */
#how-it-works .how-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    /* stacked wrapper; rows inside manage columns */
    row-gap: 56px;
    /* gutter between rows per spec */
}

#how-it-works .how-row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    /* 5/7 split per spec */
    grid-template-areas: 'text visual';
    column-gap: 40px;
    /* desktop gap per spec */
    align-items: center;
    /* vertically center text and visual */
}

/* Z layout for step 2 on desktop */
@media (min-width: 769px) {
    #how-it-works .step-2 {
        grid-template-columns: 7fr 5fr;
        /* swap sizes to keep 5/7 split mirrored */
        grid-template-areas: 'visual text';
        /* swap order */
    }
}

/* Stack per step on mobile */
/* Tablet gap */
@media (max-width: 1024px) {
    #how-it-works .how-row {
        column-gap: 24px;
    }
}

@media (max-width: 768px) {
    #how-it-works .how-row {
        grid-template-columns: 1fr;
        height: auto;
        row-gap: 16px;
        grid-template-areas:
            'text'
            'visual';
    }

    #how-it-works .how-row {
        column-gap: 16px;
    }
}

#how-it-works .how-text {
    display: flex;
    align-items: flex-start;
}

#how-it-works .text-block {
    padding: 0;
    /* keep to grid; spacing controlled by micro rhythm */
    max-width: 480px;
    /* fixed width per spec */
}

#how-it-works .text-block p:first-child {
    /* number badge line */
    margin-bottom: 8px;
    /* number → heading spacing (we use first line as heading) */
}

#how-it-works .text-block p+p {
    /* body after heading */
    margin-top: 0;
}

#how-it-works .meta-link {
    margin-top: 12px;
    /* body → meta spacing */
    color: var(--findaroo-blue);
    text-decoration: none;
}

#how-it-works .meta-link:hover {
    text-decoration: underline;
}

#how-it-works .how-text {
    grid-area: text;
}

#how-it-works .how-visual {
    grid-area: visual;
    display: flex;
    align-items: center;
}

/* Per-step horizontal alignment of text against its animation */
@media (min-width: 769px) {
    #how-it-works .step-1 .text-block {
        width: 100%;
        text-align: left;
        margin-left: auto;
    }

    #how-it-works .step-2 .text-block {
        width: 100%;
        text-align: left;
        margin-right: auto;
    }

    #how-it-works .step-3 .text-block {
        width: 100%;
        text-align: left;
        margin-left: auto;
    }
}

/* Visual container: 560x320 transparent box (no borders/shadows) */
#how-it-works .visual-card {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 320;
    /* 7:4 aspect */
    height: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
    /* clip overflow */
}

#how-it-works .visual-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* center animation within invisible container */
    justify-content: center;
    overflow: hidden;
    image-rendering: auto;
    /* crisp */
}

#how-it-works .visual-fit {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#how-it-works .visual-fit-right {
    align-items: center;
    justify-content: flex-end;
    /* for right-aligned button padding behavior */
}

/* Ensure internal animations scale to fit without overflow */
#how-it-works .mac-window,
#how-it-works .excel-window,
#how-it-works .download-scene,
#how-it-works .results-scene {
    max-width: 100%;
    max-height: 100%;
}

/* Ensure no visible borders/shadows on internals */
#how-it-works .mac-window,
#how-it-works .excel-window,
#how-it-works .download-scene,
#how-it-works .results-scene {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Respect the 8px baseline rhythm in micro spacing */
#how-it-works .download-button {
    margin-right: 0;
}

/* Mobile visual card scaling */
@media (max-width: 768px) {
    #how-it-works .visual-card {
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 320;
        /* preserve proportion */
    }

    #how-it-works .visual-canvas {
        align-items: center;
    }
}

/* Motion handling */
.reduced-motion * {
    animation: none !important;
    transition: none !important;
}

/* Only suppress the demonstration loops when motion is unwanted. Freezing
   them at frame 0 would hide content whose first keyframe is transparent,
   so this must not become a general "paused" state. */
@media (prefers-reduced-motion: reduce) {
    .visual-paused * {
        animation: none !important;
        transition: none !important;
    }
}

/* Inboxing comparison: the same two-card visual language as Findaroo. */
#why-different .privacy-contrast {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(100%, 760px);
    margin: 0.5rem auto 0;
}

#why-different .privacy-path {
    position: relative;
    min-width: 0;
    padding: 1.35rem;
    overflow: hidden;
    border-radius: 18px;
}

#why-different .privacy-path-legacy {
    color: #475467;
    background: linear-gradient(180deg, #f8f9fb, #f1f3f6);
    border: 1px solid rgba(71, 84, 103, 0.12);
}

#why-different .privacy-path-fresh {
    color: #173e32;
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 122, 87, 0.18), transparent 34%),
        linear-gradient(155deg, rgba(237, 248, 244, 0.98), rgba(247, 252, 250, 0.98));
    border: 1px solid rgba(20, 122, 87, 0.22);
    box-shadow: 0 14px 34px rgba(20, 122, 87, 0.10);
}

#why-different .privacy-path-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

#why-different .privacy-path-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    place-items: center;
}

#why-different .privacy-path-legacy .privacy-path-icon {
    color: #667085;
    background: #e4e7ec;
}

#why-different .privacy-path-fresh .privacy-path-icon {
    color: #fff;
    background: #147a57;
    box-shadow: 0 8px 20px rgba(20, 122, 87, 0.20);
}

#why-different .privacy-path-heading h4 {
    display: block;
    margin: 0;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#why-different .privacy-path ul {
    display: grid;
    gap: 0.62rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#why-different .privacy-path li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.58rem 0.68rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 650;
}

#why-different .privacy-path-legacy li {
    background: rgba(255, 255, 255, 0.55);
}

#why-different .privacy-path-fresh li {
    background: rgba(255, 255, 255, 0.72);
}

#why-different .privacy-path li i {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    place-items: center;
    font-size: 0.68rem;
}

#why-different .privacy-path-legacy li i {
    color: #667085;
    background: #e4e7ec;
}

#why-different .privacy-path-fresh li i {
    color: #147a57;
    background: rgba(20, 122, 87, 0.12);
}

@media (max-width: 767.98px) {
    #why-different .privacy-contrast {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* Step 3: align animation toward the text */
#how-it-works .step-3 .visual-fit {
    justify-content: flex-start;
}

#how-it-works .step-3 .results-scene {
    justify-content: flex-start;
}

/* Section CTA spacing */
#how-it-works .section-cta {
    margin-top: 40px;
}

#how-it-works .section-cta .reassurance-text {
    margin-top: 8px;
}

/* Text block styles */
.text-block {
    padding: 2rem;
    margin-bottom: 1rem;
}

.text-block.text-start {
    padding-right: 3rem;
}

.text-block.text-end {
    padding-left: 3rem;
    text-align: right;
}

.text-block h3 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-heading);
    font-size: 1.5rem;
}

.text-block p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Micro comparison under Privacy block */
.micro-compare {
    max-width: 520px;
    margin: 0 0 0 auto;
    background: #fafbfc;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.micro-compare .micro-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 16px 8px;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
}

.micro-compare .micro-col {
    font-size: 0.95rem;
}

.micro-compare .micro-col-left {
    text-align: left;
}

.micro-compare .micro-col-right {
    text-align: right;
}

.micro-compare .micro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 14px;
    align-items: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

.micro-compare .micro-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-weight: 500;
}

.micro-compare .micro-row .micro-item:last-child {
    justify-content: flex-end;
}

.micro-compare .emoji {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

.micro-compare .label {
    white-space: nowrap;
}

.micro-compare.micro-compact {
    max-width: 420px;
    border-radius: 10px;
}

.micro-compare.micro-compact .micro-header {
    padding: 10px 14px 6px;
}

.micro-compare.micro-compact .micro-row {
    padding: 8px 12px;
}

@media (max-width: 600px) {
    .micro-compare {
        margin: 0 auto 24px;
        max-width: 100%;
    }

    .micro-compare .micro-header {
        font-size: 0.95rem;
    }

    .micro-compare .micro-row {
        padding: 10px 12px;
        gap: 8px;
    }

    .micro-compare .label {
        white-space: normal;
    }
}

/* Ensure micro-compare aligns to the top of the Privacy text */
#why-different .privacy-row {
    align-items: flex-start;
}

#why-different .privacy-row>[class^="col-"] {
    display: flex;
}

#why-different .privacy-row .text-block {
    margin-top: 0;
}

#why-different .privacy-row .col-lg-7>.text-block {
    align-self: flex-start;
}

#why-different .privacy-row .col-lg-5 {
    align-items: flex-start;
}

#why-different .privacy-row .micro-compare {
    margin-top: 0;
}

/* Built Different two-up grid with centered micro table */
#why-different .different-grid {
    position: relative;
}

#why-different .different-grid>[class^="col-"] {
    display: flex;
}

#why-different .different-grid .text-block {
    margin: 0;
    align-self: flex-start;
}

/* Center the below-table within the container */
#why-different .different-grid .col-12 .micro-compare {
    margin: 8px auto 0;
}

/* Remove absolute centered variant now that the table sits below */
@media (max-width: 991.98px) {
    #why-different .different-grid>[class^="col-"] {
        display: block;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-section {
        padding: 32px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .text-block.text-start,
    .text-block.text-end {
        padding: 1rem;
        text-align: left;
    }

    .text-block h3 {
        font-size: 1.25rem;
    }
}

/* Footer section spacing: match other sections' gap and compact height */
.footer-section {
    margin-bottom: var(--section-gap);
    /* same as other sections */
}

/* Utility: max width for centered blocks moved from inline */
.max-w-800 {
    max-width: 800px;
}

/* Europemaxxing suite: a compact visual workflow instead of a prose block. */
#suite .suite-intro {
    margin: -1rem auto 2rem;
    color: #667085;
    text-align: center;
    font-size: 1.05rem;
}

#suite .suite-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
}

#suite .suite-product-card {
    position: relative;
    min-height: 168px;
    padding: 1.5rem 1rem 1.25rem;
    border: 1px solid rgba(16, 24, 40, 0.09);
    border-radius: var(--radius-card);
    background: var(--surface-solid);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.06);
    color: #101828;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    text-decoration: none;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

#suite .suite-product-card:hover {
    border-color: rgba(0, 80, 157, 0.28);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 30px rgba(0, 80, 157, 0.12);
    color: #101828;
    transform: translateY(-4px);
}

#suite .suite-step {
    position: absolute;
    top: 0.8rem;
    left: 0.9rem;
    color: #98a2b3;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#suite .suite-product-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 0.25rem;
    border-radius: 16px;
    background: rgba(0, 80, 157, 0.08);
    color: var(--findaroo-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

#suite .suite-bounceroo .suite-product-icon {
    background: rgba(245, 183, 0, 0.12);
    color: #9a6b00;
}

#suite .suite-inboxing .suite-product-icon {
    background: rgba(20, 122, 87, 0.1);
    color: #147a57;
}

#suite .suite-product-card strong {
    font-size: 1.12rem;
}

#suite .suite-product-card > span:last-child {
    color: #667085;
    font-size: 0.9rem;
}

#suite .suite-connector {
    color: #98a2b3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

#suite .suite-connector::before {
    content: "";
    width: 16px;
    height: 1px;
    margin-right: 0.35rem;
    background: #d0d5dd;
}

#suite .suite-account-row {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
}

#suite .suite-account-link {
    min-height: 52px;
    padding: 0.55rem 0.8rem 0.55rem 1rem;
    border: 1px solid rgba(0, 80, 157, 0.14);
    border-radius: 999px;
    background: rgba(0, 80, 157, 0.05);
    color: var(--royal-blue-traditional);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

#suite .suite-account-link:hover {
    border-color: rgba(0, 80, 157, 0.28);
    background: rgba(0, 80, 157, 0.09);
    color: var(--royal-blue-traditional);
    transform: translateY(-2px);
}

#suite .suite-account-link > span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#suite .suite-account-link small {
    margin-top: 0.15rem;
    color: #667085;
}

#suite .suite-account-link > .fa-arrow-right {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#suite .suite-founder-note {
    max-width: 760px;
    margin: 1.75rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
    color: #667085;
    text-align: center;
}

#suite .suite-founder-note blockquote {
    margin: 0;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.65;
}

#suite .suite-founder-note figcaption {
    margin-top: 0.55rem;
    color: #475467;
    font-size: 0.85rem;
}

#suite .suite-founder-note a {
    color: var(--findaroo-blue);
    font-weight: 600;
    text-decoration-color: rgba(0, 80, 157, 0.35);
    text-underline-offset: 0.18em;
}

#suite .suite-founder-note a:hover {
    color: var(--royal-blue-traditional);
    text-decoration-color: currentColor;
}

@media (max-width: 767.98px) {
    #suite .suite-flow {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    #suite .suite-product-card {
        width: 100%;
        min-height: 148px;
    }

    #suite .suite-connector {
        height: 38px;
        transform: rotate(90deg);
    }

    #suite .suite-account-link {
        width: 100%;
        max-width: 320px;
        border-radius: var(--radius-card);
    }
}

/* Footer small text moved from inline style */
.footer-small {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.2px;
}

/* Ensure footer legal links match small footer text color/size */
.footer-small a {
    color: inherit;
    font: inherit;
}

/* Footer legal links: spacing and hover animation to match navbar CTA hover */
.footer-legal-links {
    display: inline-block;
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    letter-spacing: -0.2px;
}

.footer-legal-links a {
    color: inherit;
    display: inline-block;
    border-radius: 50px;
    /* match CTA pill radius */
    padding: 0.5rem 1rem;
    /* match navbar link padding exactly */
    border: 1px solid transparent;
    /* reserve space to prevent layout shift on hover */
    box-sizing: border-box;
    /* ensure border doesn't change outer size */
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Footer legal links: show gray glass only on hover (matches Back to Home CTA) */
.footer-legal-links a:hover {
    color: #0b1220;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}

/* Colored heart moved from inline style */
.colored-heart {
    background: linear-gradient(90deg, #007BFF, #9D00FF, #FF4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Compact footer height similar to dashboard card height */
.footer-compact .container {
    max-width: 1200px;
}

.footer-compact .text-center {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Remove extra vertical padding around the footer container so the overall
   footer height matches the dashboard page */
.content-section.footer-section {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Ensure spacing above footer comes only from the last content-section's margin */
/* No extra margin on footer itself */

/* Animation containers */
.animation-container {
    height: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Mac Window Styles */
.mac-window {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 300px;
    overflow: hidden;
}

.mac-header {
    background: #e5e7eb;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    position: relative;
}

.mac-buttons {
    display: flex;
    gap: 6px;
}

.mac-buttons span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    background: #cbd5e1;
}

.mac-title {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.mac-content {
    padding: 20px;
    background: white;
}

/* Upload Animation */
.file-icon {
    text-align: center;
    margin-bottom: 20px;
    animation: bounce-in 0.5s ease 0s 1;
}

.file-icon i {
    font-size: 48px;
    color: #334155;
    margin-bottom: 10px;
}

.file-name {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
}

.upload-container {
    position: relative;
    min-height: 60px;
}

.upload-progress {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin: 20px 0;
    overflow: hidden;
    opacity: 0;
    animation: fade-in 0.3s ease 0.5s forwards;
}

.progress-bar {
    height: 100%;
    background: #334155;
    width: 0;
    animation: progress 2.5s ease-in-out 0.8s forwards, progress-restart 3s linear 3.3s infinite;
}

.upload-complete {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 24px;
    color: #16a34a;
    opacity: 0;
    animation: show-complete 0.5s ease-out 3.3s forwards, complete-restart 3s linear 3.8s infinite;
}

/* Excel Window Animation */
.excel-window {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 350px;
    overflow: hidden;
}

.excel-header {
    background: #334155;
    padding: 8px 12px;
}

.excel-rows {
    font-size: 14px;
    color: #111827;
    position: relative;
    height: 160px;
    overflow: hidden;
}

.excel-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.excel-row.header {
    font-weight: bold;
    color: #0f172a;
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

.excel-rows-container {
    animation: slideAndRepeat 8s linear infinite;
}

.email-cell {
    color: #334155;
}

/* Step 3 – Results to CSV animation (looping conveyor) */
.results-scene {
    position: relative;
    width: 280px;
    height: 160px;
}

.results-scene .belt {
    position: absolute;
    left: 8px;
    right: 76px;
    /* space for download box */
    bottom: 42px;
    height: 12px;
    background: #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.results-scene .belt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 12px, rgba(0, 0, 0, 0.0) 12px 24px);
    animation: belt-move 1.2s linear infinite;
}

.results-scene .download {
    position: absolute;
    right: 8px;
    bottom: 24px;
    width: 64px;
    height: 56px;
    border: 2px solid #334155;
    border-radius: 8px;
    background: linear-gradient(#ffffff, #f8fafc);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.results-scene .download .label {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 1px;
}

.results-scene .sheet {
    position: absolute;
    left: -180px;
    bottom: 36px;
    width: 200px;
    /* landscape */
    background: #ffffff;
    border: 2px solid #334155;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    padding: 6px 10px;
    /* slightly shorter */
    overflow: hidden;
    /* keep contents inside border */
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(0deg);
    animation: sheet-convey 2.8s ease-in-out infinite;
}

.results-scene .sheet-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 8px;
    padding: 4px 0;
    /* reduce height */
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    color: #111827;
}

/* allow grid children to shrink and wrap */
.results-scene .sheet-row span {
    min-width: 0;
}

.results-scene .sheet-row span:last-child {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

.results-scene .sheet-row.header {
    font-weight: 700;
    color: #0f172a;
}

.results-scene .check {
    position: absolute;
    right: 2px;
    bottom: 84px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #16a34a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    animation: check-timeline 2.8s ease-out infinite;
}

.results-scene .check i {
    font-size: 12px;
}

@keyframes belt-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(24px);
    }
}

@keyframes sheet-convey {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(-2deg);
    }

    5% {
        opacity: 1;
    }

    65% {
        opacity: 1;
        transform: translateX(220px) translateY(0) rotate(0deg);
    }

    78% {
        opacity: 1;
        transform: translateX(220px) translateY(16px) scale(0.98);
    }

    88% {
        opacity: 0;
        transform: translateX(220px) translateY(24px) scale(0.96);
    }

    100% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(-2deg);
    }
}

@keyframes check-timeline {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    79% {
        opacity: 0;
        transform: scale(0.6);
    }

    82% {
        opacity: 1;
        transform: scale(1);
    }

    92% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

/* Keyframe Animations */
@keyframes bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes progress {
    0% {
        width: 0;
    }

    80% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

@keyframes show-complete {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes complete-cycle {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    20% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(1.1);
        opacity: 0.5;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes progress-restart {
    0% {
        width: 0;
    }

    80% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

@keyframes complete-restart {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }

    40% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    60% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    80% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

@keyframes slideAndRepeat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-320px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .animation-container {
        min-height: 200px;
        padding: 1rem;
    }

    .mac-window,
    .excel-window {
        width: 280px;
    }

    .download-scene {
        width: 200px;
        height: 120px;
    }

    .results-scene {
        width: 220px;
        height: 140px;
    }

    .file-icon i {
        font-size: 36px;
    }

    .excel-rows {
        font-size: 12px;
    }
}

/* Made in Europe Section */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text-heading);
}

.feature-list i {
    color: var(--text-heading);
}

/* Vision Statement */
.vision-statement {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Updated Pricing Styles */
.pricing-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* The card itself is not a control — only its CTA is. Hover gets a subtle
   lift, not a blue border, which would spend brand colour on a non-action
   and imply the whole card is clickable (DESIGN.md §4, §10). */
.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.10);
}

.pricing-card.featured {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.pricing-card.featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.10);
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    height: 280px;
}

.pricing-header h3 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    color: var(--findaroo-blue);
    font-weight: 600;
    flex-shrink: 0;
}

/* Production package cards use fixed Auth plan data rather than the legacy
   validation slider, so their header can collapse to its actual content. */
#pricing .production-plan .pricing-header {
    height: auto;
    min-height: 132px;
    margin-bottom: 0.5rem;
}

#pricing .production-plan .pricing-header h3 {
    margin-bottom: 1rem;
}

#pricing .production-plan .pricing-features {
    margin: 1.25rem 0 2rem;
}

.volume-display {
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.volume-display label {
    font-size: 0.9rem;
    color: var(--findaroo-blue);
    margin-bottom: 1rem;
    display: block;
    font-weight: 500;
}

.volume-slider {
    display: flex;
    flex-direction: column;
    height: 76px;
    /* Height of range input + amount text */
}

.volume-slider-spacer {
    height: 38px;
    /* Height of range input */
}

.volume-amount {
    font-size: 1.1rem;
    color: var(--findaroo-blue);
    font-weight: 500;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Volume slider (DESIGN.md §9): visible focus, adequate target size,
   and a textual read-out of the current value. */
.form-range {
    width: 100%;
    margin-bottom: 1rem;
    height: 24px;
    /* generous vertical target while the track stays slim */
    background: transparent;
}

.form-range::-webkit-slider-thumb {
    background: var(--findaroo-blue);
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 41, 107, 0.35);
}

.form-range::-moz-range-thumb {
    background: var(--findaroo-blue);
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 41, 107, 0.35);
}

.form-range::-webkit-slider-runnable-track {
    background: rgba(0, 80, 157, 0.2);
    height: 6px;
    border-radius: var(--radius-capsule);
}

.form-range::-moz-range-track {
    background: rgba(0, 80, 157, 0.2);
    height: 6px;
    border-radius: var(--radius-capsule);
}

.form-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 80, 157, 0.55);
}

.form-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 80, 157, 0.55);
}

/* The slider caption is descriptive text, not a label for a control. */
.volume-caption {
    font-size: 0.9rem;
    color: var(--findaroo-blue);
    margin-bottom: 1rem;
    display: block;
    font-weight: 500;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--findaroo-blue);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
    flex-shrink: 0;
}

.price .currency {
    font-size: 1.5rem;
    font-weight: 500;
    vertical-align: super;
    color: var(--findaroo-blue);
}

.price .period {
    font-size: 1rem;
    color: rgba(0, 80, 157, 0.7);
    font-weight: normal;
}

.pricing-features {
    flex-grow: 1;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-features li {
    padding: 0;
    color: var(--text-heading);
    font-size: 1rem;
    display: flex;
    align-items: center;
    min-height: 28px;
}

.pricing-features i {
    width: 24px;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.pricing-features .feature-text {
    display: block;
    min-width: 0;
    padding-top: 0.35rem;
    line-height: 1.45;
}

.pricing-features li.credit-allocation {
    display: block;
    width: 100%;
    padding: 0.1rem 0 0.15rem 1rem;
    border-left: 4px solid var(--findaroo-yellow);
}

.pricing-features .credit-allocation .feature-text {
    display: block;
    min-width: 0;
    padding-top: 0;
}

.credit-allowance-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.credit-allowance-line {
    display: flex;
    align-items: baseline;
    gap: 0.48rem;
    margin-bottom: 0.32rem;
    white-space: nowrap;
}

.credit-allowance-line strong {
    color: var(--findaroo-blue);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
}

.credit-allowance-line span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.credit-allowance-meta {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}

.pricing-features li.inboxing-allocation {
    display: block;
    width: 100%;
    padding: 0.1rem 0 0.15rem 1rem;
    border-left: 4px solid #0b8f68;
}

.pricing-features .inboxing-allocation .feature-text {
    display: block;
    min-width: 0;
    padding-top: 0;
}

.inboxing-allowance-label {
    display: block;
    margin-bottom: 0.35rem;
    color: #087457;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.inboxing-allowance-line {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    margin-bottom: 0.32rem;
    white-space: nowrap;
}

.inboxing-allowance-line strong {
    color: var(--text-heading);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.inboxing-allowance-line span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.inboxing-allowance-meta {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}

.pricing-features .coming-soon {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.pricing-features .disabled-feature {
    color: #999;
    text-decoration: line-through;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .pricing-card {
        padding: 1.5rem;
    }

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

    .volume-display {
        margin: 1.5rem 0;
    }

    .price {
        font-size: 2rem;
        margin: 1.5rem 0;
    }

    .pricing-features {
        margin: 1.5rem 0;
    }

    .pricing-cta {
        margin-top: 1.5rem;
    }
}

/* Hero Section */
.hero-section {
    padding: 120px 0;
    color: var(--text-primary);
}

.hero-animation {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
    position: relative;
    overflow: hidden;
}

.form-animation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cursor {
    width: 2px;
    height: 1.5rem;
    background-color: var(--findaroo-blue);
    position: absolute;
    opacity: 0;
    animation: blink 0.7s infinite;
    transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
}

.magic-wand {
    position: absolute;
    font-size: 2rem;
    color: var(--mikado-yellow);
    opacity: 0;
    transform: rotate(-45deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--mikado-yellow);
    border-radius: 50%;
    opacity: 0;
    animation: particle-animation 1s ease-out forwards;
}

.email-output.magical-reveal {
    animation: magical-text-reveal 1s ease-out forwards;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes magical-text-reveal {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-15deg);
        text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        text-shadow: none;
    }
}

@keyframes particle-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0) translate(var(--x), var(--y));
    }
}

.input-group,
.output-group {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
}

.input-group label,
.output-group label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.input-group input,
.email-output {
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0;
}

.email-output {
    min-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    height: 2.5rem;
    /* Set a fixed height */
    position: relative;
}

.email-reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.email-item {
    height: 2.5rem;
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Status is never carried by color alone (DESIGN.md §4, §11):
   rejected candidates are struck through, the accepted one is ticked. */
.email-item.invalid {
    color: var(--status-danger);
    text-decoration: line-through;
}

.email-item.valid {
    color: var(--status-success);
    font-weight: 600;
}

.email-item.valid::after {
    content: "\2713";
    /* check mark */
    margin-left: 0.5rem;
    font-weight: 700;
}

.email-item.invalid::after {
    content: "\00d7";
    /* multiplication sign */
    margin-left: 0.5rem;
    text-decoration: none;
    display: inline-block;
}

.stats-badge {
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Vision Section */
.vision-section {
    background-color: white;
    border-radius: 20px;
    margin: -60px auto var(--section-gap);
    position: relative;
    z-index: 1;
    max-width: 1200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Ensure subsequent vision blocks don't overlap the previous one */
.vision-section+.vision-section {
    margin-top: var(--section-gap);
}

.vision-statement {
    font-weight: 500;
    color: var(--text-heading);
    line-height: 1.6;
    margin: 0;
}

/* Stats Badge */
.stats-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

/* GDPR pill — a secondary control: neutral glass, no blue bloom,
   so it never competes with the primary CTA (DESIGN.md §9). */
.gdpr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-capsule);
    border: 1px solid rgba(16, 24, 40, 0.10);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturation));
    color: #1f2937;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
    transition:
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard),
        background-color var(--motion-base) var(--ease-standard);
}

.gdpr-pill:hover {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 24px rgba(16, 24, 40, 0.09);
}

.gdpr-pill:active {
    transform: scale(0.985);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.gdpr-pill .fa-shield {
    color: var(--findaroo-blue);
}

/* Popover carries text, so it uses the more legible regular-glass
   treatment (DESIGN.md §5, §9). */
.popover.gdpr-popover {
    --bs-popover-bg: transparent;
    --bs-popover-border-color: var(--glass-border);
    max-width: 320px;
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.80));
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.popover.gdpr-popover .popover-arrow::after {
    border-bottom-color: rgba(255, 255, 255, 0.88);
}

.popover.gdpr-popover .popover-header {
    display: none;
}

.popover.gdpr-popover .popover-body {
    color: #1f2937;
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.popover.gdpr-popover .popover-body p:last-child {
    margin-bottom: 0;
}

.popover.gdpr-popover .popover-body a {
    color: var(--findaroo-blue);
    font-weight: 600;
}

/* Logo styles */
.navbar-brand {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
    color: var(--royal-blue-traditional);
    transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.navbar-brand i {
    color: var(--mikado-yellow);
    font-size: 1.4rem;
    transition: color 0.3s ease;
}

.navbar-brand:hover {
    transform: scale(1.05);
    color: var(--polynesian-blue);
}

.navbar-brand:hover i {
    color: var(--gold);
}

/* The animated yellow dot is a Findaroo signature (DESIGN.md §2). */
.navbar-brand .brand-dot {
    color: var(--findaroo-yellow);
    display: inline-block;
    animation: brand-dot-bounce 1s infinite;
}

@keyframes brand-dot-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Primary CTA base. The glass recipe is applied in the functional-layer
   block below; no perpetual pulse (DESIGN.md §9, §10). */
.btn-cta-animated {
    background-color: var(--findaroo-blue);
    color: #ffffff;
}

/* Remove the black Bootstrap border from the in-page CTAs. This deliberately
   no longer requires .btn-dark: the two pricing CTAs lack that class, so they
   were the only CTAs keeping a 1px edge — which made them 2px wider than the
   identical button everywhere else. One border treatment for all of them.
   `.btn` is carried in the selector to stay more specific than the glass
   recipe below, which also sets a border with !important. */
.hero-section .btn.btn-cta-animated,
.content-section .btn.btn-cta-animated {
    border: none !important;
}

.hero-section .btn.btn-cta-animated:hover,
.content-section .btn.btn-cta-animated:hover {
    border: none !important;
}

/* Hero adjustments v2 */
@media (min-width: 992px) {
    .hero-copy {
        max-width: 720px;
    }
}

.hero-copy h1.display-2 {
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: 1.15;
    /* Without this the headline breaks before its em dash at narrow widths and
       strands the dash alone on a line (DESIGN.md §7, §8). */
    text-wrap: balance;
}

.hero-copy .lead {
    font-size: 1.1rem;
}

.hero-section {
    padding-top: 96px;
    padding-bottom: 96px;
}

@media (min-width: 992px) {
    .hero-animation {
        max-width: 480px;
        padding: 1.5rem;
    }
}

.input-group input,
.email-output {
    font-size: 1.1rem;
}

.email-output {
    height: 2.2rem;
    min-height: 1.1rem;
}

.email-item {
    height: 2.2rem;
    font-size: 1.1rem;
}

/* Hero adjustments v3: make animation more landscape on desktop */
@media (min-width: 992px) {
    .hero-animation {
        max-width: none;
        width: 100%;
        padding: 1.25rem;
    }

    .form-animation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .form-animation .input-group:nth-child(1) {
        /* Domain */
        grid-column: 1 / -1;
    }

    .form-animation .input-group:nth-child(2) {
        /* First name */
        grid-column: 1;
    }

    .form-animation .input-group:nth-child(3) {
        /* Last name */
        grid-column: 2;
    }

    .form-animation .output-group {
        /* Validated email */
        grid-column: 1 / -1;
    }
}

/* CTA sizing tweaks */
.hero-section .btn-cta-animated,
.content-section .btn-cta-animated {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    border-radius: 8px;
}

.hero-section .btn-cta-animated.btn-lg,
.content-section .btn-cta-animated.btn-lg {
    padding: 0.7rem 1.3rem;
    font-size: 1rem;
}

/* GDPR pill slightly smaller */
.gdpr-pill {
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
}

/* Centered hero variant */
.hero-centered .hero-copy h1,
.hero-centered .hero-copy .lead,
.hero-centered .hero-copy .reassurance-text,
.hero-centered .hero-copy .stats-badge,
.hero-centered .hero-copy .btn {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.hero-centered .cta-cluster {
    align-items: center;
}

.hero-centered .hero-animation {
    max-width: 720px;
    width: 100%;
}

/* Headline block vertically centered, animation spaced below */
.hero-centered .hero-headline {
    min-height: calc(100vh - 280px);
    /* leave room for animation below */
    padding-top: 48px;
    padding-bottom: 24px;
}

.hero-centered .hero-animation {
    margin-top: 48px;
    /* base spacing */
}

/* Lift the animation higher on desktop while keeping headline fixed */
@media (min-width: 992px) {
    .hero-centered .hero-animation {
        margin-top: calc(48px - 10vh);
    }
}

@media (max-width: 991.98px) {
    .hero-centered .hero-headline {
        min-height: calc(100vh - 320px);
        padding-top: 32px;
        padding-bottom: 16px;
    }

    .hero-centered .hero-animation {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Layer model (DESIGN.md §3)
   Functional layer  — navbar, CTAs, popovers: full glass recipe.
   Content layer     — sections, cards, copy: calmer, more opaque surfaces.
   ========================================================================== */

/* Navbar container: the suite bar. The paint values are auth's, findaroo's,
   bounceroo's and inboxing's, copied verbatim so this bar is the same object
   as theirs — more opaque and less blurred than the glass this page used to
   give it, with a dark hairline instead of a white one.

   The glass is painted by ::before rather than on the container itself.
   backdrop-filter makes an element a containing block for fixed-position
   descendants, and the responsive drawer lives inside this bar: with the
   filter here the drawer was trapped in the bar's own box — measured 64px
   tall instead of the viewport's 844. The apps never hit this because their
   drawer sits outside the navbar, in the page's sidebar column. */
.navbar .container {
    background: transparent !important;
    border: 0;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    position: relative;
}

/* --- Content layer -------------------------------------------------------
   Page-level section framing. Calmer and more opaque than the controls that
   sit on top of it, so the functional layer stays visually dominant.
   These surfaces carry reading-heavy content; they are not controls. */
.content-section,
.vision-section,
.footer .card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-region);
    box-shadow: var(--content-shadow) !important;
    -webkit-backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
    backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
    position: relative;
}

/* Product demonstration frame (DESIGN.md §6: ~16px radius).
   Near-solid so the demo reads crisply; it is content, not a control. */
.hero-animation {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
    border: 1px solid var(--content-border);
    border-radius: var(--radius-frame);
    box-shadow: var(--content-shadow) !important;
    -webkit-backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
    backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
    position: relative;
}

/* Cards nested inside a translucent section stay solid.
   Stacking glass on glass is explicitly discouraged (DESIGN.md §9, §13). */
.pricing-card,
.feature-card {
    background: var(--surface-solid);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    position: relative;
}

/* The bar's material, painted behind its contents so the container itself can
   stay free of backdrop-filter. Top-edge highlight over the suite's base fill;
   no radial spotlight and no conic sweep, which on a text-bearing surface read
   as a white oval and diagonal glare (DESIGN.md §6, §13). */
.navbar .container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: inherit;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    backdrop-filter: blur(28px) saturate(200%);
}

/* --- Collapsed navigation (DESIGN.md §9) ---------------------------------
   Expanded, the bar is no longer a horizontal control, so it stops being a
   capsule: a 999px radius on a tall box draws an ellipse that clips the
   links. It becomes a content region, and the actions stack full width.
   Placed after the glass rule so it wins on source order. */
/* The nav card is the apps' sidebar element (styles.css:176). Below lg the app
   menu moves this exact subtree into its popover, where app-switcher.css strips
   the card back to a plain list. Copied verbatim so the moved subtree is the
   same object the apps hand over. */
.left-navbar-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.left-navbar-card.nav-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .left-navbar-card.nav-card {
        min-height: auto;
    }
}

.left-navbar-card.nav-card nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Menu item states, copied from the app (styles.css:268). Scoped to the card
   rather than to .navbar, which matters here: the app menu moves this subtree
   out of the bar, so a .navbar-scoped hover would stop matching exactly when
   the items are being used. */
.left-navbar-card .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    /* The app writes `transition: all` here. Spelled out instead, because
       `all` animates outline-color too and the focus ring then fades in
       rather than appearing on focus. */
    transition:
        color var(--motion-base) var(--ease-standard),
        background-color var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
    border: 1px solid transparent;
    box-sizing: border-box;
}

.left-navbar-card .nav-link:hover,
.left-navbar-card .nav-link.active {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}

/* Remove underline animation on hover to match navbar Logout behavior */
.left-navbar-card .nav-link:hover::after {
    width: 0 !important;
}

/* Menu-item emoji, as the apps' sidebars use (🏠 Dashboard, ⚙️ Settings…).
   A span rather than a literal in the text so it can be hidden from screen
   readers and kept off the label above lg, where the bar is a plain row. */
.nav-emoji {
    margin-right: 0.5rem;
}

@media (min-width: 992px) {
    .navbar .nav-emoji {
        display: none;
    }
}

/* In the bar this is just the actions row; the app menu's bottom-slot styling
   takes over once the component has moved it into the panel. Scoped to lg and
   up on purpose: the panel is mounted inside .navbar too, so an unscoped rule
   here also forces the bottom slot into a row and squeezes the CTA until its
   label wraps. The row direction is restated because Bootstrap's .card is a
   column flex container, which otherwise stacks Login above the CTA and
   doubles the bar's height. */
@media (min-width: 992px) {
    .navbar .left-navbar-card.credits-card {
        flex-direction: row;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Legal pages keep the brand and Back to Home together on the left,
       while the utility cluster follows the landing-page rhythm on the
       right: app switcher -> Login -> CTA. */
    .legal-navbar .container {
        justify-content: flex-start;
    }

    .legal-navbar .suite-navigation-source {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
}

/* Above lg the source must not exist as a box: `display: contents` drops the
   wrapper out of layout so the links and actions become direct flex children
   of the bar and lay out in one row. Without it they stack, because the
   wrapper is a block and they are its children, not the bar's. */
@media (min-width: 992px) {

    .suite-navigation-source {
        display: contents;
    }

    /* The apps render this card in a sidebar column; this page has no sidebar,
       so in the bar it carries no card surface and lays its links out in a row.
       Below lg it is untouched and goes to the popover as the apps' card. */
    .navbar .left-navbar-card {
        display: contents;
    }

    /* !important: the element carries Bootstrap's .flex-column, which is
       itself !important. It is a column in the apps' sidebar and in the
       popover; in this bar it is a row.
       flex is reset because the card rule gives this `flex: 1` to fill the
       sidebar's height — in a horizontal bar that makes it eat all the free
       space, so the auto margins resolve to 0 and the links stop centring. */
    .navbar .left-navbar-card.nav-card nav {
        flex: 0 0 auto;
        flex-direction: row !important;
        align-items: center;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {

    /* The brand sits next to the app menu button, which is the only other
       thing in the bar at this width. */
    .navbar-brand {
        margin-right: auto;
    }

    /* Legal-page mobile bars mirror the app: brand + return action form one
       compact group on the left, while the app switcher owns the far edge. */
    .legal-navbar .navbar-brand {
        margin-right: 0;
    }

    .legal-navbar #navbar-right-slot {
        margin-left: auto;
    }

    /* Legal pages use the same compact mobile return control as the app:
       keep the accessible label on the link, but show only the arrow. */
    .legal-navbar .back-home-label {
        display: none;
    }

    .legal-navbar .btn-glass-gray {
        flex: 0 0 var(--hit-area);
        inline-size: var(--hit-area);
        block-size: var(--hit-area);
        min-inline-size: var(--hit-area);
        padding: 0;
        border-radius: 50%;
    }

    .legal-navbar .btn-glass-gray .fa-arrow-left {
        margin-right: 0 !important;
    }

    /* Below lg the links belong to the app menu. Until the menu has taken the
       subtree — and if scripting never runs at all — it must not render inside
       the bar, where a stacked card would break the layout. There is no
       hamburger fallback any more, so with JS off the links are simply absent
       here; every one of them is a same-page anchor also reachable from the
       page body. */
    .suite-navigation-source:not(.suite-navigation-mounted) {
        display: none;
    }

    /* The drawer and its scrim have to sit above the fixed navbar. */
    .sidebar-offcanvas {
        --bs-offcanvas-width: 300px;
        z-index: 1060;
    }

    .sidebar-offcanvas .offcanvas-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .sidebar-offcanvas .offcanvas-title {
        font-weight: 700;
        letter-spacing: -0.3px;
    }

    .sidebar-offcanvas .offcanvas-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }

    /* Frosted scrim rather than the default solid black backdrop. */
    .offcanvas-backdrop {
        z-index: 1055;
        background-color: rgb(30, 41, 59);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .offcanvas-backdrop.show {
        opacity: 0.35;
    }

    .suite-navigation-source .navbar-nav {
        margin: 0;
        width: 100%;
    }

    .suite-navigation-source .nav-item {
        width: 100%;
    }

    .suite-navigation-source .nav-link {
        display: flex;
        align-items: center;
        min-height: var(--hit-area);
        width: 100%;
        padding: 0.5rem 0.75rem !important;
    }

    /* Login and the primary CTA stack instead of crowding one line. */
    .navbar-actions {
        flex-direction: column;
        /* !important: the slot carries Bootstrap's .align-items-center, which
           is itself !important and would centre these in the column. */
        align-items: flex-start !important;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
    }

    /* Login is a text link: align it to the drawer's left rhythm. */
    /* `.btn` is in the selector to outrank the hit-area rule further down,
       which centres `.navbar .btn-link` — and this link is still inside
       .navbar, because the app menu mounts into the bar's right slot. */
    .navbar-actions .btn.btn-link {
        margin-right: 0 !important;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding-left: 0.75rem;
    }

    .navbar-actions .btn-cta-animated {
        width: 100%;
    }
}

/* --- One CTA size on mobile ----------------------------------------------
   The five in-page CTAs carry the same label but had picked up five different
   widths at 390px — 366 (hero, full-width), 205 (How it Works), 275 twice
   (pricing .w-100), 272 (final, .px-5 .py-3). Give them all the How it Works
   metrics and let them size to their text: identical label, identical width,
   without hardcoding one.

   !important is needed to beat Bootstrap's own !important utilities (.w-100,
   .px-5, .py-3); the two-class selectors outrank those single-class rules.
   The toggler menu's CTA is deliberately left full width — inside an open
   menu it is a stacked row, not one of the page's buttons. */
@media (max-width: 767.98px) {

    .hero-section .btn-cta-animated,
    .content-section .btn-cta-animated,
    .navbar-actions .btn-cta-animated {
        width: auto !important;
        padding: 0.6rem 1.2rem !important;
        font-size: 0.95rem !important;
        min-height: var(--hit-area);
    }

    /* The menu CTA keeps the glass border its navbar context gives it, which
       would make it the 2px outlier the pricing pair used to be. The ID
       out-specifies the glass recipe's bordered !important. */
    .navbar-actions .btn.btn-cta-animated {
        border: none !important;
    }

    /* Login is a menu row and keeps the list's left edge. The CTA is an
       action, not a row: centred in the slot, and the only item in the panel
       without an icon, so it reads as a button rather than one more entry. */
    .navbar-actions {
        align-items: flex-start !important;
    }

    .navbar-actions .btn-cta-animated {
        align-self: center !important;
        margin-top: 4px;
    }

    /* The hero and pricing CTAs are the ones that were stretching. Their
       containers still need to centre them once they stop filling the row. */
    .hero-centered .cta-cluster {
        align-items: center;
    }

    .pricing-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Blue prominent glass — the primary action (DESIGN.md §5).
   Regular glass first, then a restrained blue layer on top of it. The blue
   must sit ABOVE the white veil, or the tint washes out and the button stops
   reading as the primary action. Label stays deep navy for contrast. */
.btn.btn-cta-animated,
.btn.btn-outline-dark {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #00213d !important;
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.30) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(0, 80, 157, 0.18), rgba(0, 80, 157, 0.11)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    background-attachment: scroll, scroll, scroll, scroll;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 10px 24px rgba(0, 41, 107, 0.18),
        0 0 32px rgba(0, 80, 157, 0.22);
}

.btn.btn-cta-animated {
    color: #00213d !important;
    animation: none !important;
}

/* Material detail only: a short top-edge highlight and fine noise.
   No conic sweep and no full-height white veil — a screen-blended veil
   erases the blue tint and reads as glare (DESIGN.md §10, §13). */
.btn.btn-cta-animated::before,
.btn.btn-outline-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.12"/></svg>');
    background-blend-mode: normal, soft-light;
    background-repeat: no-repeat, repeat;
    background-size: auto, 120px 120px;
    border-radius: inherit;
    pointer-events: none;
}

/* Interaction states (DESIGN.md §9, §10).
   Hover raises elevation and luminosity; press drops elevation and
   compresses slightly; focus-visible is always drawn. */
.btn.btn-cta-animated,
.btn.btn-outline-dark,
.btn.btn-glass-gray {
    transition:
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard),
        background-color var(--motion-base) var(--ease-standard);
}

.btn.btn-cta-animated:hover,
.btn.btn-outline-dark:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 18px 40px rgba(0, 41, 107, 0.20),
        0 0 40px rgba(0, 80, 157, 0.28);
}

.btn.btn-cta-animated:active,
.btn.btn-outline-dark:active,
.btn.btn-glass-gray:active {
    transform: translateY(0) scale(0.985);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 4px 12px rgba(0, 41, 107, 0.16);
}

.btn.btn-cta-animated:disabled,
.btn.btn-cta-animated.disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
    cursor: not-allowed;
}

/* ==========================================================================
   Focus visibility (DESIGN.md §11)
   Every interactive element draws a focus ring for keyboard users.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.gdpr-pill:focus-visible,
.form-range:focus-visible {
    outline: 3px solid var(--findaroo-blue);
    outline-offset: 3px;
    border-radius: var(--radius-control);
}

/* Capsule controls keep a capsule ring, and the ring colour is the brand
   blue everywhere — `.nav-link` colour rules would otherwise win and
   resolve the outline to currentColor. */
.navbar .nav-link:focus-visible,
.navbar .btn-link:focus-visible,
.navbar .btn-cta-animated:focus-visible,
.gdpr-pill:focus-visible,
.footer-legal-links a:focus-visible {
    border-radius: var(--radius-capsule);
    outline: 3px solid var(--findaroo-blue);
    outline-offset: 3px;
}

/* Bootstrap removes outlines on .btn focus; restore ours. */
.btn:focus-visible {
    box-shadow: none;
}

.btn.btn-cta-animated:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 18px 40px rgba(0, 41, 107, 0.20);
}

/* Comfortable hit areas (DESIGN.md §9, §11) */
.btn.btn-cta-animated,
.btn.btn-glass-gray,
.navbar .btn-link,
.gdpr-pill {
    min-height: var(--hit-area);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler {
    min-width: var(--hit-area);
    min-height: var(--hit-area);
}

/* Gray glass button variant for policy pages' "Back to Home" CTA */
.btn.btn-glass-gray {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border) !important;
    color: #111827 !important;
    /* slate-900 */
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        /* gray accent */
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    background-attachment: scroll, scroll, scroll, scroll;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    /* diffused glow only (no solid spread) to match blue CTA */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
    will-change: background-position, background;
}

.btn.btn-glass-gray::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.12"/></svg>');
    background-blend-mode: normal, soft-light;
    background-repeat: no-repeat, repeat;
    background-size: auto, 120px 120px;
    border-radius: inherit;
    pointer-events: none;
}

.btn.btn-glass-gray:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 40px rgba(16, 24, 40, 0.18), 0 0 40px rgba(107, 114, 128, 0.32);
}

/* Match navbar CTA sizing and radius */
.navbar .btn-glass-gray {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 50px;
}

/* ==========================================================================
   Resilience (DESIGN.md §5 fallback, §11 accessibility)
   Glass is an enhancement. Every surface stays legible without it.
   ========================================================================== */

/* No backdrop-filter support: fall back to an opaque surface. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

    .navbar .container,
    .content-section,
    .vision-section,
    .hero-animation,
    .footer .card,
    .popover.gdpr-popover {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(16, 24, 40, 0.10);
    }

    .btn.btn-cta-animated,
    .btn.btn-outline-dark {
        background: linear-gradient(180deg, rgba(0, 80, 157, 0.16), rgba(0, 80, 157, 0.10)), rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(0, 80, 157, 0.35) !important;
    }

    .btn.btn-glass-gray,
    .gdpr-pill {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(16, 24, 40, 0.14) !important;
    }

    .navbar .nav-link:hover,
    .navbar .btn-link:hover,
    .footer-legal-links a:hover {
        background: rgba(16, 24, 40, 0.06) !important;
        border-color: rgba(16, 24, 40, 0.12) !important;
    }
}

/* Reduced transparency / increased contrast: raise surface opacity and
   border contrast rather than relying on translucency for hierarchy. */
@media (prefers-reduced-transparency: reduce),
(prefers-contrast: more) {

    .navbar .container,
    .content-section,
    .vision-section,
    .hero-animation,
    .footer .card,
    .popover.gdpr-popover {
        background: var(--surface-solid) !important;
        border-color: rgba(16, 24, 40, 0.18) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .navbar .container::before {
        content: none !important;
    }

    /* The primary action keeps its blue identity, now as a solid fill. */
    .btn.btn-cta-animated {
        background: var(--findaroo-blue) !important;
        border-color: var(--findaroo-royal) !important;
        color: #ffffff !important;
    }

    .btn.btn-cta-animated::before {
        content: none !important;
    }

    .btn.btn-glass-gray,
    .gdpr-pill {
        background: var(--surface-solid) !important;
        border-color: rgba(16, 24, 40, 0.28) !important;
        color: var(--text-primary) !important;
    }

    .pricing-card {
        border-color: rgba(16, 24, 40, 0.20);
    }

    .text-block p,
    .text-muted {
        color: #4b5563 !important;
    }
}

/* Inboxing product demonstrations ------------------------------------------------- */
.inbox-campaign-demo,
.inbox-workflow-card {
    --inbox-green: #147a57;
    --inbox-green-soft: #eaf6f1;
    --inbox-navy: #102a56;
    color: #172033;
}

.inbox-campaign-demo {
    width: 100%;
    overflow: hidden;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(16, 42, 86, 0.10);
    text-align: left;
}

.icd-toolbar,
.iwc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 42px;
    padding: 0 16px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #dde5ee;
    font-size: 0.76rem;
    font-weight: 700;
}

.icd-toolbar > span:first-child,
.iwc-toolbar > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.icd-toolbar i,
.iwc-toolbar i {
    color: var(--inbox-green);
}

.icd-live,
.iwc-running {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-weight: 600;
}

.icd-live i,
.iwc-running i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.35);
    animation: inbox-live-pulse 2.4s ease-out infinite;
}

.icd-workspace {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
    padding: 14px;
}

.icd-sequence,
.icd-control {
    padding: 12px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 10px;
}

.icd-panel-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icd-stage {
    display: grid;
    grid-template-columns: 26px 1fr 18px;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 7px 9px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    opacity: 0;
    transform: translateX(-14px);
    animation: inbox-stage-in 8s ease-in-out infinite;
}

.icd-stage.stage-two { animation-delay: 0.55s; }
.icd-stage.stage-three { animation-delay: 1.1s; }

.icd-stage b {
    color: #8290a3;
    font-size: 0.65rem;
}

.icd-stage > span,
.icd-window > span,
.icd-sender > span:not(.icd-sender-avatar),
.icd-preview > span:nth-child(2),
.iwc-contact-row > span:nth-child(2),
.iwc-capacity-row > span,
.iwc-activity div > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.icd-stage strong { font-size: 0.7rem; }
.icd-stage small { color: #738096; font-size: 0.6rem; }
.icd-stage > i { color: var(--inbox-green); font-size: 0.65rem; }

.icd-delay {
    height: 16px;
    padding-left: 20px;
    color: #94a3b8;
    font-size: 0.55rem;
    line-height: 16px;
}

.icd-delay::before {
    display: inline-block;
    width: 8px;
    height: 100%;
    margin-right: 7px;
    border-left: 1px dashed #b9c5d3;
    content: "";
    vertical-align: middle;
}

.icd-schedule {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}

.icd-schedule span {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 6px;
    background: var(--inbox-green-soft);
    color: var(--inbox-green);
    font-size: 0.58rem;
    font-weight: 800;
}

.icd-schedule .is-off { background: #f1f3f6; color: #a8b0bc; }

.icd-window,
.icd-sender {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
}

.icd-window i { color: var(--inbox-green); }
.icd-window small,
.icd-sender small,
.icd-capacity small { color: #7a8798; font-size: 0.56rem; }
.icd-window strong,
.icd-sender strong,
.icd-capacity strong { font-size: 0.64rem; }

.icd-capacity { margin: 10px 0; }
.icd-capacity > span { display: flex; justify-content: space-between; }
.icd-capacity > div,
.iwc-capacity-row > div {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #e7edf3;
}

.icd-capacity i,
.iwc-capacity-row i {
    display: block;
    width: 80%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #20a671, #6dc59e);
    transform: scaleX(0);
    transform-origin: left;
    animation: inbox-capacity-fill 8s ease-in-out infinite;
}

.icd-sender-avatar,
.icd-contact-avatar,
.iwc-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #e9eff8;
    color: var(--inbox-navy);
    font-weight: 800;
}

.icd-sender-avatar { width: 26px; height: 26px; font-size: 0.57rem; }
.icd-sender b { margin-left: auto; color: var(--inbox-green); font-size: 0.54rem; }

.icd-preview {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #dde5ee;
    background: linear-gradient(90deg, #f7fafc, #edf8f3);
}

.icd-contact-avatar { width: 30px; height: 30px; font-size: 0.62rem; }
.icd-preview small { color: #758399; font-size: 0.58rem; }
.icd-preview strong { overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.icd-ready { color: var(--inbox-green); font-size: 0.62rem; font-weight: 800; }

.inbox-workflow-card {
    width: 92%;
    max-width: 510px;
    min-height: 250px;
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 14px;
    background: #fbfcfe;
    box-shadow: 0 14px 36px rgba(16, 42, 86, 0.09);
    text-align: left;
}

.iwc-toolbar small { color: #7b8797; font-weight: 600; }
.iwc-field-map,
.iwc-stage-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid #e5eaf0;
    color: #758297;
    font-size: 0.62rem;
}

.iwc-field-map b,
.iwc-stage-tabs span {
    padding: 4px 7px;
    border: 1px solid #dfe6ed;
    border-radius: 6px;
    background: #fff;
    color: #536176;
    font-size: 0.58rem;
}

.iwc-field-map i { margin-left: auto; color: var(--inbox-green); }
.iwc-stage-tabs .is-active { border-color: #acd9c6; background: var(--inbox-green-soft); color: var(--inbox-green); }

.iwc-contact-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid #edf0f4;
    opacity: 0;
    transform: translateX(-16px);
    animation: inbox-row-in 7s ease-in-out infinite;
}

.iwc-contact-row:nth-of-type(4) { animation-delay: 0.35s; }
.iwc-contact-row:nth-of-type(5) { animation-delay: 0.7s; }
.iwc-avatar { width: 25px; height: 25px; font-size: 0.55rem; }
.iwc-contact-row strong { font-size: 0.64rem; }
.iwc-contact-row small { color: #7c899a; font-size: 0.55rem; }
.iwc-contact-row > b { color: #657388; font-size: 0.57rem; }

.iwc-import-summary,
.iwc-preview-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    color: #657388;
    font-size: 0.6rem;
}

.iwc-import-summary span { color: var(--inbox-green); font-weight: 800; }
.iwc-subject,
.iwc-message { margin: 10px 14px 0; }
.iwc-subject { display: flex; flex-direction: column; gap: 3px; }
.iwc-subject small { color: #7b8797; font-size: 0.56rem; }
.iwc-subject strong { font-size: 0.68rem; }
.iwc-subject em,
.iwc-message em { color: var(--inbox-green); font-style: normal; }

.iwc-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.6rem;
    line-height: 1.35;
}

.iwc-preview-line { margin-top: 4px; border-top: 1px solid #e7ebf0; }
.iwc-preview-line span { color: var(--inbox-green); }

.iwc-control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 11px 14px 7px;
}

.iwc-control-grid > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    background: #fff;
}

.iwc-control-grid small,
.iwc-capacity-row small,
.iwc-activity small { color: #7b8797; font-size: 0.55rem; }
.iwc-control-grid strong,
.iwc-capacity-row strong,
.iwc-activity strong { font-size: 0.62rem; }

.iwc-capacity-row { padding: 3px 14px 9px; }
.iwc-capacity-row > span { flex-direction: row; justify-content: space-between; }

.iwc-activity { padding: 0 14px 10px; }
.iwc-activity > div {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #edf0f4;
    opacity: 0;
    transform: translateY(8px);
    animation: inbox-activity-in 7s ease-in-out infinite;
}

.iwc-activity > div:nth-child(2) { animation-delay: 0.45s; }
.iwc-activity > div:nth-child(3) { animation-delay: 0.9s; }
.iwc-activity > div > i { color: #6c7c91; text-align: center; }
.iwc-activity .activity-reply > i { color: var(--inbox-green); }
.iwc-activity time { color: #8b97a7; font-size: 0.55rem; }

.visual-paused .inbox-workflow-card *,
.visual-paused .inbox-workflow-card *::before,
.visual-paused .inbox-workflow-card *::after {
    animation-play-state: paused !important;
}

/* Hero story: one campaign decision at a time, followed by a clear outcome. */
.icd-sequence-stage {
    position: relative;
    display: grid;
    min-height: 245px;
    overflow: hidden;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(20, 122, 87, 0.09), transparent 32%),
        linear-gradient(180deg, #fbfcfe 0%, #f2f8f5 100%);
}

.icd-sequence-detail,
.icd-sequence-preparing,
.icd-sequence-result {
    position: absolute;
    inset: 0;
    display: grid;
    padding: 1.5rem;
    place-content: center;
    justify-items: center;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.icd-sequence-detail.is-visible,
.icd-sequence-preparing.is-visible,
.icd-sequence-result.is-visible {
    opacity: 1;
    transform: none;
}

.icd-sequence-detail small,
.icd-sequence-result small {
    margin-bottom: 0.5rem;
    color: #718096;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.icd-sequence-detail strong {
    max-width: 100%;
    color: #142238;
    font-size: clamp(1.35rem, 4.5vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.icd-sequence-detail::after {
    display: none;
}

.icd-sequence-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 0.7rem;
    color: #fff;
    background: var(--inbox-green);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(20, 122, 87, 0.18);
    place-items: center;
}

.icd-sequence-detail > span[data-icd-detail-value] {
    max-width: min(100%, 420px);
    margin-top: 0.45rem;
    color: #607067;
    font-size: 0.78rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.icd-sequence-progress {
    position: relative;
    width: min(220px, 68%);
    height: 4px;
    margin-top: 1.15rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dfeae5;
}

.icd-sequence-progress::after {
    position: absolute;
    inset: 0;
    width: var(--icd-progress, 16.666%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--inbox-green), #63b894);
    content: "";
    transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.icd-sequence-preparing {
    gap: 0.65rem;
}

.icd-sequence-preparing > strong {
    color: #25354b;
    font-size: 0.8rem;
}

.icd-preparing-visual {
    position: relative;
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
}

.icd-preparing-visual::before,
.icd-preparing-visual b {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(20, 122, 87, 0.18);
    border-radius: 50%;
    content: "";
}

.icd-preparing-visual b {
    inset: 9px;
    border-style: dashed;
}

.icd-preparing-visual i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--inbox-green);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(20, 122, 87, 0.2);
    place-items: center;
}

.icd-sequence-preparing.is-active .icd-preparing-visual::before {
    animation: inbox-simple-orbit 1.8s linear infinite;
}

.icd-sequence-preparing.is-active .icd-preparing-visual i {
    animation: inbox-simple-breathe 1.3s ease-in-out infinite;
}

.icd-sequence-result {
    gap: 0.35rem;
    background: linear-gradient(180deg, rgba(247, 252, 250, 0.8), rgba(225, 244, 237, 0.8));
}

.icd-sequence-check {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 0.35rem;
    color: #fff;
    background: var(--inbox-green);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(20, 122, 87, 0.2);
    place-items: center;
}

.icd-sequence-result strong {
    color: var(--inbox-green);
    font-size: clamp(1.05rem, 3vw, 1.4rem);
    letter-spacing: -0.025em;
}

@keyframes inbox-simple-orbit {
    to { transform: rotate(360deg); }
}

@keyframes inbox-simple-breathe {
    50% { transform: scale(1.07); }
}

.micro-compare.micro-wide {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

@keyframes inbox-stage-in {
    0%, 8% { opacity: 0; transform: translateX(-14px); }
    16%, 86% { opacity: 1; transform: translateX(0); }
    96%, 100% { opacity: 0; transform: translateX(6px); }
}

@keyframes inbox-capacity-fill {
    0%, 12% { transform: scaleX(0); }
    35%, 88% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

@keyframes inbox-row-in {
    0%, 8% { opacity: 0; transform: translateX(-16px); }
    18%, 88% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(8px); }
}

@keyframes inbox-activity-in {
    0%, 12% { opacity: 0; transform: translateY(8px); }
    22%, 88% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes inbox-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.35); }
    65%, 100% { box-shadow: 0 0 0 7px rgba(34, 160, 107, 0); }
}

@media (max-width: 767.98px) {
    .hero-animation { padding: 0.75rem; }
    .icd-sequence-stage { min-height: 220px; }
    .icd-sequence-detail,
    .icd-sequence-preparing,
    .icd-sequence-result { padding: 1.25rem; }
    .icd-workspace { grid-template-columns: 1fr; }
    .icd-preview { grid-template-columns: 28px minmax(0, 1fr); }
    .icd-ready { grid-column: 2; }
    .inbox-workflow-card { width: 98%; min-height: 230px; }
    .iwc-contact-row > b { display: none; }
    .iwc-stage-tabs span { flex: 1; padding-inline: 3px; text-align: center; }
    .iwc-control-grid { grid-template-columns: 1fr; }

    /* The desktop visual frame uses a fixed 7:4 canvas. These product demos
       become taller when their controls stack on mobile, so let the frame
       follow the demo's intrinsic height instead of clipping it. */
    #how-it-works .visual-card,
    #how-it-works .visual-canvas,
    #how-it-works .visual-fit {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #how-it-works .visual-card {
        aspect-ratio: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #how-it-works .visual-card,
    #how-it-works .visual-canvas,
    #how-it-works .visual-fit {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #how-it-works .visual-card {
        aspect-ratio: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #pricing .row.justify-content-center > .col-md-6 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 560px;
    }
}

/* Canonical landing-page rhythm shared across the suite. */
#made-in-europe .section-title {
    margin-bottom: 2rem;
}

#made-in-europe .text-block {
    padding: 0;
    margin-bottom: 0;
    text-align: left;
}

#made-in-europe .text-block p:last-child {
    margin-bottom: 0 !important;
}

#pricing .production-plan .pricing-header {
    min-height: 0;
    margin-bottom: 0;
}

#pricing .production-plan .pricing-features {
    margin: 0.75rem 0 2rem;
}

/* Keep the primary nav action on one line while the desktop bar tightens.
   Its type and horizontal padding ease down before the app-menu breakpoint. */
@media (min-width: 992px) {
    .navbar .navbar-actions .btn-cta-animated {
        flex-shrink: 1;
        padding-inline: clamp(0.7rem, 1.1vw, 1rem);
        font-size: clamp(0.75rem, 1.15vw, 0.95rem);
        line-height: 1.2;
        white-space: nowrap;
    }
}

/* Kings is intentionally separated from the recurring tiers: a dark,
   full-width lifetime offer rather than a fourth monthly-plan card. */
#pricing .kings-plan {
    width: 100%;
    max-width: none;
    margin: 0.5rem auto 0;
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.35fr) minmax(150px, 0.75fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.65rem 1.5rem;
    padding: 1.15rem 1.4rem;
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 0%, rgba(245, 196, 81, 0.16), transparent 30%),
        #0b0d10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(11, 13, 16, 0.22);
}

#pricing .kings-plan-main,
#pricing .kings-plan-footer {
    display: contents;
}

#pricing .kings-plan-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

#pricing .kings-plan-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    color: #f5c451;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#pricing .kings-plan h3 {
    margin: 0 0 0.2rem;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

#pricing .kings-plan-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

#pricing .kings-plan-price {
    grid-column: 3;
    grid-row: 1;
    flex: 0 0 auto;
    text-align: center;
}

#pricing .kings-plan-price > div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #ffffff;
    line-height: 1;
}

#pricing .kings-plan-price .currency {
    margin: 0.35rem 0.2rem 0 0;
    color: #f5c451;
    font-size: 1.25rem;
    font-weight: 700;
}

#pricing .kings-plan-price .amount {
    font-size: clamp(2.5rem, 5vw, 3.4rem);
    font-weight: 750;
    letter-spacing: -0.05em;
}

#pricing .kings-plan-price > span {
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.82rem;
}

#pricing .kings-plan-footer {
    margin: 0;
    padding: 0;
    border: 0;
}

#pricing .kings-plan-footer ul {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

#pricing .kings-plan-footer li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

#pricing .kings-plan-footer li i {
    color: #f5c451;
}

#pricing .kings-plan-cta {
    grid-column: 3;
    grid-row: 2;
    flex: 0 0 auto;
    min-width: 160px;
    padding: 0.65rem 1rem;
    color: #0b0d10;
    background: #f5c451;
    border: 1px solid #f5c451;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(245, 196, 81, 0.18);
}

#pricing .kings-plan-cta:hover,
#pricing .kings-plan-cta:focus-visible {
    color: #0b0d10;
    background: #ffda79;
    border-color: #ffda79;
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    #pricing .kings-plan {
        display: block;
        padding: 1.5rem;
        border-radius: 20px;
    }

    #pricing .kings-plan-main,
    #pricing .kings-plan-footer {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 1.25rem;
    }

    #pricing .kings-plan-footer {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    #pricing .kings-plan-price {
        text-align: left;
    }

    #pricing .kings-plan-price > div {
        justify-content: flex-start;
    }

    #pricing .kings-plan-footer ul {
        flex-direction: column;
    }

    #pricing .kings-plan-cta {
        width: 100%;
    }
}

#suite .suite-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

@media (max-width: 767.98px) {
    #suite .suite-flow {
        grid-template-columns: 1fr;
        max-width: 320px;
        row-gap: 1rem;
    }
}

/* ==========================================================================
   Reduced motion (DESIGN.md §10, §11)
   Decorative and looping motion stops. The final, informative state of every
   product demonstration stays visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Hold the demonstrations on their resolved state rather than frame 0. */
    .progress-bar {
        width: 100% !important;
    }

    .upload-progress,
    .upload-complete {
        opacity: 1 !important;
    }

    .upload-complete {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* Rest the sheet fully inside the scene: it starts at left:-180px, so it
       needs the full 180px back to clear its own left edge without running
       into the CSV box. */
    .results-scene .sheet {
        opacity: 1 !important;
        transform: translateX(180px) !important;
    }

    .results-scene .check {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .excel-rows-container {
        transform: none !important;
    }

    .btn.btn-cta-animated:hover,
    .btn.btn-outline-dark:hover,
    .btn.btn-glass-gray:hover,
    .btn.btn-cta-animated:active,
    .btn.btn-outline-dark:active,
    .btn.btn-glass-gray:active {
        transform: none;
    }

    .icd-stage,
    .iwc-contact-row,
    .iwc-activity > div {
        opacity: 1 !important;
        transform: none !important;
    }

    .icd-capacity i,
    .iwc-capacity-row i {
        transform: scaleX(1) !important;
    }
}