/* =============================================================================
 * WML Pricing Table
 * Three styles: Obsidian & Gold, Atelier, Aurora Glass
 * ========================================================================== */

.wml-pricing-table {
    --wml-pt-max-width: 100%;
    --wml-pt-gap: 18px;
    box-sizing: border-box;
    width: 100%;
}

.wml-pricing-table *,
.wml-pricing-table *::before,
.wml-pricing-table *::after { box-sizing: border-box; }

.wml-pt-band {
    position: relative;
    overflow: hidden;
    max-width: var(--wml-pt-max-width);
    margin: 0 auto;
    border-radius: var(--wml-pt-band-radius, 10px);
    padding: 44px 40px 48px;
}

.wml-pt-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.wml-pt-head-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wml-pt-eyebrow {
    font: 600 12px/1.2 Manrope, system-ui, sans-serif;
    letter-spacing: .28em;
}

.wml-pt-toggle {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
}

.wml-pt-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 999px;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
    z-index: 0;
}

.wml-pt-bill {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 8px 18px;
    font: 600 12px/1 Manrope, system-ui, sans-serif;
    opacity: .5;
    transition: opacity .3s ease, color .3s ease;
}

.wml-pt-bill.is-active { opacity: 1; }

.wml-pt-save {
    font: 600 11px/1.2 Manrope, system-ui, sans-serif;
    letter-spacing: .12em;
}

.wml-pt-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wml-pt-row-gap, var(--wml-pt-gap)) var(--wml-pt-gap);
    margin-top: 30px;
}

.wml-pt-card { position: relative; }

.wml-pt-card-inner {
    position: relative;
    height: 100%;
    padding: 30px 26px;
    border-radius: var(--wml-pt-card-radius, 6px);
    display: flex;
    flex-direction: column;
}

.wml-pt-badge {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 16px;
    border-radius: 999px;
    padding: 5px 11px;
    font: 700 9px/1 Manrope, system-ui, sans-serif;
    letter-spacing: .14em;
}

.wml-pt-name { font: 600 21px/1.1 Manrope, system-ui, sans-serif; }
.wml-pt-sub { font: 400 12.5px/1.3 Manrope, system-ui, sans-serif; margin-top: 3px; }

.wml-pt-price-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 22px;
}

.wml-pt-currency { font: 600 18px/1 Manrope, system-ui, sans-serif; }
.wml-pt-price { font: 600 54px/1 Manrope, system-ui, sans-serif; }
.wml-pt-period { font: 500 13px/1 Manrope, system-ui, sans-serif; }

.wml-pt-note {
    font: 600 10px/1.2 Manrope, system-ui, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-top: 8px;
}

.wml-pt-btn {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 13px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font: 600 13px/1 Manrope, system-ui, sans-serif;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, filter .25s ease, color .25s ease;
}

.wml-pt-features {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.wml-pt-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 400 13px/1.45 Manrope, system-ui, sans-serif;
}

.wml-pt-feat-icon {
    flex: 0 0 auto;
    margin-top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wml-pt-accent, currentColor);
}

/* entrance helper */
.wml-pricing-table[data-entrance="1"] .wml-pt-card { will-change: opacity, transform; }

/* =============================================================================
 * STYLE 01 — OBSIDIAN & GOLD
 * ========================================================================== */
.wml-pricing-table.is-obsidian { --wml-pt-accent: #d9b673; }

.is-obsidian .wml-pt-band {
    background: radial-gradient(130% 150% at 50% -25%, #1d1a15 0%, #0b0b0d 58%);
    border: 1px solid #221f17;
    box-shadow: 0 36px 90px -46px rgba(0, 0, 0, .85);
}

.is-obsidian .wml-pt-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(var(--wml-pt-spotlight-size, 440px) var(--wml-pt-spotlight-size, 440px) at var(--sx, 50%) var(--sy, 28%), var(--wml-pt-spotlight-color, rgba(217, 182, 115, .16)), transparent 62%);
}

.is-obsidian .wml-pt-eyebrow { color: var(--wml-pt-accent); }

.is-obsidian .wml-pt-toggle { background: #161410; border: 1px solid #2c281d; }
.is-obsidian .wml-pt-knob { background: linear-gradient(180deg, #e7c987, #cda557); }
.is-obsidian .wml-pt-bill { color: var(--wml-pt-accent); }
.is-obsidian .wml-pt-bill.is-active { color: #15130e; }
.is-obsidian .wml-pt-save { color: #7d745f; }

.is-obsidian .wml-pt-card-inner {
    background: linear-gradient(180deg, #141312, #0d0c0b);
    border: 1px solid #262218;
    color: #e9e3d6;
}

.is-obsidian .wml-pt-card.is-featured .wml-pt-card-inner {
    background: linear-gradient(180deg, #1a1610, #100d09);
    border: 1px solid var(--wml-pt-featured-border, #5a4a2c);
    box-shadow: 0 0 0 1px rgba(217, 182, 115, .4), 0 34px 70px -34px rgba(217, 182, 115, .3);
}

.is-obsidian .wml-pt-name { font-family: "Cormorant Garamond", Manrope, serif; letter-spacing: .02em; color: #cfc7b6; }
.is-obsidian .wml-pt-card.is-featured .wml-pt-name { color: #e7c987; }
.is-obsidian .wml-pt-sub { color: #7d776b; }
.is-obsidian .wml-pt-currency { font-family: "Cormorant Garamond", Manrope, serif; color: var(--wml-pt-accent); }
.is-obsidian .wml-pt-price { font-family: "Cormorant Garamond", Manrope, serif; font-weight: 500; color: #f0eadb; }
.is-obsidian .wml-pt-card.is-featured .wml-pt-price { font-size: 56px; font-weight: 600; color: #f6efda; }
.is-obsidian .wml-pt-period { color: #7d776b; }
.is-obsidian .wml-pt-note { color: #6c6657; }

.is-obsidian .wml-pt-btn {
    border: 1px solid #4a4231;
    background: transparent;
    color: #e7d9b6;
}
.is-obsidian .wml-pt-btn:hover { background: #1c190f; border-color: #6e6041; }
.is-obsidian .wml-pt-card.is-featured .wml-pt-btn {
    border: 0;
    background: linear-gradient(180deg, #eccd8a, #cda557);
    color: #241c0a;
    font-weight: 700;
}
.is-obsidian .wml-pt-card.is-featured .wml-pt-btn:hover { filter: brightness(1.08); background: linear-gradient(180deg, #eccd8a, #cda557); }

.is-obsidian .wml-pt-features li { color: #b7ae9d; }
.is-obsidian .wml-pt-card.is-featured .wml-pt-features li { color: #cdc3ab; }
.is-obsidian .wml-pt-feat-icon { background: var(--wml-pt-accent); }
.is-obsidian .wml-pt-card.is-featured .wml-pt-feat-icon { background: #e7c987; }

.is-obsidian .wml-pt-badge {
    overflow: hidden;
    background: linear-gradient(90deg, #3a2f17, #6b5526, #3a2f17);
    background-size: 200% 100%;
    color: #f4e3b6;
    letter-spacing: .16em;
}

/* =============================================================================
 * STYLE 02 — ATELIER
 * ========================================================================== */
.wml-pricing-table.is-atelier { --wml-pt-accent: #b5563f; }

.is-atelier .wml-pt-band {
    background: #f7f6f3;
    border: 1px solid #e6e3dc;
    padding: 48px 46px 52px;
}

.is-atelier .wml-pt-eyebrow { color: #a8a59c; }

.is-atelier .wml-pt-toggle { background: #eceae4; border: 1px solid #e0ddd5; }
.is-atelier .wml-pt-knob { background: #1c1b18; }
.is-atelier .wml-pt-bill { color: #1c1b18; }
.is-atelier .wml-pt-bill.is-active { color: #f7f6f3; }
.is-atelier .wml-pt-save { color: var(--wml-pt-accent); font-weight: 500; letter-spacing: .1em; }

.is-atelier .wml-pt-cards { margin-top: 34px; }

.is-atelier .wml-pt-card-inner {
    border: 1px solid #e6e3dc;
    border-radius: var(--wml-pt-card-radius, 4px);
    background: #fff;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.is-atelier .wml-pt-card.is-featured .wml-pt-card-inner {
    border-color: var(--wml-pt-featured-border, #d8c4bd);
    box-shadow: 0 24px 50px -30px rgba(181, 86, 63, .45);
}

.is-atelier .wml-pt-accent-line {
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 2px;
    background: var(--wml-pt-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.is-atelier .wml-pt-card.is-featured .wml-pt-accent-line { transform: scaleX(1); }

.is-atelier .wml-pt-name {
    font: 600 12px/1.2 Manrope, system-ui, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #1c1b18;
}
.is-atelier .wml-pt-sub { color: #94918a; margin-top: 6px; }
.is-atelier .wml-pt-price-row { margin-top: 26px; gap: 2px; }
.is-atelier .wml-pt-currency { font: 300 22px/1 Manrope, system-ui, sans-serif; color: #56544d; }
.is-atelier .wml-pt-price { font: 200 50px/1 Manrope, system-ui, sans-serif; letter-spacing: -.02em; color: #1c1b18; }
.is-atelier .wml-pt-period { color: #94918a; font-weight: 400; }
.is-atelier .wml-pt-note {
    color: #a8a59c;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: none;
}

.is-atelier .wml-pt-btn {
    border: 1px solid #d6d2c9;
    border-radius: 3px;
    background: transparent;
    color: #1c1b18;
    padding: 11px 0;
    font-size: 12.5px;
}
.is-atelier .wml-pt-btn:hover { background: #1c1b18; color: #f7f6f3; }
.is-atelier .wml-pt-card.is-featured .wml-pt-btn {
    border: 0;
    background: var(--wml-pt-accent);
    color: #fff;
}
.is-atelier .wml-pt-card.is-featured .wml-pt-btn:hover { filter: brightness(1.07); color: #fff; }

.is-atelier .wml-pt-features { gap: 0; margin-top: 26px; }
.is-atelier .wml-pt-features li {
    justify-content: space-between;
    padding: 11px 0;
    border-top: 1px solid #ece9e2;
    color: #56544d;
}
.is-atelier .wml-pt-feat-icon { display: none; }

.is-atelier .wml-pt-badge {
    position: static;
    display: inline-block;
    margin-left: 8px;
    background: transparent;
    border: 1px solid #e3c9c0;
    color: var(--wml-pt-accent);
    letter-spacing: .1em;
    vertical-align: middle;
}

/* =============================================================================
 * STYLE 04 — AURORA GLASS
 * ========================================================================== */
.wml-pricing-table.is-aurora { --wml-pt-accent: #6d4cff; }

.is-aurora .wml-pt-band {
    background: #070a16;
    border: 1px solid #141a2e;
    padding: 48px 44px 52px;
}

.is-aurora .wml-pt-blob {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.is-aurora .wml-pt-blob[data-blob="0"] {
    width: 420px; height: 420px; left: -60px; top: -90px;
    filter: blur(70px);
    background: radial-gradient(circle, var(--wml-pt-blob-1, #6d4cff), transparent 65%);
}
.is-aurora .wml-pt-blob[data-blob="1"] {
    width: 380px; height: 380px; right: -40px; top: -60px;
    filter: blur(70px);
    background: radial-gradient(circle, var(--wml-pt-blob-2, #ff5fa2), transparent 65%);
}
.is-aurora .wml-pt-blob[data-blob="2"] {
    width: 460px; height: 460px; left: 35%; bottom: -160px;
    filter: blur(80px);
    background: radial-gradient(circle, var(--wml-pt-blob-3, #1fd1c6), transparent 65%);
}

.is-aurora .wml-pt-eyebrow {
    font-family: "Space Grotesk", Manrope, sans-serif;
    color: #9fb0e8;
}

.is-aurora .wml-pt-toggle {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}
.is-aurora .wml-pt-knob { background: linear-gradient(90deg, #6d4cff, #1fd1c6); }
.is-aurora .wml-pt-bill { font-family: "Space Grotesk", Manrope, sans-serif; color: #cdd6f5; }
.is-aurora .wml-pt-bill.is-active { color: #fff; }
.is-aurora .wml-pt-save { color: #7ee6dd; font-family: "Space Grotesk", Manrope, sans-serif; letter-spacing: .1em; }

.is-aurora .wml-pt-cards { margin-top: 32px; }

.is-aurora .wml-pt-card-inner {
    overflow: hidden;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--wml-pt-card-radius, 16px);
    color: #eaf0ff;
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .15s ease-out;
    will-change: transform;
}
.is-aurora .wml-pt-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(180px 180px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 60%);
}
.is-aurora .wml-pt-card.is-featured .wml-pt-card-inner {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--wml-pt-featured-border, rgba(160, 180, 255, .4));
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 70px -24px rgba(109, 76, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.is-aurora .wml-pt-card.is-featured .wml-pt-card-inner::before {
    background: radial-gradient(200px 200px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 60%);
}

.is-aurora .wml-pt-name { font: 600 16px/1.2 "Space Grotesk", Manrope, sans-serif; }
.is-aurora .wml-pt-sub { font-family: "Space Grotesk", Manrope, sans-serif; color: #9aa6c8; }
.is-aurora .wml-pt-price-row { margin-top: 20px; gap: 2px; }
.is-aurora .wml-pt-currency { font: 500 20px/1 "Space Grotesk", Manrope, sans-serif; color: #9fb0e8; }
.is-aurora .wml-pt-price { font: 600 50px/1 "Space Grotesk", Manrope, sans-serif; color: #fff; }
.is-aurora .wml-pt-card.is-featured .wml-pt-price {
    font-size: 54px;
    font-weight: 700;
    background: linear-gradient(90deg, #fff, #bfe9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.is-aurora .wml-pt-period { font-family: "Space Grotesk", Manrope, sans-serif; color: #9aa6c8; }
.is-aurora .wml-pt-note {
    font-family: "Space Grotesk", Manrope, sans-serif;
    color: #7c88aa;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 500;
}

.is-aurora .wml-pt-btn {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #eaf0ff;
    font-family: "Space Grotesk", Manrope, sans-serif;
    padding: 12px;
}
.is-aurora .wml-pt-btn:hover { background: rgba(255, 255, 255, .14); }
.is-aurora .wml-pt-card.is-featured .wml-pt-btn {
    border: 0;
    background: linear-gradient(90deg, #6d4cff, #1fd1c6);
    color: #fff;
    font-weight: 700;
}
.is-aurora .wml-pt-card.is-featured .wml-pt-btn:hover { filter: brightness(1.1); }

.is-aurora .wml-pt-features li {
    align-items: center;
    font-family: "Space Grotesk", Manrope, sans-serif;
    color: #c2cbe6;
}
.is-aurora .wml-pt-card.is-featured .wml-pt-features li { color: #d2d9f0; }
.is-aurora .wml-pt-feat-icon {
    margin-top: 0;
    background: var(--wml-pt-accent);
    box-shadow: 0 0 8px var(--wml-pt-accent);
}
.is-aurora .wml-pt-card.is-featured .wml-pt-feat-icon { background: #1fd1c6; box-shadow: 0 0 8px #1fd1c6; }

.is-aurora .wml-pt-badge {
    background: linear-gradient(90deg, #7ee6dd, #a78bff);
    color: #0b0e1a;
    letter-spacing: .14em;
}

/* =============================================================================
 * Responsive
 * ========================================================================== */
@media (max-width: 860px) {
    .wml-pt-cards { grid-template-columns: 1fr; }
}