/* Coffee page: short support page in the same visual language as data/about. */

.coffee-page .data-kicker{
  color: #EFC474;
}

.coffee-hero-inner{
  min-height: 420px;
}

.coffee-hero h1{
  max-width: 900px;
}

.coffee-hero p{
  max-width: 820px;
  margin-top: 22px;
  color: var(--text-main);
  font-size: clamp(1.2rem, 2.2vw, 1.66rem);
  font-weight: 700;
  line-height: 1.35;
}

.coffee-link{
  color: #8FD7C4;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.coffee-link:hover,
.coffee-link:focus-visible{
  color: #B7E3D6;
}

.coffee-content{
  padding-block: 54px 94px;
}

.coffee-grid{
  display: block;
}

.coffee-copy h2{
  font-size: clamp(1.74rem, 2.9vw, 2.55rem);
}

.coffee-copy ul{
  margin: 24px 0 0;
  padding-left: 24px;
  display: grid;
  gap: 14px;
}

.coffee-copy li{
  color: var(--text-main);
  font-size: 1.05rem;
  line-height: 1.56;
}

.coffee-copy p{
  margin-top: 18px;
  max-width: 780px;
}

.coffee-qr--hero{
  margin: 18px 0 0;
}

.coffee-qr img{
  display: block;
  width: 100%;
  max-width: 220px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 22px 72px rgba(0,0,0,0.3);
}

@media (max-width: 900px){
  .coffee-hero-inner{
    min-height: 360px;
  }

  .coffee-content{
    padding-block: 44px 76px;
  }

  .coffee-grid{
    display: block;
  }

  .coffee-qr img{
    max-width: 200px;
  }
}