:root {
    --yellow: #f6c915;
    --yellow-soft: #fff8d7;

    --green: #116b3a;
    --green-dark: #094a29;
    --green-soft: #e8f4ed;

    --ink: #17211b;
    --muted: #68756d;

    --surface: #ffffff;
    --surface-soft: #f6f8f6;

    --border: #e4e9e5;

    --shadow:
        0 16px 40px rgba(20, 47, 32, 0.08);

    --shadow-small:
        0 9px 24px rgba(20, 47, 32, 0.06);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.butigal-account {
    margin: 0;

    color: var(--ink);
    background: #ffffff;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

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

.account-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}


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

.account-header {
    position: sticky;
    z-index: 50;
    top: 0;

    border-bottom:
        1px solid rgba(17, 107, 58, 0.08);

    background:
        rgba(255, 249, 218, 0.96);

    backdrop-filter:
        blur(16px);
}

.account-header-inner {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    width:
        min(1240px, calc(100% - 36px));

    min-height:
        72px;

    margin-inline:
        auto;

    gap:
        25px;
}

.account-brand {
    display: inline-flex;

    align-items: center;

    justify-self: start;

    gap: 9px;
}

.account-logo {
    width: auto;
    max-width: 130px;
    height: 39px;

    object-fit: contain;
}

.account-brand span {
    color:
        var(--green-dark);

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        0.08em;
}

.account-header-center {
    padding:
        8px 14px;

    border:
        1px solid rgba(17, 107, 58, 0.08);

    border-radius:
        12px;

    color:
        var(--green-dark);

    background:
        rgba(255, 255, 255, 0.68);

    font-size:
        12px;

    font-weight:
        800;
}

.account-header-actions {
    display: flex;

    align-items: center;

    justify-self: end;

    gap:
        10px;
}

.header-link {
    padding:
        9px 11px;

    color:
        var(--green-dark);

    font-size:
        12px;

    font-weight:
        750;
}

.header-button {
    padding:
        10px 15px;

    border-radius:
        11px;

    color:
        white;

    background:
        var(--green);

    font-size:
        12px;

    font-weight:
        800;
}


/* ==========================================================
   HERO
========================================================== */

.account-hero {
    padding:
        82px 0;

    background:
        linear-gradient(
            125deg,
            #fffdf4 0%,
            #fff9dc 48%,
            #f0f6f2 100%
        );
}

.account-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.75fr);

    align-items: center;

    gap:
        80px;
}

.account-kicker {
    display: inline-flex;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.14em;
}

.account-hero h1 {
    max-width:
        720px;

    margin:
        16px 0 21px;

    font-size:
        clamp(45px, 5.8vw, 72px);

    line-height:
        1;

    letter-spacing:
        -0.045em;
}

.account-hero h1 span {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--green);
}

.account-hero-copy > p {
    max-width:
        680px;

    margin:
        0;

    color:
        #59665e;

    font-size:
        16px;

    line-height:
        1.75;
}

.guest-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    margin-top:
        29px;

    gap:
        11px;
}

.button {
    display:
        inline-flex;

    min-height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 20px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        800;
}

.button-primary {
    color:
        white;

    background:
        var(--green);

    box-shadow:
        0 10px 20px rgba(17, 107, 58, 0.18);
}

.button-secondary {
    border:
        1px solid rgba(17, 107, 58, 0.16);

    color:
        var(--green-dark);

    background:
        rgba(255, 255, 255, 0.8);
}

.button-light {
    flex:
        0 0 auto;

    color:
        var(--green-dark);

    background:
        white;
}

.account-session-status {
    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        29px;

    padding:
        12px 15px;

    border:
        1px solid #d4eadc;

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.75);

    gap:
        11px;
}

.session-dot {
    width:
        10px;

    height:
        10px;

    border:
        3px solid #c6e5d3;

    border-radius:
        50%;

    background:
        var(--green);

    box-sizing:
        content-box;
}

.account-session-status strong,
.account-session-status small {
    display:
        block;
}

.account-session-status strong {
    font-size:
        11px;
}

.account-session-status small {
    margin-top:
        2px;

    color:
        #7d8982;

    font-size:
        9px;
}


/* ==========================================================
   IDENTITY CARD
========================================================== */

.identity-card {
    overflow:
        hidden;

    border:
        1px solid rgba(17, 107, 58, 0.10);

    border-radius:
        24px;

    background:
        white;

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

.identity-card-top {
    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    padding:
        24px;

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

    gap:
        13px;
}

.identity-avatar {
    display:
        grid;

    width:
        52px;

    height:
        52px;

    place-items:
        center;

    border:
        5px solid var(--yellow);

    border-radius:
        50%;

    color:
        white;

    background:
        var(--green);

    font-size:
        22px;

    font-weight:
        900;
}

.identity-title span,
.identity-title strong {
    display:
        block;
}

.identity-title span {
    margin-bottom:
        3px;

    color:
        #909b95;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.12em;
}

.identity-title strong {
    font-size:
        14px;
}

.identity-status {
    padding:
        6px 8px;

    border:
        1px solid #cfe6d9;

    border-radius:
        999px;

    color:
        var(--green);

    background:
        var(--green-soft);

    font-size:
        8px;

    font-weight:
        850;
}

.identity-details {
    padding:
        8px 24px;
}

.identity-row {
    display:
        grid;

    grid-template-columns:
        100px minmax(0, 1fr);

    padding:
        14px 0;

    border-bottom:
        1px solid #eef1ef;

    gap:
        15px;
}

.identity-row:last-child {
    border-bottom:
        0;
}

.identity-row span {
    color:
        #859189;

    font-size:
        10px;

    font-weight:
        650;
}

.identity-row strong {
    overflow:
        hidden;

    font-size:
        11px;

    text-overflow:
        ellipsis;
}

.identity-guest {
    padding:
        30px 24px;
}

.identity-guest p {
    margin:
        0 0 22px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;
}

.identity-guest-line {
    width:
        100%;

    height:
        10px;

    margin-bottom:
        9px;

    border-radius:
        999px;

    background:
        #eef1ef;
}

.identity-guest-line.short {
    width:
        67%;
}

.identity-footer {
    display:
        flex;

    align-items:
        center;

    padding:
        17px 24px;

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

    background:
        #f8faf8;

    gap:
        10px;
}

.identity-shield {
    display:
        grid;

    width:
        30px;

    height:
        30px;

    place-items:
        center;

    border-radius:
        9px;

    color:
        var(--green);

    background:
        var(--green-soft);

    font-size:
        12px;

    font-weight:
        900;
}

.identity-footer strong,
.identity-footer small {
    display:
        block;
}

.identity-footer strong {
    font-size:
        10px;
}

.identity-footer small {
    margin-top:
        2px;

    color:
        #87928b;

    font-size:
        8px;
}


/* ==========================================================
   SERVICES
========================================================== */

.my-services {
    padding:
        88px 0;
}

.section-header {
    display:
        grid;

    grid-template-columns:
        1fr minmax(300px, 0.58fr);

    align-items:
        end;

    margin-bottom:
        34px;

    gap:
        40px;
}

.section-header h2,
.core-copy h2 {
    margin:
        9px 0 0;

    font-size:
        clamp(30px, 4vw, 45px);

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}

.section-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.7;
}

.service-launcher-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        16px;
}

.launcher-card {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        295px;

    padding:
        22px;

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

    border-radius:
        18px;

    background:
        #fff;

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

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

a.launcher-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(17, 107, 58, 0.20);

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

.air-service {
    background:
        linear-gradient(
            150deg,
            #ffffff,
            #eff8f2
        );
}

.pay-service {
    background:
        linear-gradient(
            150deg,
            #ffffff,
            #fff9de
        );
}

.future-service {
    border-style:
        dashed;

    box-shadow:
        none;
}

.launcher-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}

.launcher-icon {
    display:
        grid;

    width:
        46px;

    height:
        46px;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--green);

    background:
        var(--yellow-soft);

    font-size:
        20px;

    font-weight:
        900;
}

.launcher-status {
    padding:
        5px 8px;

    border:
        1px solid #e0e5e1;

    border-radius:
        999px;

    color:
        #7d8982;

    background:
        #f7f9f8;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        0.08em;
}

.launcher-status.active {
    border-color:
        #cbe6d6;

    color:
        var(--green);

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

.launcher-body {
    margin-top:
        21px;
}

.launcher-body h3 {
    margin:
        0 0 8px;

    font-size:
        18px;
}

.launcher-body p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.65;
}

.launcher-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding-top:
        22px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        800;
}

.launcher-footer strong {
    font-size:
        18px;
}

.launcher-footer.muted {
    color:
        #96a099;
}


/* ==========================================================
   CORE
========================================================== */

.core-section {
    padding:
        88px 0;

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

.core-layout {
    display:
        grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap:
        70px;
}

.core-copy p {
    max-width:
        470px;

    margin:
        19px 0 0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;
}

.core-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        13px;
}

.core-card {
    padding:
        20px;

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

    border-radius:
        16px;

    background:
        white;
}

.core-number {
    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    margin-bottom:
        20px;

    border-radius:
        10px;

    color:
        var(--green);

    background:
        var(--green-soft);

    font-size:
        9px;

    font-weight:
        900;
}

.core-card h3 {
    margin:
        0 0 6px;

    font-size:
        14px;
}

.core-card p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.6;
}


/* ==========================================================
   EXISTING AIR ACCOUNT BRIDGE
========================================================== */

.legacy-bridge {
    padding:
        67px 0;

    background:
        var(--green);
}

.bridge-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        white;

    gap:
        50px;
}

.bridge-label {
    color:
        #ffde4a;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.13em;
}

.bridge-panel h2 {
    margin:
        8px 0;

    font-size:
        clamp(26px, 3vw, 38px);

    letter-spacing:
        -0.03em;
}

.bridge-panel p {
    max-width:
        660px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.70);

    font-size:
        11px;

    line-height:
        1.65;
}


/* ==========================================================
   FOOTER
========================================================== */

.account-footer {
    padding:
        31px 0;

    color:
        #c7d0ca;

    background:
        #111c16;
}

.account-footer-inner {
    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        25px;
}

.account-footer-inner > div {
    display:
        flex;

    flex-direction:
        column;
}

.account-footer strong {
    color:
        white;

    font-size:
        14px;

    letter-spacing:
        0.08em;
}

.account-footer span,
.account-footer a {
    font-size:
        9px;
}

.account-footer a:hover {
    color:
        #fff;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1000px) {

    .account-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .identity-card {
        width:
            min(100%, 620px);
    }

    .service-launcher-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .core-layout {
        grid-template-columns:
            1fr;

        gap:
            38px;
    }

}

@media (max-width: 720px) {

    .account-container {
        width:
            min(100% - 28px, 1180px);
    }

    .account-header-inner {
        grid-template-columns:
            1fr auto;

        width:
            min(100% - 24px, 1240px);

        min-height:
            64px;
    }

    .account-header-center,
    .header-link {
        display:
            none;
    }

    .account-logo {
        max-width:
            100px;

        height:
            32px;
    }

    .account-brand span {
        font-size:
            15px;
    }

    .header-button {
        padding:
            8px 11px;

        font-size:
            10px;
    }

    .account-hero {
        padding:
            61px 0;
    }

    .account-hero h1 {
        font-size:
            clamp(42px, 14vw, 58px);
    }

    .account-hero-copy > p {
        font-size:
            14px;
    }

    .guest-actions {
        flex-direction:
            column;
    }

    .button {
        width:
            100%;
    }

    .section-header {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }

    .my-services,
    .core-section {
        padding:
            67px 0;
    }

    .service-launcher-grid,
    .core-grid {
        grid-template-columns:
            1fr;
    }

    .launcher-card {
        min-height:
            260px;
    }

    .bridge-panel {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .account-footer-inner {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .account-footer-inner > div {
        align-items:
            center;
    }

}

@media (max-width: 430px) {

    .identity-card-top {
        grid-template-columns:
            auto 1fr;
    }

    .identity-status {
        grid-column:
            1 / -1;

        width:
            max-content;
    }

    .identity-row {
        grid-template-columns:
            78px minmax(0, 1fr);
    }

}