/**
 * EAZY STORAGE - Main Stylesheet
 * Version: 2.0.0
 * 
 * Table of Contents:
 * 1. CSS Custom Properties (Variables)
 * 2. Base Styles & Typography
 * 3. Navigation
 * 4. Buttons
 * 5. Animations & Reveals
 * 6. Hero Slider
 * 7. Features Hub (Bubbles Layout)
 * 8. Competitor Comparison
 * 9. Components
 * 10. Utilities
 * 11. Responsive & Print
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
    /* FastPay palette */
    --color-primary: #0C2340; /* dark navy */
    --color-background: #ffffff;
    --color-accent: #0E9AA7; /* teal */
    --color-accent-dark: #0C8690;
    --color-blue: #1B6FC2;
    --color-teal: #0E9AA7;
    --color-muted: #4D6177;
    --color-white: #ffffff;
    --color-dark-bg: #081526;
    --color-light-bg: #F0F7FF;

    --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    --transition-fast: 0.3s ease;
    --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 1s cubic-bezier(0.16, 1, 0.3, 1);

    --z-sticky-cta: 80;
    --z-mobile-menu: 90;
    --z-navbar: 100;
    --z-menu-toggle: 110;
}

/* ==========================================================================
   2. Base Styles & Typography
   ========================================================================== */

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

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: var(--font-display);
}

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

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary);
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

::selection {
    background: var(--color-accent);
    color: var(--color-primary);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 8px 16px;
    z-index: 1000;
    transition: top 0.3s;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   3. Navigation
   ========================================================================== */

.nav-animate {
    animation: navSlide 0.8s ease forwards;
}

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

.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform: translateX(-101%);
    transition: transform var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(0);
}

#mobile-menu {
    transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    clip-path: circle(0% at calc(100% - 40px) 40px);
    /* Layout overrides for inline Tailwind utilities (ID selector wins on specificity).
       Top-aligned + scrollable so long menus (incl. the Learn group) never clip on
       short phone screens. justify-content:flex-start is required, not cosmetic: a
       centred flex column with overflow pushes the first items above the top edge
       where scrolling cannot reach them. */
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 84px 28px max(40px, env(safe-area-inset-bottom, 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

#mobile-menu.open {
    clip-path: circle(150% at calc(100% - 40px) 40px);
}

.mobile-link {
    opacity: 0;
    transform: translateX(50px);
    transition: all var(--transition-fast);
    display: block;
}

/* Fit menu type to phone widths — override Tailwind text-4xl / text-2xl */
#mobile-menu .mobile-link.text-4xl {
    font-size: 1.6rem;
    line-height: 1.12;
    padding: 9px 0;
}

#mobile-menu .mobile-link.text-2xl {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.78);
    padding: 7px 0;
}

#mobile-menu .mobile-link.mt-8 {
    text-align: center;
    margin-top: 24px;
    flex: none;
}

#mobile-menu.open .mobile-link {
    opacity: 1;
    transform: translateX(0);
}

#mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.2s; }
#mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.3s; }
#mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.4s; }
#mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.5s; }
#mobile-menu.open .mobile-link:nth-child(5) { transition-delay: 0.6s; }
#mobile-menu.open .mobile-link:nth-child(6) { transition-delay: 0.65s; }
#mobile-menu.open .mobile-link:nth-child(7) { transition-delay: 0.7s; }
#mobile-menu.open .mobile-link:nth-child(8) { transition-delay: 0.75s; }
#mobile-menu.open .mobile-link:nth-child(9) { transition-delay: 0.8s; }

/* Learn submenu — desktop hover dropdown */
.has-submenu {
    position: relative;
}

.has-submenu > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.submenu-chevron {
    transition: transform var(--transition-fast);
}

.has-submenu:hover .submenu-chevron,
.has-submenu:focus-within .submenu-chevron {
    transform: rotate(180deg);
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 330px;
    padding-top: 18px;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 120;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.submenu-inner {
    background: var(--color-white);
    border: 1px solid rgba(12, 35, 64, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(12, 35, 64, 0.16);
    padding: 8px;
}

.submenu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: normal;
    transition: background var(--transition-fast);
}

.submenu-item:hover {
    background: var(--color-light-bg);
}

.submenu-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.submenu-title {
    display: block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
}

.submenu-desc {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-muted);
    margin-top: 2px;
}

/* Learn submenu — mobile sub-group label */
.mobile-sublabel {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

#mobile-menu .mobile-sublabel {
    margin-top: 22px;
    margin-bottom: 2px;
    pointer-events: none;
}

/* Hamburger toggle — meet the 44px minimum tap target (icon stays 28px, hit area grows) */
.nav-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -8px;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    z-index: -1;
}

.btn-primary:hover::before {
    transform: translateY(0);
}

.btn-primary:hover {
    color: var(--color-accent);
}

.btn-outline {
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    z-index: -1;
}

.btn-outline:hover::before {
    transform: translateY(0);
}

.btn-outline:hover {
    color: var(--color-primary);
    border-color: var(--color-accent);
}

/* ==========================================================================
   5. Animations & Reveals
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all var(--transition-slow);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: all var(--transition-slow);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all var(--transition-slow);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* FastPay layout tweak: keep "Take Control" visuals within viewport */
.take-control-reveal-right {
    transform: translateX(40px);
}

.take-control-reveal-right.active {
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--transition-slow);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.stagger-children > * {
    opacity: 0;
    transform: translateY(40px);
}

.stagger-children.active > *:nth-child(1) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.05s; }
.stagger-children.active > *:nth-child(2) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s; }
.stagger-children.active > *:nth-child(3) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.15s; }
.stagger-children.active > *:nth-child(4) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; }
.stagger-children.active > *:nth-child(5) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.25s; }
.stagger-children.active > *:nth-child(6) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; }
.stagger-children.active > *:nth-child(7) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.35s; }
.stagger-children.active > *:nth-child(8) { animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s; }

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

.hero-title {
    overflow: hidden;
}

.hero-title span {
    display: inline-block;
    animation: slideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(100%);
}

.hero-title span:nth-child(2) { animation-delay: 0.1s; }
.hero-title span:nth-child(3) { animation-delay: 0.2s; }
.hero-title span:nth-child(4) { animation-delay: 0.3s; }

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-fade {
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.hero-animate {
    animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.hero-animate-1 { animation-delay: 0.2s; }
.hero-animate-2 { animation-delay: 0.4s; }
.hero-animate-3 { animation-delay: 0.6s; }

@keyframes fadeIn {
    to { opacity: 1; }
}

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

/* ==========================================================================
   6. Hero Slider
   ========================================================================== */

.hero-slider {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Two stacked scrims: a vertical darken for the lower copy, plus the
       diagonal brand gradient. Keeps the headline + paragraph legible over
       any background image while preserving the teal accent on the right. */
    background:
        linear-gradient(
            180deg,
            rgba(8, 21, 38, 0.45) 0%,
            rgba(8, 21, 38, 0.1) 35%,
            rgba(8, 21, 38, 0.55) 100%
        ),
        linear-gradient(
            105deg,
            rgba(8, 21, 38, 0.96) 0%,
            rgba(8, 21, 38, 0.86) 42%,
            rgba(12, 35, 64, 0.55) 68%,
            rgba(14, 154, 167, 0.18) 100%
        );
}

/* Guarantee hero copy legibility regardless of the photo behind it */
section[aria-label="FastPay hero"] h1,
section[aria-label="FastPay hero"] p {
    text-shadow: 0 2px 24px rgba(8, 21, 38, 0.6);
}

.hero-slide.active {
    opacity: 1;
}

/* Bar indicators */
.hero-bar {
    height: 3px;
    width: 28px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.3s, width 0.35s;
    border: none;
    padding: 0;
}

.hero-bar.active {
    background: var(--color-accent);
    width: 52px;
}

/* Nav buttons */
.slider-arrow {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: inherit;
}

.slider-arrow:hover {
    background: rgba(14, 154, 167, 0.18);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ==========================================================================
   7. Features Section (Split: white content left, image right)
   ========================================================================== */

.features-split {
    background: var(--color-primary);
}

.features-left-panel {
    background: linear-gradient(to right, #ffffff 60%, rgba(255, 255, 255, 0));
}

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(18, 18, 18, 0.07);
    transition: border-color 0.2s;
}

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

.feature-row:hover {
    border-bottom-color: var(--color-accent);
}

.feature-row-icon {
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
    transition: background 0.2s;
}

.feature-row:hover .feature-row-icon {
    background: var(--color-primary);
    color: var(--color-accent);
}

.feature-row-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.feature-row-desc {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .features-left-panel {
        background: rgba(255, 255, 255, 0.96);
    }
}

@media (max-width: 767px) {
    .features-split {
        min-height: auto !important;
    }

    .feature-row-icon {
        width: 32px;
        height: 32px;
    }

    .feature-row-name {
        font-size: 13px;
    }

    .feature-row-desc {
        font-size: 12px;
    }
}

/* ==========================================================================
   7b. Store Cards (dark cards with background numbers)
   ========================================================================== */

.store-card {
    background: #1B1B1B;
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.28s;
}

.store-card:hover {
    background: #222;
}

.store-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-accent);
    transition: width 0.4s ease;
}

.store-card:hover::after {
    width: 100%;
}

.store-card-num {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.store-card-icon {
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 26px;
    transition: background 0.22s;
}

.store-card:hover .store-card-icon {
    background: var(--color-white);
}

.store-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-white);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.store-card-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.65;
}

/* ==========================================================================
   8. Competitor Comparison
   ========================================================================== */

.comparison-container {
    overflow: hidden;
}

.comparison-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    height: 360px;
}

.comparison-side {
    position: relative;
    overflow: hidden;
}

.comparison-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comparison-ours img {
    filter: brightness(1.05) saturate(1.1);
}

.comparison-theirs img {
    filter: brightness(0.6) saturate(0.4) sepia(0.2);
}

.comparison-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--color-accent);
    z-index: 5;
}

.comparison-divider::before {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-label {
    position: absolute;
    bottom: 16px;
    padding: 8px 16px;
    z-index: 4;
}

.comparison-label-ours {
    left: 16px;
    background: var(--color-accent);
}

.comparison-label-theirs {
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
    .comparison-image {
        height: 240px;
    }
}

/* ==========================================================================
   9. Components
   ========================================================================== */

.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

.parallax-content {
    position: relative;
    z-index: 10;
}

.img-reveal {
    position: relative;
    overflow: hidden;
}

.img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: translateY(0);
    transition: transform var(--transition-slow);
}

.img-reveal.active::after {
    transform: translateY(101%);
}

.img-zoom {
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom:hover {
    transform: scale(1.05);
}

.feature-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover {
    transform: translateY(-8px);
}

.feature-card:hover .feature-icon {
    background: var(--color-accent);
    color: var(--color-primary);
}

.step-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 4rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.1;
    transition: opacity var(--transition-fast);
}

.step-card:hover .step-number {
    opacity: 1;
}

.form-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(18, 18, 18, 0.15);
    padding: 16px 20px;
    font-size: 15px;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 255, 0, 0.15);
}

.form-input::placeholder {
    color: #b3b3b3;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- FastPay text labels (sitewide — prefer these over ad-hoc uppercase micro-labels) --- */
.fp-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.fp-kicker {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.fp-subhead {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.fp-subhead--teal { color: var(--color-accent); }
.fp-subhead--muted { color: var(--color-muted); }
.fp-subhead--alert { color: #C0392B; }

/* Who It's For — persona editorial layout */
.wif-persona {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .wif-persona {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: stretch;
    }
}

.wif-persona__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.wif-persona__media {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(12, 35, 64, 0.1);
    box-shadow: 0 24px 60px -24px rgba(12, 35, 64, 0.18);
}

.wif-persona__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background: #EBF2F8;
}

@media (min-width: 1024px) {
    .wif-persona__media {
        border-radius: 1rem;
        min-height: 0;
        height: 100%;
        display: flex;
    }

    .wif-persona__media img {
        aspect-ratio: unset;
        flex: 1;
        width: 100%;
        min-height: 20rem;
        object-fit: cover;
        object-position: center top;
    }
}

.wif-icon-tile {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-accent);
}

.wif-panel {
    padding: 1.25rem 1.375rem;
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
}

.wif-panel:last-child { margin-bottom: 0; }

.wif-panel--pain {
    background: #FAEDEB;
    border: 1px solid rgba(192, 57, 43, 0.12);
    border-left: 3px solid #C0392B;
}

.wif-panel--fit {
    background: #F0F7FF;
    border: 1px solid rgba(12, 35, 64, 0.08);
    border-left: 3px solid var(--color-accent);
}

.wif-panel--conclusion {
    background: #fff;
    border: 1px solid rgba(12, 35, 64, 0.08);
    border-left: 4px solid var(--color-accent);
    box-shadow: 0 16px 48px -20px rgba(12, 35, 64, 0.1);
    padding: 1.375rem 1.5rem;
}

.wif-panel--conclusion .fp-subhead {
    margin-bottom: 0.5rem;
}

.wif-panel--conclusion__body {
    font-size: 1rem;
    line-height: 1.65;
    color: #2C2C2C;
}

.wif-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.wif-list li + li { margin-top: 0.75rem; }

.wif-list__ico {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.wif-fit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.wif-fit-card {
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(12, 35, 64, 0.1);
}

.wif-fit-card--yes {
    background: #fff;
    box-shadow: 0 20px 50px rgba(12, 35, 64, 0.05);
}

.wif-fit-card--no {
    background: #F5F2EE;
}

.wif-fit-card .wif-list li { color: #2C2C2C; }
.wif-fit-card--no .wif-list li { color: var(--color-muted); }

/* FAQ Accordion */
.faq-item {
    border-bottom: 1px solid rgba(12, 35, 64, 0.08);
    transition: border-color var(--transition-fast);
}

.faq-item:hover {
    border-bottom-color: rgba(14, 154, 167, 0.3);
}

.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 0;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.faq-trigger:hover {
    color: var(--color-accent);
}

.faq-trigger .faq-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-normal);
}

.faq-item.open .faq-trigger .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-content {
    max-height: 300px;
    padding-bottom: 1.5rem;
}

/* Review Cards */
.review-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-card:hover {
    transform: translateY(-4px);
}

.star-filled {
    color: var(--color-accent);
    fill: var(--color-accent);
}

/* ==========================================================================
   10b. FastPay Additions (Pricing + Steps + Testimonials)
   ========================================================================== */

.pricing-card {
    background: #ffffff;
    border: 1px solid rgba(12, 35, 64, 0.07);
    border-radius: 1.5rem;
    padding: 2.75rem 2.25rem;
    box-shadow: 0 1px 3px rgba(12, 35, 64, 0.04), 0 16px 40px -16px rgba(12, 35, 64, 0.12);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition-fast), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition-fast);
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgba(12, 35, 64, 0.14);
    box-shadow: 0 1px 3px rgba(12, 35, 64, 0.05), 0 30px 60px -20px rgba(12, 35, 64, 0.18);
}

/* Pricing + other card titles: keep heading line-length tight */
.pricing-card .flex.items-center.justify-between > div {
    min-width: 0; /* prevents long titles from widening the header area */
}

.pricing-card h3,
.review-card h3,
.step-card h3,
#why-fastpay article h3,
#features h3,
#take-control h3,
.store-card-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .pricing-card h3 { max-width: none; white-space: nowrap; }
    .review-card h3 { max-width: 240px; }
    #why-fastpay article h3 { max-width: 240px; }
    #features h3 { max-width: 240px; }
    #take-control h3 { max-width: 260px; }
    .store-card-name { max-width: 220px; }
}

.pricing-popular {
    position: relative;
    overflow: hidden;
    border-color: rgba(14, 154, 167, 0.5);
    border-width: 1px;
    background: linear-gradient(
        180deg,
        rgba(14, 154, 167, 0.06) 0%,
        rgba(255, 255, 255, 1) 28%
    );
    box-shadow: 0 2px 6px rgba(12, 35, 64, 0.05), 0 34px 64px -22px rgba(14, 154, 167, 0.32);
}

.pricing-popular::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-blue) 100%);
}

.pricing-popular:hover {
    border-color: rgba(14, 154, 167, 0.7);
    box-shadow: 0 2px 6px rgba(12, 35, 64, 0.06), 0 44px 80px -24px rgba(14, 154, 167, 0.4);
}

@media (min-width: 1024px) {
    .pricing-popular {
        transform: translateY(-10px);
    }
    .pricing-popular:hover {
        transform: translateY(-16px);
    }
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.pricing-popular .pricing-badge {
    background: rgba(14, 154, 167, 0.95);
}

.pricing-price {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 3.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.85rem 0;
    color: var(--color-muted);
    font-size: 0.98rem;
}

/* Benefit-led inclusion list (Investment page) */
.pricing-value {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(12, 35, 64, 0.08);
    padding-top: 0.5rem;
}

.pricing-value li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(12, 35, 64, 0.06);
}

.pricing-value li:last-child {
    border-bottom: 0;
}

.pricing-value .pv-ico {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    background: rgba(14, 154, 167, 0.09);
    border: 1px solid rgba(14, 154, 167, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.pricing-value .pv-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-primary);
    line-height: 1.3;
}

.pricing-value .pv-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Bonus block at the foot of each plan */
.pv-bonus {
    position: relative;
    margin-top: 1.5rem;
    padding: 1.2rem 1.25rem 1.2rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(14, 154, 167, 0.09), rgba(14, 154, 167, 0.04));
    border: 1px solid rgba(14, 154, 167, 0.2);
    overflow: hidden;
}

.pv-bonus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
}

.pv-bonus-tag {
    display: inline-block;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
    margin-bottom: 0.8rem;
}

.pv-bonus-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.pv-bonus--wide {
    margin-top: 2rem;
    padding: 1.4rem 1.5rem 1.4rem 1.75rem;
    text-align: center;
}

.pv-bonus--wide .pv-bonus-row {
    justify-content: center;
    max-width: 46rem;
    margin: 0 auto;
    text-align: left;
}

.pv-bonus .pv-ico {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    background: rgba(14, 154, 167, 0.14);
    border: 1px solid rgba(14, 154, 167, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-bonus .pv-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-primary);
    line-height: 1.3;
}

.pv-bonus .pv-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Compare-the-two table (Investment page) */
.compare-wrap {
    overflow-x: auto;
    border: 1px solid rgba(12, 35, 64, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 16px 40px -18px rgba(12, 35, 64, 0.14);
    background: #ffffff;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.35rem;
    text-align: center;
}

.compare-table thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    vertical-align: middle;
    border-bottom: 1px solid rgba(12, 35, 64, 0.1);
}

.compare-table th:first-child,
.compare-table td:first-child {
    text-align: left;
}

.compare-table thead th span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

.compare-table thead th.is-feature {
    background: var(--color-accent);
    color: #ffffff;
}

.compare-table thead th.is-feature span {
    color: rgba(255, 255, 255, 0.85);
}

.compare-table tbody td {
    font-size: 0.9rem;
    color: var(--color-muted);
    border-bottom: 1px solid rgba(12, 35, 64, 0.05);
}

.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-table tbody td:first-child {
    color: var(--color-primary);
    font-weight: 500;
}

.compare-table td.is-feature {
    background: rgba(14, 154, 167, 0.06);
}

.compare-table tbody tr:hover td {
    background: rgba(12, 35, 64, 0.015);
}

.compare-table tbody tr:hover td.is-feature {
    background: rgba(14, 154, 167, 0.1);
}

.cmp-yes {
    display: inline-flex;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 9999px;
    background: var(--color-accent);
    color: #ffffff;
    align-items: center;
    justify-content: center;
}

.cmp-yes svg {
    width: 0.85rem;
    height: 0.85rem;
}

.cmp-no {
    color: rgba(12, 35, 64, 0.22);
}

.cmp-od {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    font-weight: 700;
}

.pricing-cta {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
    display: inline-block;
    padding: 1rem 1.25rem;
    border-radius: 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 900;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pricing-cta.primary {
    background: var(--color-accent);
    color: #ffffff;
}

.pricing-cta.primary:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 12px 30px rgba(14, 154, 167, 0.35);
}

.pricing-cta.outline {
    background: transparent;
    border: 1px solid rgba(12, 35, 64, 0.18);
    color: var(--color-primary);
}

.pricing-cta.outline:hover {
    border-color: rgba(14, 154, 167, 0.6);
    background: rgba(14, 154, 167, 0.12);
}

.step-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(12, 35, 64, 0.08);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition-fast), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition-fast);
    box-shadow: 0 4px 20px rgba(12, 35, 64, 0.04);
}

.step-card:hover {
    transform: translateY(-6px);
    border-color: rgba(14, 154, 167, 0.35);
    box-shadow: 0 20px 50px rgba(12, 35, 64, 0.1);
}

.step-connector-line {
    height: 3px;
    align-self: center;
    width: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(14, 154, 167, 0.0) 0%, rgba(14, 154, 167, 0.8) 50%, rgba(14, 154, 167, 0.8) 100%);
    opacity: 0.55;
}

/* How It Works: keep step titles from stretching too wide */
@media (min-width: 768px) {
    .step-card h3 {
        max-width: 220px;
        word-break: break-word;
    }
}

/* ==========================================================================
   10. Utilities
   ========================================================================== */

.gradient-text {
    background: linear-gradient(135deg, #0E9AA7 0%, #0C8690 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.accent-border-left {
    border-left: 4px solid var(--color-accent);
    padding-left: 1.5rem;
}

.accent-underline {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 4px;
    text-decoration-thickness: 3px;
}

.accent-underline-light {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 4px;
    text-decoration-thickness: 3px;
    color: inherit;
}

/* ==========================================================================
   11. Responsive & Print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .hero-animate,
    .hero-fade,
    .hero-title span,
    .stagger-children > * {
        opacity: 1;
        transform: none;
    }

    .hero-slide {
        transition: opacity 0.01ms !important;
    }
}

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    img {
        page-break-inside: avoid;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
    
    nav,
    #mobile-menu,
    .btn-primary,
    .btn-outline,
    .slider-arrow,
    .slider-dot {
        display: none !important;
    }
}

/* ============================================================
   Mobile footer — kill the cavernous single-column stack.
   Desktop spacing (pt-24, gap-12, mb-20) applied to a stacked
   column read as dead "AI slop" white space on phones. Tighten
   spacing and put the two link groups side by side.
   !important to override inline Tailwind utilities reliably.
   ============================================================ */
@media (max-width: 767px) {
    footer[role="contentinfo"] {
        padding-top: 3.25rem !important;
        padding-bottom: 7.75rem !important; /* clear the fixed Start Assessment bar */
    }

    footer[role="contentinfo"] .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.75rem 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    /* brand block (logo + blurb + socials) spans both columns */
    footer[role="contentinfo"] .grid > div:first-child {
        grid-column: 1 / -1 !important;
    }

    footer[role="contentinfo"] .grid > div:first-child p {
        margin-bottom: 1.25rem !important;
    }

    /* column headings sit closer to their lists */
    footer[role="contentinfo"] h5 {
        margin-bottom: 0.9rem !important;
    }

    footer[role="contentinfo"] .grid ul {
        margin: 0 !important;
    }

    /* bottom legal bar */
    footer[role="contentinfo"] .border-t {
        padding-top: 1.25rem !important;
        gap: 0.5rem !important;
    }
}