:root{
    --bg-start:#540F0F;
    --bg-end:#1A1111;
    --surface:#2A1919;
    --surface-strong:#3B2423;
    --text:#FFDAD6;
    --muted:#E8BDB8;
    --title:#FFB4AC;
    --accent:#D8746D;
    --accent-strong:#FFD2CE;
    --border:rgba(255,210,206,.28);
    --shadow:0 22px 70px rgba(0,0,0,.28);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
    min-height:100vh;
    background:linear-gradient(to bottom,var(--bg-start),var(--bg-end));
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    color:var(--text);
    line-height:1.5;
}

a{color:inherit}

.page{
    width:min(1120px, calc(100% - 2rem));
    margin:0 auto;
    padding:2rem 0 3.5rem;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.25rem 0 2rem;
}

.brand{
    display:flex;
    align-items:center;
    gap:.85rem;
    min-width:0;
}

.brand img{
    width:3rem;
    height:3rem;
    border-radius:.75rem;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.brand strong{
    display:block;
    color:var(--title);
    font-size:1.15rem;
    font-weight:700;
}

nav{
    display:flex;
    align-items:center;
    gap:.4rem;
    flex-wrap:wrap;
    justify-content:flex-end;
}

nav a{
    min-height:2.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.55rem .85rem;
    border:1px solid transparent;
    border-radius:.45rem;
    color:var(--muted);
    text-decoration:none;
    font-weight:650;
    font-size:.95rem;
}

nav a:hover{
    border-color:var(--border);
    background:rgba(255,255,255,.05);
    color:var(--text);
}

.hero{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(18rem,.7fr);
    gap:2rem;
    align-items:center;
    padding:2rem 0 3rem;
}

.hero-copy{
    max-width:43rem;
}

.eyebrow{
    color:var(--accent-strong);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.75rem;
}

h1{
    color:var(--title);
    font-size:clamp(2.6rem, 6vw, 5.25rem);
    line-height:.95;
    letter-spacing:0;
    margin-bottom:1rem;
}

.lead{
    color:var(--muted);
    max-width:38rem;
    font-size:1.12rem;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.6rem;
}

.button{
    min-height:3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:.75rem 1rem;
    border-radius:.5rem;
    border:1px solid var(--accent-strong);
    background:var(--accent-strong);
    color:#321312;
    text-decoration:none;
    font-weight:800;
    cursor:pointer;
}

.button.secondary{
    background:transparent;
    color:var(--accent-strong);
}

.button[aria-disabled="true"]{
    cursor:not-allowed;
    opacity:.55;
    border-color:var(--border);
    background:rgba(255,255,255,.04);
    color:var(--muted);
}

.button svg{
    width:1.2rem;
    height:1.2rem;
    flex:0 0 auto;
}

.app-card{
    background:linear-gradient(160deg, rgba(255,218,214,.12), rgba(255,255,255,.04));
    border:1px solid var(--border);
    border-radius:.5rem;
    box-shadow:var(--shadow);
    padding:1.25rem;
}

.app-icon{
    width:100%;
    aspect-ratio:1/1;
    display:grid;
    place-items:center;
    margin-bottom:1rem;
}

.app-icon img{
    width:min(72%, 14rem);
    height:auto;
    border-radius:1.5rem;
    box-shadow:0 18px 40px rgba(0,0,0,.3);
}

.meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    color:var(--muted);
    font-size:.9rem;
}

section{
    padding:2.1rem 0;
    border-top:1px solid rgba(255,210,206,.16);
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:end;
    margin-bottom:1.1rem;
}

h2{
    color:var(--title);
    font-size:1.65rem;
    line-height:1.15;
}

.section-head p{
    max-width:32rem;
    color:var(--muted);
}

.downloads-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1rem;
}

.download-card{
    min-height:15rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:1.25rem;
    padding:1.1rem;
    background:rgba(42,25,25,.84);
    border:1px solid var(--border);
    border-radius:.5rem;
}

.download-card h3{
    color:var(--text);
    font-size:1.12rem;
    line-height:1.25;
    margin-bottom:.35rem;
}

.download-card p{
    color:var(--muted);
}

.pill{
    width:max-content;
    display:inline-flex;
    align-items:center;
    min-height:1.75rem;
    padding:.25rem .55rem;
    border:1px solid var(--border);
    border-radius:.4rem;
    color:var(--accent-strong);
    font-size:.78rem;
    font-weight:800;
}

.rules{
    max-width:58rem;
    display:block;
}

.rule-block{
    display:grid;
    grid-template-columns:12rem minmax(0,1fr);
    gap:1.5rem;
    padding:1.35rem 0;
    border-top:1px solid rgba(255,210,206,.18);
}

.rule-intro{
    display:block;
    padding-top:0;
    border-top:0;
    margin-bottom:.35rem;
}

.rule-block h3{
    color:var(--title);
    font-size:1rem;
    line-height:1.25;
    margin:0;
    position:sticky;
    top:1rem;
    align-self:start;
}

.rule-block p,
.rule-block li,
.rule-block span{
    color:var(--muted);
}

.rule-intro h3{
    color:var(--title);
    font-size:1.35rem;
    margin-bottom:.7rem;
}

.rule-intro p{
    max-width:48rem;
    font-size:1.03rem;
}

.rule-block p + p{
    margin-top:.65rem;
}

.rule-block ul,
.rule-block ol{
    padding-left:1.2rem;
}

.rule-block li::marker{
    color:var(--accent-strong);
}

.rule-block li + li{
    margin-top:.75rem;
}

.rule-block strong{
    display:block;
    color:var(--text);
    margin-bottom:.25rem;
}

.rule-block li span{
    display:block;
}

.rule-block li span + span{
    margin-top:.5rem;
}

footer{
    padding-top:1rem;
    color:var(--muted);
    font-size:.9rem;
}

@media (max-width: 840px){
    .hero{
        grid-template-columns:1fr;
        padding-top:1rem;
    }

    .app-card{
        max-width:28rem;
    }

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

    .rule-block{
        grid-template-columns:9rem minmax(0,1fr);
        gap:1rem;
    }

    .section-head{
        display:block;
    }

    .section-head p{
        margin-top:.45rem;
    }
}

@media (max-width: 560px){
    .page{
        width:min(100% - 1rem, 1120px);
        padding-top:.75rem;
    }

    header{
        align-items:flex-start;
        flex-direction:column;
        padding-bottom:1.1rem;
    }

    nav{
        width:100%;
        justify-content:flex-start;
    }

    nav a{
        flex:1 1 auto;
        padding:.55rem .65rem;
    }

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

    .rule-block{
        display:block;
    }

    .rule-block h3{
        position:static;
        margin-bottom:.7rem;
    }

    .actions .button{
        width:100%;
    }
}