* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #d9d1c2;
    color: #242a31;
    font: 15px/1.7 system-ui, -apple-system, Segoe UI, sans-serif
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: radial-gradient(#000 .6px, transparent .7px);
    background-size: 5px 5px
}

.legal-page {
    max-width: 850px;
    margin: auto;
    padding: 35px 22px 80px
}

.back {
    display: inline-block;
    color: #263548;
    text-decoration: none;
    font-weight: 850;
    letter-spacing: .08em;
    margin-bottom: 24px
}

.legal-card {
    background: #eee7d9;
    border: 1px solid #242a3128;
    border-radius: 24px;
    padding: 42px;
    box-shadow: 0 18px 45px #242a311f;
    position: relative;
    overflow: hidden
}

.legal-card:after {
    content: "SCANPASS";
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 110px;
    font-weight: 900;
    opacity: .045;
    transform: translate(-50%, -50%) rotate(-24deg);
    letter-spacing: -0.04em;
    pointer-events: none;
    white-space: nowrap;
}

h1 {
    font-size: 52px;
    line-height: 1;
    letter-spacing: -.06em;
    margin: 20px 0 5px
}

h2 {
    margin-top: 35px;
    font-size: 20px
}

.date {
    color: #66707a;
    font: 11px ui-monospace, monospace;
    letter-spacing: .12em
}

.stamp {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 2px solid #8f8aa8;
    border-radius: 50%;
    color: #8f8aa8;
    font-size: 9px;
    font-weight: 800;
    transform: rotate(-8deg);
    opacity: .65
}

@media(max-width:600px) {
    .legal-card {
        padding: 25px
    }

    h1 {
        font-size: 39px
    }
}