/* =====================================================
   FALYS WEBSITE - PRICING PAGE MODULE
   Self-contained. Only new classnames (all prefixed
   `pricing-` or `plan-`) so this can never collide with
   or override anything in style.css / animations.css /
   responsive.css. Reuses existing design tokens
   (--cyan, --blue, --purple, --card, --border, --radius)
   defined in style.css's :root.
   ===================================================== */


/* =====================
   BILLING TOGGLE
===================== */

.pricing-toggle-wrap {

    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;

    margin:50px auto 10px;

}


.pricing-toggle {

    display:inline-flex;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px;
    gap:4px;

}


.pricing-toggle-btn {

    border:none;
    background:transparent;
    color:var(--muted);
    font-family:"Inter", sans-serif;
    font-weight:600;
    font-size:.9rem;
    padding:10px 22px;
    border-radius:999px;
    cursor:pointer;
    transition:.3s;
    display:flex;
    align-items:center;
    gap:8px;

}


.pricing-toggle-btn.active {

    background:linear-gradient(135deg, var(--cyan), var(--blue));
    color:#020617;

}


.pricing-save-badge {

    background:rgba(0,234,255,.15);
    color:var(--cyan);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.5px;
    padding:3px 8px;
    border-radius:999px;

}


.pricing-toggle-btn.active .pricing-save-badge {

    background:rgba(2,6,23,.25);
    color:#020617;

}


.pricing-note {

    text-align:center;
    color:var(--muted);
    font-size:.85rem;
    margin-bottom:20px;

}


/* =====================
   PLAN GRID
===================== */

.plan-grid {

    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    align-items:stretch;

}


.plan-card {

    position:relative;
    display:flex;
    flex-direction:column;
    padding:40px 32px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:.3s;

}


.plan-card:hover {

    transform:translateY(-8px);
    border-color:rgba(0,234,255,.4);

}


.plan-card.featured {

    border-color:var(--cyan);
    box-shadow:0 20px 60px rgba(0,234,255,.12);

}


.plan-badge {

    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg, var(--cyan), var(--purple));
    color:#020617;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1px;
    padding:6px 16px;
    border-radius:999px;
    white-space:nowrap;

}


.plan-name {

    font-family:"Space Grotesk", sans-serif;
    font-size:1.3rem;
    color:white;
    margin-bottom:6px;

}


.plan-tagline {

    color:var(--muted);
    font-size:.88rem;
    margin-bottom:26px;

}


.plan-price {

    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:6px;

}


.plan-price-amount {

    font-family:"Space Grotesk", sans-serif;
    font-size:2.6rem;
    font-weight:700;
    color:white;

}


.plan-price-period {

    color:var(--muted);
    font-size:.95rem;

}


.plan-price-sub {

    color:var(--muted);
    font-size:.8rem;
    margin-bottom:30px;
    min-height:1.2em;

}


.plan-endpoints {

    display:inline-block;
    color:var(--cyan);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:26px;

}


.plan-features {

    list-style:none;
    margin-bottom:34px;
    flex-grow:1;

}


.plan-features li {

    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text);
    font-size:.92rem;
    padding:9px 0;
    border-bottom:1px solid var(--border);

}


.plan-features li:last-child {

    border-bottom:none;

}


.plan-features li::before {

    content:"✓";
    color:var(--cyan);
    font-weight:700;
    flex-shrink:0;

}


.plan-cta {

    text-align:center;
    width:100%;

}


/* =====================
   COMPARISON TABLE
===================== */

.pricing-compare-wrap {

    overflow-x:auto;
    margin-top:60px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);

}


.pricing-compare-table {

    width:100%;
    border-collapse:collapse;
    min-width:640px;

}


.pricing-compare-table th,
.pricing-compare-table td {

    text-align:left;
    padding:18px 24px;
    border-bottom:1px solid var(--border);
    font-size:.92rem;

}


.pricing-compare-table th {

    font-family:"Space Grotesk", sans-serif;
    color:white;
    font-size:.95rem;

}


.pricing-compare-table td {

    color:var(--muted);

}


.pricing-compare-table td strong,
.pricing-compare-table th strong {

    color:var(--cyan);

}


.pricing-compare-table tr:last-child th,
.pricing-compare-table tr:last-child td {

    border-bottom:none;

}


/* =====================
   RESPONSIVE (module-local only)
===================== */

@media (max-width:900px) {

    .plan-grid {

        grid-template-columns:1fr;

    }

    .plan-card.featured {

        order:-1;

    }

}