:root{
    --fa-green:#153d2d;
    --fa-green-2:#214d39;
    --fa-cream:#f5efdf;
    --fa-paper:#fbf8ee;
    --fa-rust:#b35536;
    --fa-gold:#a47b3e;
    --fa-text:#24342c;
    --fa-line:#d5d4c7;
}

body{
    margin:0;
    background:
        linear-gradient(
            145deg,
            #f1ead8,
            #fbf8ef
        );
    color:var(--fa-text);
}

.rb-shell{
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    padding:52px 0 90px;
}

.rb-hero{
    padding:52px;
    border-radius:26px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(180,127,55,.20),
            transparent 28%
        ),
        var(--fa-paper);
    border:1px solid #c9c0a5;
}

.rb-kicker{
    margin-bottom:10px;
    color:var(--fa-rust);
    font-size:11px;
    font-weight:900;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.rb-hero h1,
.rb-product h1{
    margin:0;
    color:var(--fa-green);
    font-family:Georgia,serif;
    line-height:1.03;
}

.rb-hero h1{
    max-width:800px;
    font-size:56px;
}

.rb-hero p{
    max-width:720px;
    font-size:18px;
}

.rb-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(290px,1fr)
        );
    gap:22px;
    margin-top:28px;
}

.rb-card{
    position:relative;
    padding:30px;
    border-radius:19px;
    background:#fffdf5;
    border:1px solid var(--fa-line);
}

.rb-card-mark{
    position:absolute;
    top:22px;
    right:22px;
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:1px solid var(--fa-gold);
    border-radius:50%;
    color:var(--fa-gold);
    font-family:Georgia,serif;
    font-weight:900;
}

.rb-card h2{
    max-width:80%;
    margin:0 0 12px;
    color:var(--fa-green);
    font-family:Georgia,serif;
    font-size:28px;
}

.rb-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:25px;
    padding-top:16px;
    border-top:1px solid var(--fa-line);
}

.rb-card-bottom strong{
    font-size:23px;
    color:var(--fa-green);
}

.rb-card a,
.rb-back{
    color:var(--fa-green);
    font-weight:800;
    text-decoration:none;
}

.rb-back{
    display:inline-block;
    margin-bottom:20px;
}

.rb-product{
    display:grid;
    grid-template-columns:
        minmax(0,1.5fr)
        minmax(300px,.7fr);
    gap:30px;
    align-items:start;
    padding:46px;
    border-radius:27px;
    background:var(--fa-paper);
    border:1px solid #c8bea0;
}

.rb-product h1{
    font-size:55px;
}

.rb-lead{
    max-width:680px;
    font-size:17px;
    line-height:1.7;
}

.rb-feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin-top:28px;
}

.rb-feature-grid > div{
    padding:17px;
    border:1px solid #d3d7ce;
    border-radius:12px;
    background:rgba(255,255,255,.48);
}

.rb-feature-grid strong,
.rb-feature-grid span{
    display:block;
}

.rb-feature-grid strong{
    color:var(--fa-green);
}

.rb-feature-grid span{
    margin-top:4px;
    color:#647168;
    font-size:12px;
}

.rb-buy{
    padding:27px;
    border-radius:19px;
    background:
        linear-gradient(
            145deg,
            var(--fa-green),
            var(--fa-green-2)
        );
    color:#f8f0db;
}

.rb-price{
    font-family:Georgia,serif;
    font-size:48px;
    font-weight:900;
}

.rb-price-note{
    margin-bottom:24px;
    color:#c8d7cc;
    font-size:12px;
}

.rb-buy small{
    display:block;
    margin-top:18px;
    color:#c8d4cc;
    line-height:1.5;
}

.rb-status{
    margin:13px 0;
    font-size:13px;
}

.rb-status--warn{
    padding:12px;
    border-radius:8px;
    background:rgba(255,255,255,.10);
}

.rb-download{
    margin-top:15px;
    padding:15px;
    border-radius:11px;
    background:#f6eed8;
    color:#173c2d;
}

.rb-download strong,
.rb-download a,
.rb-download small{
    display:block;
}

.rb-download a{
    margin:8px 0;
    color:#173c2d;
    font-weight:900;
}

.rb-empty{
    padding:30px;
    background:#fff;
    border-radius:15px;
}

paypal-button{
    width:100%;
    margin-top:10px;
}

@media(max-width:760px){
    .rb-shell{
        width:min(100% - 24px,1120px);
        padding-top:24px;
    }

    .rb-hero,
    .rb-product{
        padding:27px;
    }

    .rb-hero h1,
    .rb-product h1{
        font-size:39px;
    }

    .rb-product{
        grid-template-columns:1fr;
    }

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