:root {
    --yellow: #fbcc00;
    --yellow-light: #ffe36b;
    --ink: #111;
    --muted: #5e5e5e;
    --paper: #fffdf4;
    --white: #fff;
    --line: rgba(17, 17, 17, .14);
    --shadow: 0 22px 60px rgba(17, 17, 17, .14)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased
}

img {
    display: block;
    max-width: 100%
}

a {
    color: inherit
}

h1, h2, h3, p {
    margin-top: 0
}

h1, h2, h3 {
    line-height: 1.12;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(2.7rem, 7vw, 5.8rem);
    margin-bottom: 24px
}

h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin-bottom: 18px
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 10px
}

p {
    color: var(--muted)
}

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

.skip-link {
    position: absolute;
    left: -9999px
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 999;
    background: var(--white);
    padding: 10px 14px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 204, 0, .94);
    border-bottom: 1px solid rgba(17, 17, 17, .12);
    backdrop-filter: blur(14px)
}

.nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.3rem;
    text-decoration: none
}

.brand img {
    width: 50px;
    height: 50px;
    border-radius: 13px
}

.nav-links, .footer-links {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav-links a, .footer-links a {
    text-decoration: none;
    font-weight: 600;
    font-size: .94rem
}

.nav-links a:hover, .footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 5px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(17, 17, 17, .2)
}

.button--light {
    background: var(--white);
    color: var(--ink)
}

.hero {
    overflow: hidden;
    background: var(--yellow);
    padding: 39px 0 92px
}

.hero-grid {
    display: grid;
    grid-template-columns:1.08fr .92fr;
    gap: 70px;
    align-items: center
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 7px 13px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hero-copy > p {
    max-width: 680px;
    color: #2b2b2b;
    font-size: 1.15rem
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 30px
}

.app-store {
    width: 172px
}

.hero-note {
    margin: 18px 0 0;
    font-size: .88rem
}

.app-preview {
    position: relative;
    min-height: 620px;
    padding: 32px 34px 0;
    border: 2px solid var(--ink);
    border-radius: 34px;
    background: #161616;
    box-shadow: 14px 14px 0 rgba(17, 17, 17, .18);
    overflow: hidden
}

.preview-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    color: var(--white);
    text-align: center
}

.preview-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--yellow);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.preview-copy strong {
    display: block;
    color: var(--yellow);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -.03em;
    -webkit-text-stroke: 1px var(--ink);
    paint-order: stroke fill;
    text-shadow: 1px 1px 0 var(--ink)
}

.preview-screens {
    position: absolute;
    inset: 168px 22px 44px
}

.preview-screen {
    position: absolute;
    bottom: -70px;
    width: 235px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .42)
}

.preview-screen--back {
    left: 8px;
    transform: rotate(-7deg);
    opacity: .78
}

.preview-screen--front {
    right: 4px;
    z-index: 2;
    transform: rotate(4deg)
}

.preview-points {
    position: absolute;
    z-index: 4;
    left: 28px;
    right: 28px;
    bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.preview-points span {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(17, 17, 17, .78);
    color: var(--white);
    font-size: .76rem;
    font-weight: 600;
    backdrop-filter: blur(8px)
}

.section {
    padding: 50px 0
}

.section--dark {
    background: var(--ink);
    color: var(--white)
}

.section--dark p {
    color: #c9c9c9
}

.section-heading {
    max-width: 760px;
    margin-bottom: 48px
}

.feature-grid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 16px
}

.feature {
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white)
}

.feature-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 30px;
    border-radius: 12px;
    background: var(--yellow);
    font-weight: 800
}

.feature p {
    margin-bottom: 0;
    font-size: .92rem
}

.showcase {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 22px;
    align-items: center
}

.showcase img {
    width: 100%;
    border: 7px solid #252525;
    border-radius: 28px;
    background: #222;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3)
}

.showcase img:nth-child(2), .showcase img:nth-child(4) {
    transform: translateY(28px)
}

.split {
    display: grid;
    grid-template-columns:.9fr 1.1fr;
    gap: 72px;
    align-items: start
}

.benefit-list, .faq {
    display: grid;
    gap: 14px
}

.benefit, details, .content-card, .support-card {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white)
}

.benefit strong {
    display: block;
    margin-bottom: 4px
}

.benefit p {
    margin: 0
}

details {
    padding: 18px 22px
}

summary {
    cursor: pointer;
    font-weight: 700
}

details p {
    margin: 14px 0 0
}

.cta {
    padding: 64px;
    border: 2px solid var(--ink);
    border-radius: 32px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px
}

.cta h2 {
    max-width: 700px;
    margin-bottom: 10px
}

.cta p {
    margin-bottom: 0;
    color: #2d2d2d
}

.page-hero {
    padding: 39px 0 46px;
    background: var(--yellow)
}

.page-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.8rem)
}

.page-content {
    padding: 64px 0 96px
}

.prose {
    max-width: 860px
}

.prose h2 {
    font-size: 1.75rem;
    margin-top: 42px
}

.prose h3 {
    font-size: 1.2rem;
    margin-top: 28px
}

.prose ul {
    padding-left: 22px;
    color: var(--muted)
}

.support-layout {
    display: grid;
    grid-template-columns:.8fr 1.2fr;
    gap: 48px
}

.support-form {
    display: grid;
    gap: 18px
}

.field {
    display: grid;
    gap: 7px
}

.field label {
    font-weight: 700
}

.field input, .field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    font: inherit
}

.field input:focus, .field textarea:focus {
    outline: 3px solid rgba(251, 204, 0, .45);
    border-color: var(--ink)
}

.form-status {
    padding: 14px 16px;
    border-radius: 14px;
    background: #f2f2f2
}

.form-status--success {
    background: #e8f7e8
}

.form-status--error {
    background: #fff0f0
}

.honeypot {
    position: absolute;
    left: -9999px
}

.site-footer {
    padding: 48px 0;
    background: var(--ink);
    color: var(--white)
}

.footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.footer-links a {
    color: #d8d8d8
}

.copyright {
    color: #aaa;
    font-size: .86rem;
    margin-top: 8px
}

@media (max-width: 980px) {
    .hero-grid, .split, .support-layout {
        grid-template-columns:1fr
    }

    .app-preview {
        min-height: 650px;
        max-width: 720px
    }

    .preview-screen {
        width: 265px
    }

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

    .showcase {
        grid-template-columns:repeat(3, 1fr)
    }

    .showcase img:nth-child(4), .showcase img:nth-child(5) {
        display: none
    }

    .cta {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (max-width: 700px) {
    .container {
        width: min(100% - 28px, 1180px)
    }

    .nav-links a:not(.button) {
        display: none
    }

    .hero {
        padding: 58px 0 64px
    }

    .hero-grid {
        gap: 32px
    }

    .app-preview {
        min-height: 540px;
        padding: 24px 18px 0;
        border-radius: 26px
    }

    .preview-screens {
        inset: 156px 10px 42px
    }

    .preview-screen {
        width: 190px;
        bottom: -28px
    }

    .preview-screen--back {
        left: -10px
    }

    .preview-screen--front {
        right: -6px
    }

    .preview-points {
        left: 18px;
        right: 18px
    }

    .section {
        padding: 72px 0
    }

    .feature-grid {
        grid-template-columns:1fr
    }

    .showcase {
        grid-template-columns:repeat(2, 1fr);
        gap: 14px
    }

    .showcase img:nth-child(3) {
        display: none
    }

    .showcase img:nth-child(2) {
        transform: translateY(18px)
    }

    .cta {
        padding: 34px 26px
    }

    .footer-grid {
        align-items: flex-start;
        flex-direction: column
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 18px
    }

    .page-content {
        padding: 48px 0 72px
    }
}