/* ==========================================================================
   Single Credit Card Page — page-specific styles
   Mobile-first. Tokens only. Premium billion-dollar design.
   ========================================================================== */

/* SCROLL FIX — Nuclear override to guarantee page scrolls */
html:has(.fp-cc-page),
body:has(.fp-cc-page) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
    position: static !important;
}
/* Fallback for browsers without :has() support */
body.single-fp_credit_card,
body.single-fp_coupon,
body.fp-page-credit-card {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: static !important;
}

.fp-cc-page {
    background: var(--fp-cc-bg);
    color: var(--fp-text-main);
    font-family: var(--fp-font);
    height: auto !important;
    overflow: visible !important;
    position: relative;
}

.fp-cc-page *, .fp-cc-page *::before, .fp-cc-page *::after { box-sizing: border-box; }

.fp-cc-section {
    padding: var(--fp-space-5) var(--fp-space-4);
    max-width: 480px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .fp-cc-section { max-width: 720px; padding: var(--fp-space-6); }
}

@media (min-width: 1024px) {
    .fp-cc-section { max-width: 960px; }
}

.fp-cc-label {
    font-size: var(--fp-text-sm);
    letter-spacing: 0.08em;
    color: var(--fp-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 var(--fp-space-3) 0;
}

.fp-cc-heading {
    font-size: var(--fp-text-xl);
    color: var(--fp-text-main);
    font-weight: 700;
    margin: 0 0 var(--fp-space-4) 0;
    line-height: 1.25;
}

.fp-cc-card {
    background: var(--fp-surface);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-md);
    padding: var(--fp-space-5);
}

.fp-cc-icon { flex-shrink: 0; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
    .fp-cc-page *,
    .fp-cc-page *::before,
    .fp-cc-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Section 1 — Hero (Light/White with animated SVG background)
   ========================================================================== */
.fp-cc-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FE 60%, var(--fp-cc-bg) 100%);
    color: var(--fp-text-main);
    padding: var(--fp-space-5) var(--fp-space-4) var(--fp-space-8);
    position: relative;
    overflow: visible;
}

/* Animated SVG background */
.fp-cc-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.fp-cc-hero-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Breadcrumb */
.fp-cc-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--fp-space-1);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-bottom: var(--fp-space-5);
    position: relative;
    z-index: 1;
}
.fp-cc-breadcrumb a { color: var(--fp-text-muted); text-decoration: none; transition: color 0.2s ease; }
.fp-cc-breadcrumb a:hover { color: var(--fp-secondary); }
.fp-cc-breadcrumb span:last-child { color: var(--fp-text-main); font-weight: 500; }
.fp-cc-breadcrumb .fp-cc-icon { color: var(--fp-text-muted); opacity: 0.5; }

/* Hero layout — mobile-first presentation */
.fp-cc-hero-layout {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-6);
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .fp-cc-hero-layout {
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--fp-space-8);
        max-width: 1080px;
        margin: 0 auto;
        justify-content: space-between;
    }
}

/* Right column (Visuals on top for mobile) */
.fp-cc-hero-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    animation: fpCcFadeInUp 0.7s 0.1s ease-out both;
}

@media (min-width: 768px) {
    .fp-cc-hero-presentation {
        flex: 0 0 440px;
    }
}

.fp-cc-hero-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fp-space-4);
    width: 100%;
}

.fp-cc-hero-card {
    perspective: 1000px;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1.586 / 1;
    animation: fpCcFloat 4s ease-in-out infinite;
    cursor: pointer;
    filter: drop-shadow(0 20px 40px rgba(94, 87, 230, 0.25)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .fp-cc-hero-card {
        max-width: 540px;
    }
}

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

.fp-cc-hero-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-cc-hero-card.is-flipped .fp-cc-hero-card-inner {
    transform: perspective(1000px) rotateY(180deg);
}

.fp-cc-hero-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
}

.fp-cc-hero-card-face--front {
    background: transparent;
    /* Blend mode helps remove white backgrounds from uploaded jpgs */
    mix-blend-mode: multiply;
}

.fp-cc-hero-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Scale slightly to crop out some of the white padding */
    transform: scale(1.1);
}

/* Back face */
.fp-cc-hero-card-face--back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #111827 0%, #1e1b4b 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

.fp-cc-hero-card-back-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--fp-space-4);
    padding: var(--fp-space-5);
    height: 100%;
}

.fp-cc-hero-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--fp-space-4);
}

.fp-cc-hero-card-row--split { gap: var(--fp-space-6); }

.fp-cc-hero-card-label {
    display: block;
    font-size: var(--fp-text-2xs);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--fp-space-1);
    font-weight: 600;
}

.fp-cc-hero-card-number {
    font-family: var(--fp-font-mono);
    font-size: var(--fp-text-md);
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.fp-cc-hero-card-network { 
    color: rgba(255,255,255,0.8);
    font-size: var(--fp-text-lg); 
    font-weight: 800; 
    letter-spacing: 0.1em; 
}

/* Actions under card */
.fp-cc-hero-card-actions {
    display: flex;
    gap: var(--fp-space-3);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.fp-cc-hero-card-swipe, .fp-cc-add {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fp-text-main);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--fp-radius-pill);
    padding: 8px var(--fp-space-4);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-cc-hero-card-swipe:hover, .fp-cc-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(94, 87, 230, 0.15);
    border-color: rgba(94, 87, 230, 0.2);
}

.fp-cc-hero-card-swipe .fp-cc-icon { color: var(--fp-secondary); }
.fp-cc-add .fp-cc-add-icon { color: var(--fp-secondary); font-size: 16px; line-height: 1; }

/* Floating Orbs (Desktop Highlights) */
.fp-cc-hero-orbs {
    display: none;
}

@media (min-width: 768px) {
    .fp-cc-hero-orbs {
        display: block;
        position: absolute;
        inset: -40px;
        pointer-events: none;
        z-index: 5;
    }
    
    .fp-cc-hero-orb {
        position: absolute;
        animation: fpCcFloatOrb 6s ease-in-out infinite alternate;
    }
    
    .fp-cc-hero-orb--1 { top: 0; left: -20px; animation-delay: 0s; }
    .fp-cc-hero-orb--2 { bottom: 30%; right: -60px; animation-delay: -2s; }
    .fp-cc-hero-orb--3 { bottom: -20px; left: 10%; animation-delay: -4s; }
    .fp-cc-hero-orb--4 { top: 20%; right: -30px; animation-delay: -1s; }

    .fp-cc-hero-orb-inner {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 16px;
        border-radius: var(--fp-radius-pill);
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 24px rgba(94, 87, 230, 0.12);
        color: var(--fp-text-main);
        font-size: var(--fp-text-xs);
        font-weight: 600;
        white-space: nowrap;
    }
    .fp-cc-hero-orb-inner .fp-cc-icon { color: var(--fp-green); }
}

@keyframes fpCcFloatOrb {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-15px) translateX(10px); }
}

/* Left column: info */
.fp-cc-hero-info {
    flex: 1;
    min-width: 0;
    animation: fpCcFadeInUp 0.6s ease-out both;
}

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

/* Bank badge */
.fp-cc-hero-bank-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    font-size: var(--fp-text-xs);
    font-weight: 700;
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    border: 1px solid rgba(94, 87, 230, 0.15);
    margin-bottom: var(--fp-space-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fp-cc-hero-bank-badge .fp-cc-icon { color: var(--fp-secondary); }

/* Title */
.fp-cc-hero-title {
    font-size: var(--fp-text-2xl2);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--fp-space-3) 0;
    color: var(--fp-text-main);
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .fp-cc-hero-title { font-size: var(--fp-text-4xl); margin-bottom: var(--fp-space-4); }
}

/* Rating + Network row */
.fp-cc-hero-meta-row {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-5);
    flex-wrap: wrap;
}

.fp-cc-hero-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    padding: 6px var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-main);
}

.fp-cc-hero-rating-badge .fp-cc-icon { color: #F59E0B; fill: #F59E0B; }
.fp-cc-hero-rating-badge strong { font-weight: 800; color: var(--fp-text-main); margin: 0 2px; }
.fp-cc-hero-rating-count { color: var(--fp-text-muted); font-size: var(--fp-text-xs); }

.fp-cc-hero-network-badge {
    display: inline-block;
    background: var(--fp-surface);
    color: var(--fp-text-main);
    font-size: var(--fp-text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 6px var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    border: 1px solid var(--fp-border);
}

/* Mobile Highlights — horizontally scrolling pills */
.fp-cc-hero-mobile-highlights {
    margin: 0 -16px; /* bleed to edges */
    padding: 4px 16px 12px; /* Extra bottom padding for scrollbar */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Elegant scrollbar for mobile highlights */
.fp-cc-hero-mobile-highlights::-webkit-scrollbar { 
    height: 4px; 
}
.fp-cc-hero-mobile-highlights::-webkit-scrollbar-track { 
    background: rgba(0,0,0,0.02); 
    border-radius: 4px;
}
.fp-cc-hero-mobile-highlights::-webkit-scrollbar-thumb { 
    background: rgba(94, 87, 230, 0.15); 
    border-radius: 4px;
}

@media (min-width: 768px) {
    .fp-cc-hero-mobile-highlights { display: none; }
}

.fp-cc-hero-highlights-list {
    display: flex;
    gap: var(--fp-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content; /* Guarantee scrollability */
}

.fp-cc-hero-highlights-list::after {
    content: '';
    display: block;
    width: 16px;
    flex-shrink: 0;
}

.fp-cc-hero-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fp-text-main);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: 8px var(--fp-space-4);
    border-radius: var(--fp-radius-pill);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 8px rgba(94, 87, 230, 0.05);
}

.fp-cc-hero-chip .fp-cc-icon { color: var(--fp-green); }

/* ==========================================================================
   Section 2 — Apply CTA
   ========================================================================== */
.fp-cc-apply {
    padding: var(--fp-space-5) var(--fp-space-4) 0;
    max-width: 480px;
    margin: 0 auto;
    transform: translateY(-32px);
}

@media (min-width: 768px) { .fp-cc-apply { max-width: 720px; } }
@media (min-width: 1024px) { .fp-cc-apply { max-width: 960px; } }

.fp-cc-apply-panel {
    background: var(--fp-gradient-green);
    color: #fff;
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-5);
    box-shadow: 0 12px 28px rgba(46, 204, 113, 0.3);
}

@media (min-width: 768px) {
    .fp-cc-apply-panel {
        padding: var(--fp-space-6);
    }
}

.fp-cc-apply-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    margin-bottom: var(--fp-space-3);
}

.fp-cc-apply-title {
    font-size: var(--fp-text-lg2);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--fp-space-4) 0;
    color: #fff;
}

.fp-cc-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    width: 100%;
    min-height: 56px;
    background: #fff;
    color: #1b6e43;
    font-size: var(--fp-text-lg);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--fp-radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: var(--fp-transition);
    margin-bottom: var(--fp-space-4);
}

.fp-cc-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.fp-cc-apply-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.08);
}

.fp-cc-apply-meta {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-4);
    padding: var(--fp-space-3) 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--fp-radius-md);
}

.fp-cc-apply-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.fp-cc-apply-meta-value {
    font-size: var(--fp-text-xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.fp-cc-apply-meta-label {
    font-size: var(--fp-text-xs2);
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.fp-cc-apply-meta-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.fp-cc-apply-trust {
    list-style: none;
    margin: 0 0 var(--fp-space-4) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-3);
    justify-content: center;
}

.fp-cc-apply-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    font-size: var(--fp-text-sm);
    color: rgba(255, 255, 255, 0.95);
}

.fp-cc-apply-tc {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--fp-radius-md);
    padding: var(--fp-space-3);
}

.fp-cc-apply-tc summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--fp-text-base);
    font-weight: 600;
    color: #fff;
    padding: var(--fp-space-1) 0;
}

.fp-cc-apply-tc summary::-webkit-details-marker { display: none; }
.fp-cc-apply-tc summary::after {
    content: "+";
    float: right;
    font-size: var(--fp-text-lg);
    line-height: 1;
}

.fp-cc-apply-tc[open] summary::after { content: "\2212"; }

.fp-cc-apply-tc ol {
    margin: var(--fp-space-3) 0 var(--fp-space-2) var(--fp-space-5);
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--fp-text-base);
    line-height: 1.6;
}

.fp-cc-apply-tc-fine {
    margin: var(--fp-space-2) 0 0;
    font-size: var(--fp-text-xs2);
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Section 3 — Pill Nav (Premium Tab Design)
   ========================================================================== */
.fp-cc-pillnav {
    position: sticky;
    top: 56px;
    z-index: 10;
    background: var(--fp-surface);
    padding: var(--fp-space-2) 0;
    margin-bottom: var(--fp-space-4);
    border-bottom: 1px solid var(--fp-border);
    overflow: hidden;
}

.fp-cc-pillnav-inner {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--fp-space-1) var(--fp-space-4);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.fp-cc-pillnav-inner::-webkit-scrollbar { display: none; }

/* Fade edge indicators for mobile scroll affordance */
.fp-cc-pillnav-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.fp-cc-pillnav-fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--fp-surface) 0%, transparent 100%);
    opacity: 0;
}

.fp-cc-pillnav-fade--right {
    right: 0;
    background: linear-gradient(270deg, var(--fp-surface) 0%, transparent 100%);
    opacity: 1;
}

.fp-cc-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: var(--fp-space-1) var(--fp-space-4);
    background: transparent;
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--fp-radius-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
}

.fp-cc-pill::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 2.5px;
    background: var(--fp-secondary);
    border-radius: var(--fp-radius-pill);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-cc-pill:hover {
    color: var(--fp-text-main);
    background: rgba(94, 87, 230, 0.04);
}

.fp-cc-pill.is-active {
    color: var(--fp-secondary);
    font-weight: 600;
    background: var(--fp-cc-indigo-tint);
}

.fp-cc-pill.is-active::after {
    width: 70%;
}

.fp-cc-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.7;
}

.fp-cc-pill.is-active .fp-cc-pill-icon { opacity: 1; }

.fp-cc-pill-label { line-height: 1; }

@media (min-width: 768px) {
    .fp-cc-pillnav-inner {
        justify-content: center;
        gap: var(--fp-space-1);
    }
    .fp-cc-pillnav-fade { display: none; }
}

/* ==========================================================================
   Section 4 — Quick Actions
   ========================================================================== */
.fp-cc-quick { padding-top: 0; padding-bottom: var(--fp-space-2); }

.fp-cc-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fp-space-3);
}

.fp-cc-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fp-space-2);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-3) var(--fp-space-2);
    text-decoration: none;
    color: var(--fp-text-main);
    transition: all 0.25s ease;
    min-height: 80px;
}

.fp-cc-quick-item:hover {
    border-color: rgba(94,87,230,0.2);
    box-shadow: 0 4px 12px rgba(94,87,230,0.08);
    transform: translateY(-2px);
}

.fp-cc-quick-item:active {
    transform: scale(0.97);
    background: var(--fp-cc-indigo-tint);
}

.fp-cc-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    border-radius: var(--fp-radius-md);
}

.fp-cc-quick-label {
    font-size: var(--fp-text-sm);
    font-weight: 500;
    color: var(--fp-text-main);
    text-align: center;
    line-height: 1.2;
}

/* ==========================================================================
   Section 5 — Snapshot
   ========================================================================== */
.fp-cc-snapshot-card { padding: var(--fp-space-2) var(--fp-space-3); }

.fp-cc-snapshot-table { width: 100%; border-collapse: collapse; }

.fp-cc-snapshot-table tr + tr th,
.fp-cc-snapshot-table tr + tr td {
    border-top: 1px solid var(--fp-border);
}

.fp-cc-snapshot-table th,
.fp-cc-snapshot-table td {
    padding: var(--fp-space-3) var(--fp-space-2);
    text-align: left;
    font-size: var(--fp-text-base);
    vertical-align: middle;
}

.fp-cc-snapshot-table th {
    color: var(--fp-text-muted);
    font-weight: 500;
    white-space: nowrap;
    width: 44%;
}

.fp-cc-snapshot-table td {
    color: var(--fp-text-main);
    font-weight: 600;
    text-align: right;
}

.fp-cc-snapshot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    border-radius: var(--fp-radius-sm);
    margin-right: var(--fp-space-2);
    vertical-align: middle;
}

/* ==========================================================================
   Section 6 — Reward Calculator
   ========================================================================== */
.fp-cc-calc-result {
    background: linear-gradient(135deg, #5E57E6 0%, #4B43D6 100%);
    color: #fff;
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-5);
    margin-bottom: var(--fp-space-4);
    text-align: center;
    box-shadow: 0 8px 24px rgba(94,87,230,0.2);
}

.fp-cc-calc-result-main { margin-bottom: var(--fp-space-3); }

.fp-cc-calc-result-label {
    display: block;
    font-size: var(--fp-text-sm);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
    margin-bottom: var(--fp-space-1);
}

.fp-cc-calc-result-value {
    display: block;
    font-size: var(--fp-text-3xl);
    font-weight: 800;
    line-height: 1.1;
    transition: opacity 200ms ease;
}

.fp-cc-calc-result-meta {
    display: flex;
    justify-content: space-around;
    gap: var(--fp-space-3);
    padding-top: var(--fp-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.fp-cc-calc-result-meta > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fp-cc-calc-meta-label {
    font-size: var(--fp-text-xs2);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.04em;
}

.fp-cc-calc-meta-value {
    font-size: var(--fp-text-md2);
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
}

.fp-cc-calc-meta-value--profit { color: #c8f7c5; }

.fp-cc-calc-waiver-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    margin-top: var(--fp-space-3);
}

.fp-cc-calc-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-4);
}

.fp-cc-calc-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-2);
}

.fp-cc-calc-slider-label {
    font-size: var(--fp-text-base);
    font-weight: 600;
    color: var(--fp-text-main);
}

.fp-cc-calc-slider-mult {
    font-size: var(--fp-text-xs2);
    font-weight: 700;
    color: var(--fp-secondary);
    background: var(--fp-cc-indigo-tint);
    padding: 2px var(--fp-space-2);
    border-radius: var(--fp-radius-sm);
}

.fp-cc-calc-slider-row {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-cc-calc-slider input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-border);
    outline: none;
}

.fp-cc-calc-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fp-secondary);
    border: 3px solid #fff;
    box-shadow: var(--fp-shadow-sm);
    cursor: pointer;
}

.fp-cc-calc-slider input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fp-secondary);
    border: 3px solid #fff;
    box-shadow: var(--fp-shadow-sm);
    cursor: pointer;
}

.fp-cc-calc-slider-amount {
    min-width: 80px;
    text-align: right;
    font-size: var(--fp-text-base);
    font-weight: 600;
    color: var(--fp-text-main);
}

.fp-cc-calc-note {
    margin: var(--fp-space-4) 0 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    text-align: center;
}

/* ==========================================================================
   Section 7 — Accordion (Benefits + FAQ)
   ========================================================================== */
.fp-cc-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
}

.fp-cc-accordion-item {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    transition: all 0.25s ease;
}

.fp-cc-accordion-item:hover {
    border-color: rgba(94,87,230,0.15);
}

.fp-cc-accordion-item[open] {
    box-shadow: var(--fp-shadow-md);
    border-color: rgba(94,87,230,0.2);
}

.fp-cc-accordion-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    min-height: 56px;
}

.fp-cc-accordion-summary::-webkit-details-marker { display: none; }

.fp-cc-accordion-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    border-radius: var(--fp-radius-sm);
}

.fp-cc-accordion-title {
    flex: 1;
    font-size: var(--fp-text-md);
    font-weight: 600;
    color: var(--fp-text-main);
}

.fp-cc-accordion-chevron {
    flex-shrink: 0;
    color: var(--fp-text-muted);
    transform: rotate(90deg);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-cc-accordion-item[open] .fp-cc-accordion-chevron {
    transform: rotate(270deg);
    color: var(--fp-secondary);
}

.fp-cc-accordion-body {
    padding: 0 var(--fp-space-4) var(--fp-space-4);
    color: var(--fp-text-main);
    font-size: var(--fp-text-base);
    line-height: 1.6;
}

.fp-cc-accordion-body p { margin: 0 0 var(--fp-space-3); }
.fp-cc-accordion-body ul {
    margin: 0;
    padding-left: var(--fp-space-5);
    color: var(--fp-text-muted);
}
.fp-cc-accordion-body li { margin-bottom: var(--fp-space-1); }

/* ==========================================================================
   Section 8 — Fees
   ========================================================================== */
.fp-cc-fees-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-3);
}

.fp-cc-fees-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    background: rgba(46, 204, 113, 0.12);
    color: #1b6e43;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    margin-top: var(--fp-space-5);
    flex-shrink: 0;
}

.fp-cc-fees-card { padding: var(--fp-space-2) var(--fp-space-3); }

.fp-cc-fees-table { width: 100%; border-collapse: collapse; }

.fp-cc-fees-table tr + tr th,
.fp-cc-fees-table tr + tr td { border-top: 1px solid var(--fp-border); }

.fp-cc-fees-table th,
.fp-cc-fees-table td {
    padding: var(--fp-space-3) var(--fp-space-2);
    font-size: var(--fp-text-base);
    text-align: left;
}

.fp-cc-fees-table th {
    color: var(--fp-text-muted);
    font-weight: 500;
    width: 55%;
}

.fp-cc-fees-table td {
    color: var(--fp-text-main);
    font-weight: 600;
    text-align: right;
}

/* ==========================================================================
   Section 9 — Eligibility
   ========================================================================== */
.fp-cc-card--premium {
    background: #FFFFFF;
    border-radius: var(--fp-radius-xl);
    box-shadow: 0 12px 32px rgba(94, 87, 230, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    padding: var(--fp-space-6);
    border: 1px solid rgba(94, 87, 230, 0.05);
}

.fp-cc-elig-form {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-5);
}

.fp-cc-elig-field { position: relative; }

.fp-cc-elig-input-wrap { position: relative; }

/* Floating Label Magic */
.fp-cc-floating-label {
    position: absolute;
    left: var(--fp-space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fp-text-base);
    color: var(--fp-text-muted);
    font-weight: 500;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 4px;
}

.fp-cc-input {
    width: 100%;
    min-height: 56px;
    background: #F8F9FA;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: 24px var(--fp-space-4) 8px;
    font-size: var(--fp-text-md);
    color: var(--fp-text-main);
    font-family: var(--fp-font);
    font-weight: 600;
    transition: all 0.25s ease;
}

/* Float label up when focused or has value (not placeholder shown) */
.fp-cc-input:focus ~ .fp-cc-floating-label,
.fp-cc-input:not(:placeholder-shown) ~ .fp-cc-floating-label {
    top: 14px;
    font-size: var(--fp-text-xs);
    font-weight: 600;
    color: var(--fp-secondary);
}

.fp-cc-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--fp-secondary);
    box-shadow: 0 0 0 4px rgba(94, 87, 230, 0.1);
}

.fp-cc-elig-prefix {
    position: absolute;
    left: var(--fp-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--fp-text-main);
    font-weight: 700;
    font-size: var(--fp-text-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show prefix Rs. when input has value or focus */
.fp-cc-input:focus ~ .fp-cc-elig-prefix,
.fp-cc-input:not(:placeholder-shown) ~ .fp-cc-elig-prefix {
    opacity: 1;
}

/* Shift text when prefix is active */
.fp-cc-elig-prefix ~ .fp-cc-input:focus,
.fp-cc-elig-prefix ~ .fp-cc-input:not(:placeholder-shown) {
    padding-left: 38px;
}

.fp-cc-elig-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--fp-space-2);
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
}
.fp-cc-elig-hint .fp-cc-icon { color: var(--fp-secondary); opacity: 0.8; }

.fp-cc-elig-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    width: 100%;
    min-height: 56px;
    background: var(--fp-secondary);
    background: linear-gradient(135deg, var(--fp-secondary) 0%, #4B43D6 100%);
    color: #fff;
    border: none;
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-md);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(94, 87, 230, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: var(--fp-space-2);
}

.fp-cc-elig-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 12px 24px rgba(94, 87, 230, 0.3);
}

.fp-cc-elig-btn:active { transform: scale(0.98); }

.fp-cc-elig-result {
    margin-top: var(--fp-space-4);
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-md);
    text-align: center;
}

.fp-cc-elig-result.is-green  { background: rgba(46,204,113,0.1); color: #1b6e43; }
.fp-cc-elig-result.is-yellow { background: rgba(250,204,21,0.12); color: #7c5e00; }
.fp-cc-elig-result.is-red    { background: rgba(239,68,68,0.1);  color: #8a2222; }

.fp-cc-elig-result-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.18;
    margin: 0 auto var(--fp-space-2);
}

.fp-cc-elig-result-title {
    font-size: var(--fp-text-lg);
    font-weight: 700;
    margin: 0 0 var(--fp-space-2);
    color: inherit;
}

.fp-cc-elig-result-msg {
    margin: 0 0 var(--fp-space-3);
    font-size: var(--fp-text-base);
    color: inherit;
}

.fp-cc-elig-breakdown {
    list-style: none;
    margin: 0;
    padding: var(--fp-space-3) 0 0;
    text-align: left;
    border-top: 1px solid rgba(0,0,0,0.1);
    font-size: var(--fp-text-sm);
}

.fp-cc-elig-breakdown li {
    display: flex;
    justify-content: space-between;
    padding: var(--fp-space-1) 0;
}

.fp-cc-elig-docs {
    margin-top: var(--fp-space-5);
    padding-top: var(--fp-space-4);
    border-top: 1px dashed var(--fp-border);
}

.fp-cc-elig-docs-label {
    font-size: var(--fp-text-sm);
    font-weight: 700;
    color: var(--fp-text-main);
    margin: 0 0 var(--fp-space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-cc-elig-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fp-space-3);
}

@media (min-width: 768px) {
    .fp-cc-elig-docs-list { grid-template-columns: 1fr 1fr; }
}

.fp-cc-elig-docs-list li {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    font-weight: 500;
    background: #F8F9FA;
    padding: 8px 12px;
    border-radius: var(--fp-radius-md);
    border: 1px solid var(--fp-border);
}

.fp-cc-docs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(46, 204, 113, 0.15);
    color: #1b6e43;
    border-radius: 50%;
}
.fp-cc-docs-icon .fp-cc-icon { color: inherit; width: 10px; height: 10px; }

/* ==========================================================================
   Section 10 — How to Apply
   ========================================================================== */
.fp-cc-howto-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.fp-cc-howto-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--fp-cc-indigo-tint);
}

.fp-cc-howto-step {
    display: flex;
    gap: var(--fp-space-4);
    align-items: flex-start;
    padding-bottom: var(--fp-space-4);
    position: relative;
}

.fp-cc-howto-step:last-child { padding-bottom: 0; }

.fp-cc-howto-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--fp-secondary);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-md);
    font-weight: 700;
    box-shadow: 0 0 0 4px var(--fp-cc-bg);
    z-index: 1;
}

.fp-cc-howto-content { padding-top: 6px; }

.fp-cc-howto-title {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
    margin: 0 0 var(--fp-space-1);
}

.fp-cc-howto-body {
    font-size: var(--fp-text-base);
    color: var(--fp-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Section 11 — Comparison
   ========================================================================== */
.fp-cc-compare-scroll {
    background: var(--fp-surface);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.fp-cc-compare-scroll::-webkit-scrollbar { display: none; }

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

.fp-cc-compare-table th,
.fp-cc-compare-table td {
    padding: var(--fp-space-3);
    text-align: center;
    font-size: var(--fp-text-base);
    border-bottom: 1px solid var(--fp-border);
    scroll-snap-align: start;
}

.fp-cc-compare-table thead th {
    background: var(--fp-cc-bg);
    padding: var(--fp-space-3);
    font-weight: 700;
    color: var(--fp-text-main);
    border-bottom: 2px solid var(--fp-border);
}

.fp-cc-compare-row-head {
    text-align: left !important;
    color: var(--fp-text-muted) !important;
    font-weight: 600 !important;
    font-size: var(--fp-text-sm) !important;
    white-space: nowrap;
    min-width: 120px;
}

.fp-cc-compare-table tbody th {
    text-align: left;
    color: var(--fp-text-muted);
    font-weight: 500;
    font-size: var(--fp-text-sm);
    background: var(--fp-cc-bg);
}

.fp-cc-compare-cardname {
    display: block;
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
}

.fp-cc-compare-pick {
    display: block;
    font-size: var(--fp-text-2xs);
    color: var(--fp-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.fp-cc-compare-table thead th.is-self {
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
}

.fp-cc-compare-table td.is-winner {
    background: rgba(46, 204, 113, 0.1);
    color: #1b6e43;
    font-weight: 700;
    position: relative;
}

.fp-cc-compare-hint {
    margin: var(--fp-space-3) 0 0;
    font-size: var(--fp-text-xs2);
    color: var(--fp-text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-1);
}

.fp-cc-compare-hint .fp-cc-icon { color: var(--fp-text-muted); }

@media (min-width: 768px) { .fp-cc-compare-hint { display: none; } }

/* ==========================================================================
   Section 12 — Best For
   ========================================================================== */
.fp-cc-bestfor-group + .fp-cc-bestfor-group { margin-top: var(--fp-space-4); }

.fp-cc-bestfor-subtitle {
    font-size: var(--fp-text-sm);
    font-weight: 700;
    color: var(--fp-text-main);
    margin: 0 0 var(--fp-space-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fp-cc-bestfor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-2);
}

.fp-cc-bestfor-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-base);
    font-weight: 500;
    border: 1px solid;
}

.fp-cc-bestfor-pill--positive {
    background: rgba(46, 204, 113, 0.1);
    color: #1b6e43;
    border-color: rgba(46, 204, 113, 0.3);
}

.fp-cc-bestfor-pill--negative {
    background: rgba(239, 68, 68, 0.08);
    color: #8a2222;
    border-color: rgba(239, 68, 68, 0.25);
}

/* ==========================================================================
   Section 13 — Reviews
   ========================================================================== */
.fp-cc-reviews-aspects {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-4);
}

.fp-cc-reviews-aspect {
    display: grid;
    grid-template-columns: 110px 1fr 32px;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-cc-reviews-aspect-label {
    font-size: var(--fp-text-base);
    color: var(--fp-text-muted);
}

.fp-cc-reviews-aspect-bar-wrap {
    background: var(--fp-border);
    border-radius: var(--fp-radius-pill);
    overflow: hidden;
    height: 8px;
}

.fp-cc-reviews-aspect-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--fp-secondary) 0%, #7C78F0 100%);
    border-radius: var(--fp-radius-pill);
    transition: width 0.8s ease-out;
}

.fp-cc-reviews-aspect-value {
    font-size: var(--fp-text-base);
    font-weight: 700;
    color: var(--fp-text-main);
    text-align: right;
}

.fp-cc-reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-4);
}

.fp-cc-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--fp-space-2);
}

.fp-cc-review-author {
    display: block;
    font-weight: 700;
    color: var(--fp-text-main);
}

.fp-cc-review-date {
    display: block;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: 2px;
}

.fp-cc-review-stars {
    display: inline-flex;
    gap: 2px;
}

.fp-cc-star { color: var(--fp-border); }
.fp-cc-star.is-full { color: #FACC15; }
.fp-cc-star.is-full .fp-cc-icon { fill: #FACC15; }

.fp-cc-review-body {
    margin: 0;
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
    line-height: 1.55;
}

.fp-cc-reviews-write {
    width: 100%;
    min-height: 44px;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    border: 1px solid rgba(94, 87, 230, 0.2);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--fp-transition);
}

.fp-cc-reviews-write:hover { background: rgba(94, 87, 230, 0.12); }
.fp-cc-reviews-write:active { transform: scale(0.98); }

/* ==========================================================================
   Section 14 — Pros & Cons
   ========================================================================== */
.fp-cc-procon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fp-space-3);
}

@media (min-width: 768px) {
    .fp-cc-procon-grid { grid-template-columns: 1fr 1fr; }
}

.fp-cc-procon-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
}

.fp-cc-procon-col li {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-2);
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
    line-height: 1.5;
}

.fp-cc-procon-subtitle {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
    margin: 0 0 var(--fp-space-3);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-cc-procon-col--pros .fp-cc-procon-subtitle::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fp-green);
}

.fp-cc-procon-col--cons .fp-cc-procon-subtitle::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fp-red);
}

.fp-cc-procon-col--pros li .fp-cc-icon { color: var(--fp-green); }
.fp-cc-procon-col--cons li .fp-cc-icon { color: var(--fp-red); }

/* ==========================================================================
   Section 15 — FAQ
   ========================================================================== */
.fp-cc-faq-item .fp-cc-accordion-summary {
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) var(--fp-space-4);
    min-height: 48px;
}

.fp-cc-faq-item .fp-cc-accordion-title {
    font-size: var(--fp-text-base);
    font-weight: 600;
}

.fp-cc-faq-item .fp-cc-accordion-body p {
    margin: 0;
    color: var(--fp-text-muted);
}

/* ==========================================================================
   Section 16 — Related Rails
   ========================================================================== */
.fp-cc-rails { padding-top: 0; }

.fp-cc-rail + .fp-cc-rail { margin-top: var(--fp-space-5); }

.fp-cc-rail-title {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
    margin: 0 0 var(--fp-space-3);
}

.fp-cc-rail-scroll {
    display: flex;
    gap: var(--fp-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--fp-space-2);
    margin: 0 calc(-1 * var(--fp-space-4));
    padding-left: var(--fp-space-4);
    padding-right: var(--fp-space-4);
}

.fp-cc-rail-scroll::-webkit-scrollbar { display: none; }

.fp-cc-rail-item {
    flex: 0 0 65%;
    max-width: 220px;
    scroll-snap-align: start;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-1);
    text-decoration: none;
    color: var(--fp-text-main);
    transition: all 0.25s ease;
}

.fp-cc-rail-item:hover {
    border-color: rgba(94,87,230,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.fp-cc-rail-item:active { transform: scale(0.98); }

.fp-cc-rail-thumb {
    width: 40px;
    height: 40px;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-secondary);
    border-radius: var(--fp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fp-space-2);
}

.fp-cc-rail-thumb--green {
    background: rgba(46,204,113,0.12);
    color: var(--fp-green);
}

.fp-cc-rail-name {
    font-weight: 700;
    color: var(--fp-text-main);
    font-size: var(--fp-text-base);
    line-height: 1.2;
}

.fp-cc-rail-meta {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}

.fp-cc-rail-meta--accent {
    color: var(--fp-secondary);
    font-weight: 600;
}

/* ==========================================================================
   Section 17 — Long-form
   ========================================================================== */
.fp-cc-longform-body {
    font-size: var(--fp-text-base);
    line-height: 1.65;
    color: var(--fp-text-main);
}

.fp-cc-longform-body p { margin: 0 0 var(--fp-space-3); }
.fp-cc-longform-body p:last-child { margin-bottom: 0; }

.fp-cc-longform-updated {
    margin: var(--fp-space-3) 0 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    text-align: right;
}

/* ==========================================================================
   Section 18 — Disclaimer
   ========================================================================== */
.fp-cc-disclaimer { padding-bottom: var(--fp-space-12); }

.fp-cc-disclaimer-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
}

.fp-cc-disclaimer-icon {
    flex-shrink: 0;
    color: var(--fp-text-muted);
}

.fp-cc-disclaimer-text {
    margin: 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    line-height: 1.5;
}

/* ==========================================================================
   Sticky Apply Bar
   ========================================================================== */
.fp-cc-sticky {
    position: fixed;
    bottom: var(--fp-space-12);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0 var(--fp-space-4);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
    pointer-events: none;
}

.fp-cc-sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.fp-cc-sticky-inner {
    max-width: 480px;
    margin: 0 auto;
    background: var(--fp-gradient-green);
    color: #fff;
    border-radius: var(--fp-radius-pill);
    padding: var(--fp-space-2) var(--fp-space-2) var(--fp-space-2) var(--fp-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fp-space-3);
    box-shadow: 0 8px 24px rgba(46, 204, 113, 0.35);
}

.fp-cc-sticky-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fp-cc-sticky-name {
    font-size: var(--fp-text-base);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-cc-sticky-cash {
    font-size: var(--fp-text-xs2);
    color: rgba(255, 255, 255, 0.92);
    margin-top: 2px;
}

.fp-cc-sticky-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    background: #fff;
    color: #1b6e43;
    border-radius: var(--fp-radius-pill);
    padding: var(--fp-space-2) var(--fp-space-4);
    font-size: var(--fp-text-base);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0,0,0,0.12);
    flex-shrink: 0;
    transition: var(--fp-transition);
}

.fp-cc-sticky-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* ==========================================================================
   Desktop layout enhancement for wider screens
   ========================================================================== */
@media (min-width: 1024px) {
    .fp-cc-hero {
        padding: var(--fp-space-8) var(--fp-space-6) var(--fp-space-10);
    }
    
    .fp-cc-hero-title {
        font-size: var(--fp-text-4xl);
        line-height: 1.1;
    }
    
    .fp-cc-hero-card-wrap {
        flex: 0 0 400px;
    }
    
    .fp-cc-hero-card {
        max-width: 380px;
    }
    
    .fp-cc-apply { max-width: 960px; }

    .fp-cc-sticky-inner { max-width: 720px; }
}

/* ==========================================================================
   Flashprice Score Badge
   ========================================================================== */
.fp-cc-score-badge {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: var(--fp-space-1) var(--fp-space-3);
    background: var(--fp-gradient-green);
    color: #fff;
    border-radius: var(--fp-radius-pill);
    font-family: var(--fp-font);
    cursor: help;
    text-decoration: none;
    transition: var(--fp-transition);
}
.fp-cc-score-badge:hover,
.fp-cc-score-badge:focus { transform: translateY(-1px); box-shadow: var(--fp-shadow-md); outline: none; }

.fp-cc-score-badge--xs { padding: 2px 8px; font-size: var(--fp-text-xs); }
.fp-cc-score-badge--md { padding: var(--fp-space-1) var(--fp-space-3); font-size: var(--fp-text-sm); }
.fp-cc-score-badge--lg { padding: var(--fp-space-2) var(--fp-space-4); font-size: var(--fp-text-md); }

.fp-cc-score-badge-num { font-weight: 800; font-size: 1.15em; }
.fp-cc-score-badge-suffix { font-weight: 600; opacity: 0.85; }
.fp-cc-score-badge-label {
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.4);
    font-weight: 600;
    font-size: 0.9em;
}
.fp-cc-score-badge:hover .fp-cc-score-badge-pop,
.fp-cc-score-badge:focus .fp-cc-score-badge-pop {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}/* ============================================================
   HERO "ADD TO COMPARE" ROW (Task 5)
   ============================================================ */

/* ============================================================
   PHASE 2-4 UI SHELLS (mock data — backend wires in later)
   ============================================================ */

/* Shared AI chip */
.fp-cc-ai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-3xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    background: linear-gradient(135deg, var(--fp-ai-indigo), var(--fp-ai-violet));
    padding: 3px 7px;
    border-radius: var(--fp-radius-xs);
    line-height: 1;
    vertical-align: middle;
}

/* ---- Urgency banner + countdown (Phase 4 v2.9) ---- */
.fp-cc-urgency-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-gradient-slate);
    box-shadow: var(--fp-shadow-lg);
    color: #fff;
}
.fp-cc-urgency-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 100% 0%, rgba(245, 158, 11, 0.28), transparent 60%);
    pointer-events: none;
}
.fp-cc-urgency-lead {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}
.fp-cc-urgency-pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--fp-radius-circle);
    background: rgba(245, 158, 11, 0.18);
    color: var(--fp-amber);
}
.fp-cc-urgency-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--fp-radius-circle);
    border: 2px solid var(--fp-amber);
    opacity: 0.6;
    animation: fp-cc-urgency-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fp-cc-urgency-ping {
    0% { transform: scale(1); opacity: 0.6; }
    80%, 100% { transform: scale(1.7); opacity: 0; }
}
.fp-cc-urgency-copy {
    margin: 0;
    font-size: var(--fp-text-sm2);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
}
.fp-cc-urgency-copy strong {
    display: block;
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: #fff;
}
.fp-cc-urgency-timer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--fp-space-1);
}
.fp-cc-urgency-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: var(--fp-space-2) 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--fp-radius-sm);
}
.fp-cc-urgency-unit b {
    font-size: var(--fp-text-lg2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.fp-cc-urgency-unit i {
    margin-top: 3px;
    font-style: normal;
    font-size: var(--fp-text-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
}
.fp-cc-urgency-colon {
    font-size: var(--fp-text-lg);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
}
.fp-cc-urgency-card.is-soon .fp-cc-urgency-unit b { color: var(--fp-amber); }
@media (min-width: 768px) {
    .fp-cc-urgency-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--fp-space-4) var(--fp-space-5);
    }
    .fp-cc-urgency-unit { min-width: 56px; }
}

/* ---- AI Review Synthesizer (Phase 2 v2.5) ---- */
.fp-cc-synth-grid {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-4);
}
.fp-cc-synth-block {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    border-top: 3px solid transparent;
}
.fp-cc-synth-block--love { border-top-color: var(--fp-green); }
.fp-cc-synth-block--gripe { border-top-color: var(--fp-amber); }
.fp-cc-synth-head {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}
.fp-cc-synth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--fp-radius-circle);
}
.fp-cc-synth-badge--love { background: var(--fp-green-soft); color: var(--fp-green-dark); }
.fp-cc-synth-badge--gripe { background: var(--fp-amber-light); color: var(--fp-amber-dark); }
.fp-cc-synth-subtitle {
    margin: 0;
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
}
.fp-cc-synth-body {
    margin: 0;
    font-size: var(--fp-text-base);
    line-height: 1.6;
    color: var(--fp-text-muted);
}
.fp-cc-synth-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-2);
    list-style: none;
    padding: 0;
    margin: auto 0 0;
}
.fp-cc-synth-tag {
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: 4px var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
}
.fp-cc-synth-tag--love { background: var(--fp-green-light); color: var(--fp-green-dark); }
.fp-cc-synth-tag--gripe { background: var(--fp-red-light); color: var(--fp-red-dark); }
.fp-cc-synth-meta {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    margin: var(--fp-space-4) 0 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}
.fp-cc-synth-meta .fp-cc-icon { color: var(--fp-green); }
@media (min-width: 768px) {
    .fp-cc-synth-grid { flex-direction: row; }
    .fp-cc-synth-block { flex: 1; }
}

/* ---- AI Negotiator script (Phase 3 v2.8) ---- */
.fp-cc-negotiator-card {
    overflow: hidden;
    border: 1px solid var(--fp-brand-indigo-border);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-brand-indigo-soft);
}
.fp-cc-negotiator-summary {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    cursor: pointer;
    list-style: none;
}
.fp-cc-negotiator-summary::-webkit-details-marker { display: none; }
.fp-cc-negotiator-icon { flex-shrink: 0; }
.fp-cc-negotiator-head {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-cc-negotiator-title {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
}
.fp-cc-negotiator-sub {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}
.fp-cc-negotiator-chevron {
    color: var(--fp-brand-indigo);
    transition: transform var(--fp-transition);
}
.fp-cc-negotiator-card[open] .fp-cc-negotiator-chevron { transform: rotate(90deg); }
.fp-cc-negotiator-body { padding: 0 var(--fp-space-4) var(--fp-space-4); }
.fp-cc-negotiator-script {
    margin: 0 0 var(--fp-space-3);
    padding: var(--fp-space-4);
    background: var(--fp-surface);
    border-left: 3px solid var(--fp-brand-indigo);
    border-radius: var(--fp-radius-sm);
    font-size: var(--fp-text-base);
    line-height: 1.65;
    font-style: italic;
    color: var(--fp-text-main);
}
.fp-cc-negotiator-actions {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
}
.fp-cc-negotiator-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    align-self: flex-start;
    padding: var(--fp-space-2) var(--fp-space-4);
    background: var(--fp-brand-indigo);
    color: #fff;
    border: none;
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-sm2);
    font-weight: 600;
    font-family: var(--fp-font);
    cursor: pointer;
    transition: var(--fp-transition);
}
.fp-cc-negotiator-copy:hover { background: var(--fp-brand-indigo-mid); }
.fp-cc-negotiator-copy.is-copied { background: var(--fp-green); }
.fp-cc-negotiator-tip {
    margin: 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}

/* ---- Lounge access locator (Phase 4 v2.10) — extends .fp-cc-accordion ---- */
.fp-cc-lounges-intro {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    margin: 0 0 var(--fp-space-4);
    font-size: var(--fp-text-sm2);
    color: var(--fp-text-muted);
}
.fp-cc-lounges-intro .fp-cc-icon {
    flex-shrink: 0;
    color: var(--fp-brand-indigo);
}
.fp-cc-lounge-summary { align-items: center; }
.fp-cc-lounge-city {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fp-cc-lounge-name {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: var(--fp-text-main);
}
.fp-cc-lounge-airport {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-cc-lounge-type {
    flex-shrink: 0;
    margin-right: var(--fp-space-2);
    padding: 3px var(--fp-space-2);
    font-size: var(--fp-text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--fp-cc-indigo-tint);
    color: var(--fp-brand-indigo);
    border-radius: var(--fp-radius-pill);
}
.fp-cc-lounge-meta {
    display: flex;
    align-items: baseline;
    gap: var(--fp-space-2);
    margin-bottom: var(--fp-space-3);
}
.fp-cc-lounge-meta-label {
    font-size: var(--fp-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fp-text-muted);
}
.fp-cc-lounge-meta-value {
    font-size: var(--fp-text-base);
    font-weight: 600;
    color: var(--fp-text-main);
}
.fp-cc-lounge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.fp-cc-lounge-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    padding: var(--fp-space-1) var(--fp-space-3);
    font-size: var(--fp-text-sm2);
    font-weight: 600;
    background: var(--fp-green-light);
    color: var(--fp-green-dark);
    border-radius: var(--fp-radius-pill);
}
.fp-cc-lounge-chip .fp-cc-icon { color: var(--fp-green); }

/* ---- Application document checklist (Phase 4 v2.10) ---- */
.fp-cc-docs-card {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-4);
}
.fp-cc-docs-progress {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}
.fp-cc-docs-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--fp-slate-100);
    border-radius: var(--fp-radius-pill);
    overflow: hidden;
}
.fp-cc-docs-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fp-gradient-green);
    border-radius: var(--fp-radius-pill);
    transition: width var(--fp-transition);
}
.fp-cc-docs-progress-text {
    font-size: var(--fp-text-sm2);
    font-weight: 600;
    white-space: nowrap;
    color: var(--fp-text-muted);
}
.fp-cc-docs-progress-text b { color: var(--fp-green-dark); }
.fp-cc-docs-group {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
}
.fp-cc-docs-group-title {
    margin: 0;
    font-size: var(--fp-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fp-text-muted);
}
.fp-cc-docs-list {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.fp-cc-docs-item {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    width: 100%;
    padding: var(--fp-space-3);
    text-align: left;
    background: var(--fp-slate-50);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    font-family: var(--fp-font);
    cursor: pointer;
    transition: var(--fp-transition);
}
.fp-cc-docs-item:hover { border-color: var(--fp-green-mint); }
.fp-cc-docs-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #fff;
    border: 2px solid var(--fp-slate-300);
    border-radius: var(--fp-radius-6);
    transition: var(--fp-transition);
}
.fp-cc-docs-check .fp-cc-icon {
    opacity: 0;
    transition: var(--fp-transition);
}
.fp-cc-docs-text {
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
    transition: var(--fp-transition);
}
.fp-cc-docs-item[aria-pressed="true"] {
    background: var(--fp-green-light);
    border-color: var(--fp-green);
}
.fp-cc-docs-item[aria-pressed="true"] .fp-cc-docs-check {
    background: var(--fp-green);
    border-color: var(--fp-green);
}
.fp-cc-docs-item[aria-pressed="true"] .fp-cc-docs-check .fp-cc-icon { opacity: 1; }
.fp-cc-docs-item[aria-pressed="true"] .fp-cc-docs-text {
    color: var(--fp-green-dark);
    text-decoration: line-through;
    text-decoration-color: var(--fp-green-mint);
}
.fp-cc-docs-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    align-self: flex-start;
    padding: var(--fp-space-3) var(--fp-space-5);
    background: var(--fp-surface);
    border: 1.5px solid var(--fp-brand-indigo);
    color: var(--fp-brand-indigo);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-sm2);
    font-weight: 600;
    text-decoration: none;
    transition: var(--fp-transition);
}
.fp-cc-docs-download:hover {
    background: var(--fp-brand-indigo);
    color: #fff;
}
@media (min-width: 768px) {
    .fp-cc-docs-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Referral chain (Phase 4 v2.9) — cashback green-on-white per brand rule ---- */
.fp-cc-referral-card {
    position: relative;
    overflow: hidden;
    padding: var(--fp-space-5);
    border-radius: var(--fp-radius-xl);
    background: var(--fp-gradient-green);
    box-shadow: var(--fp-shadow-lg);
    color: #fff;
}
.fp-cc-referral-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 80% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%);
    pointer-events: none;
}
.fp-cc-referral-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-4);
}
.fp-cc-referral-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--fp-radius-md);
    color: #fff;
}
.fp-cc-referral-eyebrow {
    margin: 0;
    font-size: var(--fp-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.82);
}
.fp-cc-referral-title {
    margin: 2px 0 0;
    font-size: var(--fp-text-lg2);
    font-weight: 800;
    line-height: 1.2;
}
.fp-cc-referral-amount { white-space: nowrap; }
.fp-cc-referral-steps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fp-space-5);
}
.fp-cc-referral-step {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    font-size: var(--fp-text-base);
}
.fp-cc-referral-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--fp-radius-circle);
    font-size: var(--fp-text-sm2);
    font-weight: 800;
}
.fp-cc-referral-share {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
}
.fp-cc-referral-link {
    display: flex;
    gap: var(--fp-space-2);
    padding: var(--fp-space-1);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--fp-radius-pill);
}
.fp-cc-referral-input {
    flex: 1;
    min-width: 0;
    padding: 0 var(--fp-space-3);
    border: none;
    background: transparent;
    font-size: var(--fp-text-sm2);
    font-family: var(--fp-font);
    color: var(--fp-text-main);
}
.fp-cc-referral-input:focus { outline: none; }
.fp-cc-referral-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    flex-shrink: 0;
    padding: var(--fp-space-2) var(--fp-space-4);
    background: var(--fp-green-dark);
    color: #fff;
    border: none;
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-sm2);
    font-weight: 700;
    font-family: var(--fp-font);
    cursor: pointer;
    transition: var(--fp-transition);
}
.fp-cc-referral-copy.is-copied { background: var(--fp-text-main); }
.fp-cc-referral-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-text-sm2);
    font-weight: 700;
    text-decoration: none;
    transition: var(--fp-transition);
}
.fp-cc-referral-wa:hover { background: rgba(255, 255, 255, 0.25); }
@media (min-width: 768px) {
    .fp-cc-referral-share { flex-direction: row; align-items: center; }
    .fp-cc-referral-link { flex: 1; }
}