:root {
    /* --- Color Palette --- */
    --primary: #6487AF;
    /* Medium Blue */
    --primary-dark: #3A5778;
    /* Dark Blue */
    --primary-light: #E6EFF9;
    /* Light Blue */
    --accent: #AABEDC;
    /* Soft Gray-Blue */

    --text-main: #333333;
    /* Dark Gray */
    --text-sub: #666666;
    /* Medium Gray adjusted */
    --bg-body: #FFFFFF;
    /* White */
    --bg-neutral: #F5F5F5;
    /* Light Gray */

    --border-color: #E6E6E6;

    /* --- Styles --- */
    --shadow-hover: 0 12px 24px rgba(58, 87, 120, 0.15);
    /* Tinted shadow */
    --radius-pill: 999px;
    --radius-card: 12px;
    /* Slightly tighter radius for elegance */

    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'IBM Plex Sans', sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    /* Default to Sans */
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    /* Lighter weight for elegance */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: 600;
}

.section {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
    background: transparent;
}

/* ================= HEADER / TOOLBAR ================= */

.main-toolbar {
    position: relative;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Left: Custom Filter Dropdown */
.filter-tabs-container {
    position: relative;
    z-index: 100;
    /* Ensure on top */
}

.custom-dropdown {
    position: relative;
    width: 200px;
    font-family: var(--font-sans);
}

.dropdown-trigger {
    background-color: var(--bg-neutral);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
}

.dropdown-trigger:hover {
    background-color: #ededed;
}

.custom-dropdown.open .dropdown-trigger {
    background-color: #fff;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(100, 135, 175, 0.2);
}

.dropdown-icon {
    width: 18px;
    height: 18px;
    color: var(--text-sub);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 101;
}

.custom-dropdown.open .dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    padding: 10px 20px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.95rem;
    transition: background 0.1s;
}

.dropdown-option:hover {
    background-color: var(--bg-neutral);
    color: var(--primary);
}

.dropdown-option.selected {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

/* Right: Search & Actions */
.right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrapper {
    position: relative;
    width: 240px;
}

.search-input {
    width: 100%;
    background: var(--bg-neutral);
    border: 1px solid transparent;
    padding: 10px 16px 10px 40px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(100, 135, 175, 0.2);
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-sub);
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* ================= GRID & CARDS (Pinterest/Masonry Style) ================= */

.showcase-grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

.masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    /* Prevent flex overflow */
}

/* Remove CSS grid media queries as we handle cols in JS now, 
   but we might want to keep some container padding or adjustments if needed. 
   Actually, the JS logic handles column counts, so CSS just needs to layout the flex columns. */

.browser-card {
    border-radius: var(--radius-card);
    /* margin-bottom is handled by gap in masonry-col */
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
    background: #fff;
    transition: all 0.3s ease;
    width: 100%;
    /* Ensure card fills the column */
}

.browser-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.card-info {
    transform: translateY(20px);
    transition: transform 0.3s ease;
    margin-bottom: 16px;
}

.card-info h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.card-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin: 0;
    font-weight: 500;
}

.hover-visit-btn {
    background: #ffffff;
    color: var(--primary);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hover-visit-btn:hover {
    background: var(--primary-light);
}

.browser-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.browser-card:hover .card-overlay {
    opacity: 1;
}

.browser-card:hover .card-info {
    transform: translateY(0);
}

.browser-card:hover .hover-visit-btn {
    transform: translateY(0);
}

.browser-card:hover img {
    transform: scale(1.03);
}

/* ================= LOADING SKELETON ================= */
.skeleton-card {
    background-color: var(--bg-neutral);
    border-radius: var(--radius-card);
    margin-bottom: 20px;
    width: 100%;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    break-inside: avoid;
}

.skeleton-card:nth-child(odd) {
    height: 280px;
}

.skeleton-card:nth-child(even) {
    height: 400px;
}

@keyframes skeleton-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* ================= NEW PRICING SECTION WRAPPER ================= */
.pricing-wrapper {
    width: 100%;
    /* Smooth Blue Gradient based on palette */
    background: linear-gradient(135deg, #E6EFF9 0%, #AABEDC 100%);
    padding: 0;
    margin-top: 60px;
}

/* Update Header Text to White for Dark Background */
.pricing-wrapper .section-header {
    margin-bottom: 50px;
    text-align: center;
}

.pricing-wrapper .section-header h2 {
    color: var(--primary-dark);
    font-size: 3rem;
    margin-bottom: 10px;
}

.pricing-wrapper .section-header p {
    color: var(--primary-dark);
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ================= PRICING CARDS ================= */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle border */
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* For badge positioning */
}

/* Recommended Badge */
.recommended-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-dark);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

.recommended-border {
    border: 2px solid var(--primary-dark);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.card-header h3 {
    color: var(--primary);
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.card-header p {
    color: var(--text-sub);
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    min-height: 80px;
    margin-bottom: 20px;
}

.price-display {
    margin: 10px 0 30px 0;
    padding-bottom: 0px;
    border-bottom: none;
    display: flex;
    align-items: baseline;
}

.price-display .val {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-serif);
}

.price-display .period {
    font-size: 0.95rem;
    color: var(--text-sub);
    font-weight: 500;
}

.main-feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    flex-grow: 0;
    /* Don't stretch */
    min-height: 280px;
    /* Enforce consistent height for alignment */
    display: flex;
    flex-direction: column;
}

.main-feature-list li {
    display: flex;
    align-items: flex-start;
    /* Aligns icon to top of multi-line text */
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 16px;
    /* More spacing */
    color: var(--text-sub);
}

.toggle-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    transition: opacity 0.2s;
}

.toggle-btn:hover {
    opacity: 0.8;
}

.initiate-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    padding: 16px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    /* Force to bottom regardless of other content */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    transition: transform 0.2s;
}

.initiate-btn:hover {
    color: white !important;
    text-decoration: none;
    background: var(--primary);
}

.collapsible-section {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.collapsible-section.open {
    max-height: 400px;
    /* Fixed height for scrolling */
    overflow-y: auto;
    /* Enable vertical scroll */
    padding-right: 8px;
    /* Space for scrollbar */
    margin-bottom: 20px;
    border-top: 1px solid var(--border-color);
    /* Separator */
    padding-top: 16px;
}

/* Custom Scrollbar */
.collapsible-section::-webkit-scrollbar {
    width: 6px;
}

.collapsible-section::-webkit-scrollbar-track {
    background: var(--bg-neutral);
    border-radius: 3px;
}

.collapsible-section::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

.collapsible-section::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.detail-block h4 {
    color: var(--primary-dark);
    /* Darker for better visibility */
    font-size: 0.9rem;
    /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    font-weight: 700;
    font-family: var(--font-sans);
}

.detail-block ul {
    padding: 0;
    list-style: none;
    margin-bottom: 24px;
}

.detail-block li {
    font-size: 0.95rem;
    /* Increased from 0.85rem */
    color: var(--text-main);
    /* Darker gray */
    margin-bottom: 10px;
    /* More breathing room */
    line-height: 1.6;
    /* Better readability */
    padding-left: 0;
}

.sub-list li {
    padding-left: 12px;
    border-left: 2px solid var(--primary-light);
    /* Softer border color */
    color: var(--text-sub);
    margin-bottom: 8px;
}

.see-more-container {
    text-align: center;
    margin-top: 40px;
}

.btn-secondary {
    background: var(--bg-neutral);
    color: var(--text-main);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

.hidden {
    display: none;
}

/* Responsive - Pinterest/Masonry Layout */
@media (max-width: 1600px) {
    .showcase-grid {
        column-count: 4;
    }
}

@media (max-width: 1200px) {
    .showcase-grid {
        column-count: 3;
    }
}

@media (max-width: 900px) {

    /* Keep toolbar in a row, just adjust padding/gap */
    .main-toolbar {
        flex-direction: row;
        /* Force row */
        align-items: center;
        gap: 12px;
        padding: 15px;
    }

    .right-actions {
        justify-content: flex-end;
        gap: 8px;
    }

    /* Shrink the dropdown to fit */
    .custom-dropdown {
        width: auto;
        min-width: 140px;
        flex: 1;
        /* Allow it to take available space */
    }

    .dropdown-trigger {
        padding: 8px 35px;
        width: 100%;
    }

    .dropdown-trigger span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Adjust button padding */
    .btn-primary {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .showcase-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .showcase-grid {
        gap: 10px;
        /* Tighter gap for mobile */
    }

    .masonry-col {
        gap: 10px;
    }

    .browser-card {
        margin-bottom: 0;
        /* Handled by gap */
    }

    /* On very small screens, maybe shrink dropdown more */
    .custom-dropdown {
        min-width: 0;
        /* Allow shrinking */
    }

    .pricing-wrapper .pricing-card {
        padding: 20px;
    }

    .pricing-wrapper .section-header h2 {
        font-size: 2rem;
    }

    .pricing-wrapper .main-feature-list {
        min-height: auto;
    }

    .pricing-wrapper .pricing-card .card-header p {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .showcase-grid {
        column-count: 2;
        column-gap: 8px;
    }

    /* Ensure no overflow on tiny screens */
    .main-toolbar {
        padding: 12px 10px;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    .right-actions .btn-primary {
        order: 1;
    }

    .search-wrapper {
        order: 2;
        width: 40px;
        height: 40px;
        background: var(--bg-neutral);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        flex-shrink: 0;
        /* Don't squash */
    }

    .search-icon {
        position: static;
        transform: none;
        color: var(--primary);
        pointer-events: none;
    }

    /* Position input relative to the SEARCH BUTTON (which is on the right side now) */
    .search-input {
        position: absolute;
        top: 120%;
        /* Align right edge of input with right edge of button (pops to left) */
        right: -60px;
        /* Slight offset to right to align with page edge maybe? Or 0 */
        /* If I use right: 0, it aligns to right edge of circle. */
        /* If the circle is near the right edge of screen, extending 260px left is safe. */
        /* Let's use right: -60px only if we have space. 
           But to be safe on mobile where search might be near edge: 
           Let's use right: 0 and translate? 
        */
        right: -10px;
        width: 240px;
        /* Slightly smaller width for mobile safety */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        background: #fff;
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 200;
        padding-left: 16px;
    }

    .search-wrapper.active {
        background: var(--primary-light);
    }

    .search-wrapper.active .search-input {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ================= TERMS & CONDITIONS MODAL ================= */
.terms-trigger-container {
    text-align: center;
    margin-top: 30px;
    padding-bottom: 40px;
}

.btn-terms {
    background: transparent;
    color: var(--text-sub);
    border: 1px solid var(--border-color);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-terms:hover {
    background: white;
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
    /* simple toggle */
}

/* Override hidden class for flex display when active if needed, 
   but simplistic toggle removing 'hidden' class usually works if display:flex is default.
   Actually, .hidden sets display:none. So removing it sets it back to flex. 
*/

.modal-content {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-slide-up 0.3s ease-out;
}

@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-sub);
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal-btn:hover {
    background: var(--bg-neutral);
    color: var(--text-main);
}

.modal-header h2 {
    color: var(--primary-dark);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8rem;
    text-align: center;
}

.modal-body ul {
    margin: 0 0 20px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.modal-body li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 12px;
}

.modal-body li::marker {
    color: var(--primary);
}

.modal-notes {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.modal-notes .note {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-style: italic;
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.4;
}