/* =====================================
   BASE
===================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;color: #3a352f;
}

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

/* =====================================
   WRAPPERS
===================================== */

.wrapper {
  min-height: 100vh;
}

.inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================
   BRAND
===================================== */

.brand {
  text-align: center;
  padding: 1.5rem 0;
}

.brand-mark img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* =====================================
   HEADER
===================================== */

header {
  text-align: center;
  padding-bottom: 2rem;
  background-image: url("/assets/images/tile.png");
  background-repeat: repeat;
  background-size: 128px 128px;
}

header .inner{padding-top:1em}

header figure {
  margin: 2rem 0;
}

.paypal-wrap {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-align: left
}

/* =====================================
   PRODUCT SECTION
===================================== */

section.product {
/*color: #000;*/
  padding-top:0.25rem;
  padding-bottom:1rem;
    background-image: url("/assets/images/blue-tile.png");
    background-repeat: repeat;
    background-size: 98px 98px
}







section.product p {
  /*background-color: #D4DEF1; */
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}






/* Main product image (mobile-first full width) */

section.product figure {
  width: 100%;
  margin: 0;
}

section.product figure img {
  width: 100%;
  height: auto;
}

/* =====================================
   FEATURES
===================================== */

.features {
  margin-top: 3rem;
}


.feature h3,
.feature p {
  /*background-color: #D4DEF1;*/
  padding: 0.75rem 1rem;
}



.feature {
  width: 100%;
  margin-bottom: 2rem;
  text-align: center;
}

.feature figure {
  width: 100%;
  margin: 0;
}

.feature img {
  width: 100%;
  height: auto;
}

/* =====================================
   VARIATIONS
===================================== */

section.variations {
  margin: 4rem 0;
}

.variation {
  width: 100%;
  margin-bottom: 3rem;
  text-align: center;
}

.variation figure {
  width: 100%;
  margin: 0;
}

.variation img {
  width: 100%;
  height: auto;
}

/* =====================================
   TYPOGRAPHY
===================================== */


h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
}


h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0.75rem 0;
}

/* =====================================
   FOOTER
===================================== */

footer {
  text-align: center;
  padding: 2rem 0;
}

/* =====================================
   DESKTOP
===================================== */

@media (min-width: 960px) {

  .inner {
    width: 960px;
  }

  header {
    background-size: 96px 96px;
  }
  
  
  

h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}



  /* Features become a row */

  .features {
    display: flex;
    gap: 3rem;
  }

  .feature {
    flex: 1;
    margin-bottom: 0;
  }

  /* Variation images intentionally reduced on desktop */

  .variation img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Brand mark scale */

  .brand-mark img {
    max-width: 400px;
  }
}



@media (min-width: 48rem) {
  h1 {
    font-size: 2.3rem;
  }
}