* {
    box-sizing: border-box;
}


:root {
    --background: #f7f7f5;
    --surface: #ffffff;
    --surface-soft: #f1f1ed;

    --text: #171716;
    --text-secondary: #6d6d67;
    --text-light: #989891;

    --border: #e1e1db;
    --border-dark: #c7c7bf;

    --dark: #181817;
    --dark-soft: #252523;

    --success: #15805a;

    --danger: #a43d34;
    --danger-bg: #fff0ee;

    --radius-large: 22px;
    --radius-medium: 15px;

    --shadow:
        0 1px 2px rgba(0,0,0,0.025),
        0 10px 32px rgba(0,0,0,0.035);
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body {
    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


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


button {
    font: inherit;
    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* =========================================================
   Header
========================================================= */

.topbar {
    height: 64px;

    display: flex;
    align-items: center;

    padding:
        0
        clamp(24px, 5vw, 64px);

    border-bottom:
        1px solid var(--border);

    background:
        rgba(247,247,245,0.95);

    position: sticky;
    top: 0;
    z-index: 40;
}


.brand {
    font-size: 18px;
    font-weight: 700;

    letter-spacing:
        -0.04em;
}


.nav-links {
    display: flex;

    align-items: center;

    gap: 26px;

    margin-left:
        44px;
}


.nav-link {
    color:
        var(--text-secondary);

    font-size:
        13px;
}


.nav-link:hover,
.nav-link.active {
    color:
        var(--text);
}


.topbar-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 18px;
}


.dark-small-button {
    min-height: 36px;

    padding:
        0 14px;

    border: 0;

    border-radius:
        9px;

    background:
        var(--dark);

    color:
        white;

    font-weight:
        650;
}


/* =========================================================
   Page
========================================================= */

.plans-page {
    width:
        min(
            1080px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        62px 0 90px;
}


.hero {
    max-width:
        720px;

    margin-bottom:
        34px;
}


.eyebrow {
    margin:
        0 0 9px;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.hero h1 {
    margin: 0;

    font-size:
        clamp(
            38px,
            5vw,
            50px
        );

    line-height: 1;

    letter-spacing:
        -0.055em;
}


.hero-description {
    margin:
        15px 0 0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height: 1.7;
}


/* =========================================================
   State
========================================================= */

.state-card {
    padding: 30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:
        white;

    text-align: center;
}


.error-state {
    background:
        var(--danger-bg);

    color:
        var(--danger);
}


/* =========================================================
   Grid
========================================================= */

.plans-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


/* =========================================================
   Card
========================================================= */

.plan-card {
    position: relative;

    min-height:
        560px;

    padding:
        26px;

    display: flex;
    flex-direction: column;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.plus-plan-card {
    background:
        var(--dark);

    color:
        white;

    border-color:
        var(--dark);
}


.plan-code {
    margin:
        0 0 12px;

    color:
        var(--text-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.plus-plan-card
.plan-code {
    color:
        #9d9d97;
}


.plan-name-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.plan-name-row h2 {
    margin: 0;

    font-size:
        27px;

    letter-spacing:
        -0.045em;
}


.plan-badge {
    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(--dark);

    color:
        white;

    font-size:
        9px;

    font-weight:
        700;
}


.saving-badge {
    background:
        var(--surface-soft);

    color:
        var(--text);
}


.plan-subtitle {
    margin:
        8px 0 0;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.plus-plan-card
.plan-subtitle {
    color:
        #b5b5af;
}


/* =========================================================
   Price
========================================================= */

.price-row {
    display: flex;

    align-items:
        baseline;

    margin-top:
        30px;
}


.currency-symbol {
    margin-right:
        3px;

    font-size:
        20px;

    font-weight:
        600;
}


.price-row strong {
    font-size:
        48px;

    line-height: 1;

    letter-spacing:
        -0.055em;
}


.price-period {
    margin-left:
        6px;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


.plus-plan-card
.price-period {
    color:
        #b5b5af;
}


.average-price {
    margin-top:
        9px;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.plus-plan-card
.average-price {
    color:
        #b5b5af;
}


.plan-divider {
    height: 1px;

    margin:
        26px 0;

    background:
        var(--border);
}


.plus-plan-card
.plan-divider {
    background:
        #3c3c39;
}


/* =========================================================
   Traffic
========================================================= */

.plan-traffic strong {
    display: block;

    font-size:
        24px;

    letter-spacing:
        -0.04em;
}


.plan-traffic span {
    display: block;

    margin-top:
        5px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.plus-plan-card
.plan-traffic span {
    color:
        #b5b5af;
}


/* =========================================================
   Features
========================================================= */

.plan-features {
    list-style: none;

    margin:
        25px 0 0;

    padding: 0;
}


.plan-features li {
    display: flex;

    gap: 9px;

    margin-bottom:
        14px;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height: 1.5;
}


.plus-plan-card
.plan-features li {
    color:
        #d0d0ca;
}


.check {
    color:
        var(--success);

    font-weight:
        800;
}


.plus-callout {
    margin-top:
        4px;

    padding:
        11px 12px;

    border-radius:
        10px;

    background:
        #2d2d2a;

    color:
        #efefeb;

    font-size:
        11px;

    font-weight:
        600;
}


/* =========================================================
   Button
========================================================= */

.plan-button {
    width: 100%;

    min-height:
        44px;

    margin-top: auto;

    border:
        1px solid var(--border-dark);

    border-radius:
        11px;

    background:
        white;

    color:
        var(--text);

    font-weight:
        650;
}


.plan-button:hover {
    background:
        var(--surface-soft);
}


.plus-plan-button {
    border-color:
        white;

    background:
        white;

    color:
        var(--dark);
}


.plus-plan-button:hover {
    background:
        #eeeeea;
}


/* =========================================================
   Extra note
========================================================= */

.extra-note {
    margin-top:
        46px;

    padding:
        30px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface-soft);
}


.extra-note h2 {
    margin: 0;

    font-size:
        27px;

    letter-spacing:
        -0.04em;
}


.extra-note p:not(
    .eyebrow
) {
    margin:
        9px 0 0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


.secondary-button {
    min-height:
        42px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border-dark);

    border-radius:
        10px;

    background:
        white;

    font-size:
        12px;

    font-weight:
        650;
}


/* =========================================================
   Modal
========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index:
        100;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(20,20,18,0.45);

    backdrop-filter:
        blur(5px);
}


.modal {
    position: relative;

    width:
        min(
            470px,
            100%
        );

    padding:
        30px;

    border-radius:
        21px;

    background:
        white;

    box-shadow:
        0 28px 90px rgba(0,0,0,0.20);
}


.modal-close {
    position: absolute;

    top: 15px;
    right: 16px;

    width: 35px;
    height: 35px;

    border: 0;

    border-radius:
        50%;

    background:
        var(--surface-soft);

    color:
        var(--text-secondary);

    font-size:
        22px;
}


.modal h2 {
    margin: 0;

    font-size:
        28px;

    letter-spacing:
        -0.045em;
}


.purchase-summary {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top:
        24px;
}


.purchase-summary > div {
    padding:
        16px;

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.purchase-summary span {
    display: block;

    margin-bottom:
        6px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.purchase-summary strong {
    font-size:
        18px;
}


.modal-note {
    margin:
        18px 0;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.6;
}


.primary-button {
    min-height:
        44px;

    padding:
        0 18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border: 0;

    border-radius:
        11px;

    background:
        var(--dark);

    color:
        white;

    font-weight:
        650;
}


.full-width {
    width: 100%;
}


.purchase-message {
    margin-top:
        12px;

    padding:
        11px;

    border-radius:
        9px;

    background:
        var(--danger-bg);

    color:
        var(--danger);

    font-size:
        12px;
}


.purchase-message.success-message {
    background:
        #e9f6ee;

    color:
        #19794e;
}


/* =========================================================
   Responsive
========================================================= */

@media (
    max-width: 1050px
) {

    .plans-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (
    max-width: 650px
) {

    .plans-page {
        width:
            calc(100% - 28px);

        padding-top:
            40px;
    }


    .nav-links {
        display: none;
    }


    .topbar-right
    .nav-link {
        display: none;
    }


    .plans-grid {
        grid-template-columns:
            1fr;
    }


    .plan-card {
        min-height:
            auto;
    }


    .plan-button {
        margin-top:
            28px;
    }


    .extra-note {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .purchase-summary {
        grid-template-columns:
            1fr;
    }
}