/* Sweetie — How It Works Hero */

.swt-how-hero {
  position: relative;
  padding: clamp(160px, 16vw, 220px) var(--swt-gutter) clamp(40px, 6vw, 80px);
  background: var(--swt-paper);
  isolation: isolate;
  overflow: hidden;
}
.swt-how-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--swt-clouds-url);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  z-index: -2;
}
.swt-how-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(253,246,238,0.45) 0%, rgba(253,246,238,0.9) 100%);
  z-index: -1;
}
/* iOS Safari often drops background-attachment: fixed */
@supports (-webkit-touch-callout: none) {
  .swt-how-hero::before { background-attachment: scroll; }
}

.swt-how-hero-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.swt-how-hero .swt-big-title { margin: 0 auto 18px; max-width: 18ch; }
.swt-how-hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--swt-ink-soft);
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-wrap: pretty;
}
.swt-how-hero-image { border: 0; background: transparent; box-shadow: none; }
.swt-how-hero-image img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(58,24,12,0.18));
  border-radius: 24px;
  border: 3px solid var(--swt-ink);
  box-shadow: 10px 10px 0 var(--swt-shadow-pink);
}