/* 1. Hero: navy field, the promise in white and gold, the printed set fanned out on the left
   and the offer card on the right (stacked on phones). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px var(--gutter) clamp(26px, 4vw, 44px);
  background: radial-gradient(115% 85% at 50% 30%, #11426F 0%, #062F57 45%, var(--navy-950) 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; text-align: center; }
.hero .logo { margin-bottom: 14px; }
.hero .eyebrow { margin-bottom: 12px; }
.hero__title {
  margin: 0 auto;
  font: 700 clamp(2.15rem, 1.05rem + 4.2vw, 4.1rem)/1.04 var(--serif);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero__title br { display: none; }
@media (min-width: 700px) { .hero__title br { display: inline; } }
.hero__sub {
  margin-top: 10px;
  font: 700 clamp(1.35rem, 0.85rem + 2vw, 2.35rem)/1.15 var(--serif);
  letter-spacing: -0.012em;
  color: var(--gold-text);
  text-wrap: balance;
}
.hero__lede { max-width: 72ch; margin: 8px auto 0; font-size: clamp(1rem, 0.93rem + 0.35vw, 1.2rem); line-height: 1.45; color: rgb(255 255 255 / 0.92); text-wrap: pretty; }

.hero__stage { display: grid; gap: 22px; margin-top: clamp(20px, 3vw, 30px); text-align: left; }
@media (min-width: 960px) {
  .hero__stage { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); gap: 22px; align-items: start; }
}

/* The printed set: sizes and positions are shares of the collage, so it scales as one piece */
.collage { position: relative; container-type: inline-size; aspect-ratio: 100 / 84; width: 100%; max-width: 680px; margin: 0 auto; }
.sheet {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 34px -12px rgb(0 0 0 / 0.65);
}
.sheet img { border-radius: 3px; }
.sheet--howto { left: 45%; top: 2%; width: 53%; rotate: 3deg; }
.sheet--contents { left: 0%; top: 50%; width: 46%; rotate: -4deg; }
.sheet--genesis { left: 40%; top: 42%; width: 59%; rotate: -2deg; z-index: 3; cursor: zoom-in; transition: translate 200ms var(--ease); }
.sheet--genesis:hover { translate: 0 -4px; }

.binder { position: absolute; left: 5%; top: 3%; width: 36%; z-index: 2; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.55)); }

.badge {
  position: absolute;
  left: 0;
  top: -3%;
  z-index: 4;
  display: grid;
  place-content: center;
  width: 16.5cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFE59A, var(--gold) 55%, var(--gold-deep));
  box-shadow: inset 0 0 0 0.6cqi rgb(255 255 255 / 0.35), 0 10px 22px -8px rgb(0 0 0 / 0.6);
  color: var(--ink);
  font: 700 2.3cqi/1.05 var(--serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}
.badge b { display: block; font-size: 3.3em; line-height: 0.92; letter-spacing: -0.02em; }

/* The offer card */
.buycard {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 18px 20px 16px;
  border: 2px solid var(--gold-line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 26px 50px -18px rgb(0 0 0 / 0.7);
  color: var(--ink);
  text-align: center;
}
.buycard__title { margin-top: 10px; font: 600 clamp(1.45rem, 1.25rem + 0.7vw, 1.75rem)/1.15 var(--serif); letter-spacing: -0.01em; }
.price { margin-top: 4px; font: 700 clamp(3.6rem, 2.9rem + 2.2vw, 4.6rem)/1 var(--serif); letter-spacing: -0.035em; color: var(--ink); }
.buycard__once { margin-top: 4px; font-size: 0.95rem; }
.ticks { display: grid; gap: 8px; width: fit-content; margin: 14px auto 16px; padding: 0; list-style: none; text-align: left; }
.ticks li { display: flex; align-items: center; gap: 10px; font: 400 1.05rem/1.3 var(--serif); }
.tick { flex: none; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: var(--gold-deep); fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font: 600 0.95rem/1 var(--sans); }
.secure__lock { width: 16px; height: 16px; color: var(--ink); }
.buycard .cards { margin-top: 10px; }
.buycard__fine { margin-top: 10px; font-size: 0.92rem; }
.buycard__digital { margin-top: 2px; font-size: 0.92rem; font-weight: 700; }
@media (min-width: 960px) { .buycard { margin: 0; max-width: none; } }

/* Desktop: the mockup's proportions, everything a size up */
@media (min-width: 960px) {
  .hero .logo { font-size: 1.75rem; }
  .eyebrow--gold { font-size: 0.9rem; }
  .hero__title { font-size: clamp(4.1rem, 1rem + 4.1vw, 4.9rem); }
  .hero__sub { font-size: clamp(2.3rem, 0.6rem + 2.3vw, 2.8rem); }
  .hero__lede { font-size: 1.3rem; }
  .buycard { padding: 22px 26px 20px; }
  .eyebrow--navy { font-size: 0.78rem; }
  .buycard__title { font-size: 2.05rem; }
  .price { font-size: 6rem; }
  .buycard__once { font-size: 1.1rem; }
  .ticks { gap: 10px; margin: 18px auto 20px; }
  .ticks li { font-size: 1.22rem; }
  .tick { width: 26px; height: 26px; }
  .buycard .btn { min-height: 60px; font-size: 1.22rem; }
  .secure { font-size: 1.08rem; margin-top: 14px; }
  .secure__lock { width: 19px; height: 19px; }
  .buycard .card { height: 30px; }
  .buycard .card--visa, .buycard .card--amex { width: 60px; }
  .buycard .card--mc { width: 45px; }
  .buycard .card--discover { width: 86px; }
  .buycard__fine { font-size: 1.05rem; }
  .buycard__digital { font-size: 1.05rem; }
}