/* Relevant values from Compra's header.php, website.php and loaded stylesheets. */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: #fff;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}
.container { margin-inline: auto; padding-inline: 15px; }
.header {
    position: fixed;
    top: 0;
    z-index: 1041;
    width: 100%;
    height: 60px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 5px 10px 2px rgba(82, 82, 82, .5);
}
.logo { display: block; width: 40px; height: 40px; margin-inline: auto; }
.logo img { display: block; width: 100%; height: 100%; }
main { padding-top: 61px; }
.hero { background: #f8cd45; }
.hero-copy { padding-block: 50px; }
h1 { margin: 0 0 30px; font-size: 40px; font-weight: 700; line-height: 1.1; }
.hero-copy p { margin: 0 0 30px; font-size: 20px; font-weight: 500; line-height: 1.1; }
.hero-copy .price { font-size: clamp(28px, 4vw, 36px); font-weight: 700; }
.button {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #212c37;
    color: #ededed;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3333333;
    text-align: center;
    text-decoration: none;
    transition: background-color .5s;
}
.button:hover { background: #111519; }
a:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.hero-mobile-image { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
    .container { width: 750px; }
    .header { height: 95px; }
    .logo { width: 75px; height: 75px; margin: 0; }
    main { padding-top: 96px; }
    .hero { background-image: url('../images/website.jpg'); background-size: cover; background-position: left top; padding-block: 50px; }
    .hero-copy { width: 50%; padding-block: 0; }
    .hero-mobile-image { display: none; }
}
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }