html {
    scroll-behavior: smooth
}

body {
    font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-wrap {
    max-width: 1120px;
    margin: auto;
    padding: 0 20px
}

/* ---- soft paper cards (replaces glass/neon look) ---- */
.card {
    border-radius: 28px;
    background: #FFFFFF;
    border: 1px solid #F3E5D8;
    box-shadow: 0 18px 40px rgba(43, 36, 32, .06)
}

.card-alt {
    border-radius: 28px;
    background: #FFF3EA;
    border: 1px solid #F3E5D8;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    background: #FFE7D9;
    color: #E85D2A;
    font-weight: 800;
    font-size: .8rem;
    padding: .4rem .9rem;
    letter-spacing: .02em;
}

.grad-text {
    background: linear-gradient(90deg, #FF9A56, #FF5FA2 65%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

/* ---- buttons: soft, rounded, warm shadow (not gradient-heavy neon) ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: .95rem 1.5rem;
    font-weight: 800;
    transition: .2s;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-primary {
    background: #FF7A45;
    color: #fff;
    box-shadow: 0 14px 30px rgba(255, 122, 69, .35)
}

.btn-soft {
    background: #fff;
    color: #2B2420;
    border: 2px solid #F3E5D8;
}

.btn-soft:hover {
    border-color: #FF7A45;
    color: #FF7A45;
}

/* ---- content / legal pages ---- */
.content h2 {
    font-size: 1.35rem;
    font-weight: 900;
    margin-top: 1.75rem;
    margin-bottom: .6rem;
    color: #2B2420
}

.content p,
.content li {
    color: #6F645C;
    line-height: 1.85
}

.content ul {
    padding-left: 1.2rem;
    list-style: disc
}

.content a {
    color: #FF7A45;
    font-weight: 700;
}

/* ---- nav: pill-style active state instead of underline links ---- */
.nav-link {
    color: #6F645C;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 700;
    transition: .15s;
}

.nav-link:hover {
    color: #2B2420;
    background: #FFF3EA;
}

.nav-link.active {
    color: #FF7A45;
    background: #FFE7D9;
}

/* ---- tile motif elements used across the site ---- */
.tile-swatch {
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(43, 36, 32, .12);
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---- phone preview frame (very different from reference's dark "phone" class) ---- */
.phone-frame {
    border-radius: 40px;
    background: #FFF9F4;
    border: 10px solid #2B2420;
    box-shadow: 0 30px 60px rgba(43, 36, 32, .18);
    overflow: hidden;
}

.menu-btn {
    transition: .2s
}

.menu-btn:active {
    transform: scale(.92)
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(43, 36, 32, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease
}

.drawer-overlay.open {
    opacity: 1
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    height: 100dvh;
    width: 84%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: #FFF9F4;
    border-left: 1px solid #F3E5D8;
    box-shadow: -20px 0 60px rgba(43, 36, 32, .18);
    transform: translateX(100%);
    transition: transform .3s ease;
}

.mobile-drawer.open {
    transform: translateX(0)
}

.drawer-link {
    display: block;
    border-radius: 16px;
    padding: .9rem 1.1rem;
    font-size: 1rem;
    font-weight: 800;
    color: #6F645C;
    transition: .15s
}

.drawer-link:hover,
.drawer-link:active {
    background: #FFE7D9;
    color: #FF7A45
}

body.drawer-lock {
    overflow: hidden
}

@media(max-width:767px) {
    .page-wrap {
        padding: 0 16px
    }

    .btn {
        width: 100%
    }

    h1 {
        word-break: break-word
    }

    .phone-frame {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto
    }
    .my-btn-support {
        display: none !important;
    }
}

@media(max-width:420px) {
    header .page-wrap {
        height: 4.25rem
    }

    header img {
        height: 2.25rem;
        width: 2.25rem
    }

    header span.text-lg {
        font-size: 1rem
    }
}