:root {
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.414,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  /* Step 0: 16px → 18px */
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  /* Step 0: 18px → 20px */
  --step-05: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  /* Step 1: 19.2px → 25.452px */
  --step-1: clamp(1.2rem, 1.0641rem + 0.6796vw, 1.5908rem);
  /* Step 2: 23.04px → 35.9891px */
  --step-2: clamp(1.44rem, 1.1585rem + 1.4075vw, 2.2493rem);
  /* Step 3: 27.648px → 50.8886px */
  --step-3: clamp(1.728rem, 1.2228rem + 2.5262vw, 3.1805rem);
  /* Step 4: 33.1776px → 71.9565px */
  --step-4: clamp(2.0736rem, 1.2306rem + 4.2151vw, 4.4973rem);
  /* Step 5: 39.8131px → 101.7465px */
  --step-5: clamp(2.4883rem, 1.1419rem + 6.7319vw, 6.3592rem);

  /* Spacing */


  /* Colours */
  --ag-gold: hsla(36, 75%, 43%, 1);
  --ag-black: hsla(0, 0%, 0%, 1);
  --ag-gold-light: hsla(36, 75%, 53%, 1);
  --ag-gold-xlight: hsla(36, 75%, 90%, 1);
  --ag-gold-dark: hsla(36, 75%, 20%, 1)
}



/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1240,16,1.414,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Space 3xs: 4px → 4px */
  --space-1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  /* Space 2xs: 7px → 8px */
  --space-2: clamp(0.4375rem, 0.4158rem + 0.1087vw, 0.5rem);
  /* Space xs: 11px → 12px */
  --space-3: clamp(0.6875rem, 0.6658rem + 0.1087vw, 0.75rem);
  /* Space s: 14px → 16px */
  --space-4: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
  /* Space m: 21px → 24px */
  --space-5: clamp(1.3125rem, 1.2473rem + 0.3261vw, 1.5rem);
  /* Space l: 28px → 32px */
  --space-6: clamp(1.75rem, 1.663rem + 0.4348vw, 2rem);
  /* Space xl: 42px → 48px */
  --space-7: clamp(2.625rem, 2.4946rem + 0.6522vw, 3rem);
  /* Space 2xl: 56px → 64px */
  --space-8: clamp(3.5rem, 3.3261rem + 0.8696vw, 4rem);
  /* Space 3xl: 84px → 96px */
  --space-9: clamp(5.25rem, 4.9891rem + 1.3043vw, 6rem);

}


body {
  margin: 0;
  background: var(--ag-black);
  color: var(--ag-gold-xlight);
  font-size: var(--step-0);
}


.container {
  max-width: 1296px;

  padding-left: 38px;
  padding-right: 48px;

  margin-left: auto;
  margin-right: auto;

}

.h1,
.h2,
.h3,
.display {
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
}

.h1 {
  font-size: var(--step-3);
  letter-spacing: -1.08px;
  line-height: 100%; /* 54px */
}

.h2 {
  font-size: var(--step-2);
  letter-spacing: -0.74px;
  line-height: 125%; /* 46.25px */
}

.h3 {
  font-size: var(--step-1);
}

.display {
  font-size: var(--step-5);
  font-style: normal;
  line-height: 100%; /* 95px */
  letter-spacing: -1.9px;
  text-shadow: 0 4px 26px rgba(40, 27, 17, 0.50);
}

.section-heading {
  width: 100%;
  text-align: center;
}

.col-gold {
  color: var(--ag-gold);
}

.col-gold-light {
  color: var(--ag-gold-light);
}

.button {
  display: block;
  width: fit-content;
  padding: 20px var(--space-6) 16px var(--space-6);
  border-radius: var(--space-2);
  border: none;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  font-size: var(--step-1);

  text-decoration: none;
  color: var(--ag-black);
  background: linear-gradient(180deg, #E5A94D 0%, #E19A2E 100%);

  line-height: 1;
  /* Text scrim shadow */
  box-shadow: 0 4px 26px 0 rgba(40, 27, 17, 0.50);
}

.button:hover {
  background: linear-gradient(180deg, #f2b361 0%, #eda12f 100%);
}


/* ==========================================================================
   Notification strip
   ========================================================================== */

.notification {
  position: relative;
  padding: 12px 24px;

  background: var(--ag-gold);
  color: var(--ag-gold-xlight);
  font-weight: 600;
  text-align: center;
  font-size: var(--step-0);
  box-shadow: 0 0 16px 0 rgba(40, 27, 17, 0.25);
}


/* ==========================================================================
   Hero section
   ========================================================================== */

.hero {
  background-image:
          linear-gradient(270deg, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.50) 100%),
          url("../img/tractor-sunset.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 750px;
}

.hero .display {
  max-width: 750px;
  margin-bottom: 24px;
}

.hero .h2 {
  max-width: 560px;
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 16px rgba(40, 27, 17, 1);
}

.hero p {
  max-width: 420px;
  margin-bottom: 24px;
  text-wrap: pretty;
  text-shadow: 0 2px 16px rgba(40, 27, 17, 1);
}

.logo-box {
  display: block;
  width: fit-content;
  padding: 24px;
  margin-bottom: 32px;

  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background: var(--ag-black);
}

.logo {
  display: block;
  width: 100px;
}

@media (min-width: 50rem) {
  .logo {
    width: 140px;
  }
}



/* ==========================================================================
   How it works sections
   ========================================================================== */

.how {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);

  padding-block: var(--space-9);
  border-bottom: 1px solid var(--ag-gold-light);
}

.how__img {
  width: 90%
}

@media (min-width: 56rem) {
  .how {
    flex-direction: row;
    align-items: center;
  }

  .how__img {
    width: 391px;
    min-width: 0;
  }
}

.how__title > span {
  color: var(--ag-gold-light);
}

.steps {
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0;
  margin-block: var(--space-6);
}

.steps li {
  counter-increment: inst;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--step-05);
}

.steps li:before {
  content: counter(inst);

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  background: hsla(36, 75%, 90%, 0.25);
  border-radius: 50%;

  font-weight: 900;
  color: var(--ag-gold-light);
}

.pricing {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-5);

  gap: var(--space-3);

  border-radius: var(--space-4);
  background: hsla(36, 75%, 90%, 0.25);
  color: var(--ag-gold-light);
}

@media (min-width: 27rem) {
  .pricing {
    flex-direction: row;
    gap: var(--space-6);
  }
}

.monthly {
  position: relative;
  width: fit-content;
}

.monthly > small {
  font-size: var(--step-0);
}

.monthly__strikethrough {
  position: absolute;
  top: 10%;
  left: 0;
}

.pricing__note {
 font-size: var(--step-05);
  color: var(--ag-gold);
}

.free {
  color: var(--ag-gold-xlight);
}


/* ==========================================================================
   INfo section
   ========================================================================== */

.info {
  display: flex;

  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-9);
}

.info__left {
  width: 100%;
  display: flex;

  gap: var(--space-6);

}



.info__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50%;

  gap: var(--space-3);
}

.info__block--long {
  width: 100%;
}

.info__block img {
  width: var(--space-6);
}

.info__block__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);

}

.info__list {
  list-style: none;
  margin-left: calc(var(--space-6) - var(--space-1));
  padding: 0;
}

.info__list--long {
  width: 100%;
  columns: 3;
}

@media (max-width: 27rem) {
  .info__block {
    width: 100%;
  }

  .info__left {
    flex-direction: column;
  }
}


@media (max-width: 29rem) {
  .info__list--long {
    columns: 2;
  }
}

@media (min-width: 56rem) {
  .info {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
  }

  .info__left {
    justify-content: flex-start;
  }
}

@media (min-width: 68rem) {
  .info__list--long {
    columns: 4;
  }
}

.info__list > li {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.info__list > li::before {
  content: "";
  display: block;
  width: var(--space-1);
  height: var(--space-1);
  background: var(--ag-gold);
  border-radius: 50%;
}


/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
  padding-block: var(--space-9);
  background: linear-gradient(0deg, #EBBE7A 0%, #F2D4A6 100%);
  color: var(--ag-gold);
}

.customers {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  margin-bottom: var(--space-7);
}

.customers > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  width: 33%;

  border-radius: var(--space-3);
  border-top: 1px solid #fff;
  background: #F6E1C1;
  color: var(--ag-gold-dark);
  text-align: left;
  box-shadow: 0 6px 24px 0 rgba(193, 128, 28, 0.20);
}

.customers__photo {
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ag-gold-light);
}

.customers__name {
  font-weight: 700;
}

@media (max-width: 47rem) {
  .customers {
    flex-direction: column;
  }

  .customers > li {
    width: 100%;
  }

  .testimonials .section-heading {
    text-align: left;
  }
}

@media (max-width: 60rem) {

  .customers > li {
    font-size: var(--step-0);
  }
  .customers__photo {
    width: 100px;
    height: 100px;
  }
}

.divider {
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

@media (max-width: 47rem) {
  .divider {
    display: none;
  }
}

.logos-panel {
  margin-block: var(--space-6);
  border-radius: var(--space-4);
  overflow: hidden;
  background: #fff;
  box-shadow: 2px 4px 24px 0px rgba(0, 0, 0, 0.05) inset, 0 6px 24px 0 rgba(193, 128, 28, 0.20);;
}

.logos-panel img {
  position: relative;
  z-index: 0;
  mix-blend-mode: multiply
}

.growing span {
  color: var(--ag-gold-dark);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-bottom: var(--space-9);
}

.cta .button {
  flex-shrink: 0;
}

.cta img {
  min-width: 0;
}

@media (max-width: 38rem) {
  .cta img {
    display: none;
  }

  .cta .button {
    width: 100%;
    text-align: center;
  }
}


/* ==========================================================================
   Why AG-HAND
   ========================================================================== */

.why {
  padding-block: var(--space-9);
  text-align: center;
}

.why .h1 {
  color: var(--ag-gold);
}

.benefits {
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding: 0;
}

.benefits > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  list-style: none;
  text-align: left;
}

.benefits > li img {
  width: var(--space-7);
}

@media (width < 40rem) {
  .benefits {
    flex-direction: column;
  }

  .why .section-heading {
    text-align: left;
  }
}

@media (width > 40rem) and (width < 50rem) {
  .benefits > li {
    flex-direction: column;
  }
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-block: var(--space-8);
  border-top: 1px solid var(--ag-gold);
}