/* =====================================================================
   HP - Swiss Gold promo band. Full-bleed gold strip with a black top rule:
   "Swiss Gold at 0% Premium" + "Buy gold at spot price." beside a black
   "Download OneGold now" pill. Tokens + the band's gold accent.
   ===================================================================== */

.hp-swiss-promo {
  background: var(--hp-swiss-gold, #d4a24e);
  border-top: 2px solid var(--gray-8);
}

.hp-swiss-promo__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding-block: 28px;
}

.hp-swiss-promo__text {
  text-align: center;
}
.hp-swiss-promo__heading {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: 1.2;
  color: var(--gray-8);
  word-break: break-word;
}
.hp-swiss-promo__subtitle {
  margin: 4px 0 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: rgba(0, 0, 0, 0.58);
}

/* Black pill, gold label */
.hp-swiss-promo__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--gray-8);
  color: var(--hp-swiss-gold, #d4a24e);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.hp-swiss-promo__cta:hover { background: #111111; }

/* Tablet (768–1023): Archetype C — flex wraps naturally; step heading */
@media (max-width: 1023.98px) {
  .hp-swiss-promo__inner {
    gap: 24px;
    padding-block: 24px;
  }
  .hp-swiss-promo__heading { font-size: var(--fs-28); }
}

/* Large-mobile (600–767): step heading further */
@media (max-width: 767.98px) {
  .hp-swiss-promo__heading { font-size: var(--fs-26); }
}

/* Phone (≤599): stack column */
@media (max-width: 599.98px) {
  .hp-swiss-promo__inner {
    flex-direction: column;
    gap: 18px;
    padding-block: 24px;
  }
  .hp-swiss-promo__cta { white-space: normal; text-align: center; }
}

/* ---- Desktop: show the app-store QR instead of the tap button ----
   (you can't scan a QR on the phone you're holding, so the button stays on
   mobile). Desktop-first to match this file's convention. */
.hp-swiss-promo__qr {
  flex: none;
  display: inline-flex;
  padding: 8px;
  background: var(--gray-0);
  border-radius: 12px;
  line-height: 0;
}
.hp-swiss-promo__qr img { display: block; width: 96px; height: 96px; }
.hp-swiss-promo__cta { display: none; } /* hidden on desktop; QR shown instead */

/* Mobile (≤767): swap QR for the tap button (you can't scan a QR on the phone
   you're holding). Restored from a phone-only ≤599 scope the responsive overhaul
   introduced, which wrongly showed the QR on 600–767. */
@media (max-width: 767.98px) {
  .hp-swiss-promo__qr { display: none; }         /* no QR on mobile */
  .hp-swiss-promo__cta { display: inline-flex; } /* tap button on mobile */
}

/* ---- Decorative real bar (desktop only) ----
   Rises out of the band's bottom edge at the container's left edge, cropped by
   the band like the Figma frame. Hidden below 1024px, where the band centres
   and stacks and there is no free space beside the text. */
.hp-swiss-promo { position: relative; overflow: hidden; }
.hp-swiss-promo__bar { display: none; }
@media (min-width: 1024px) {
  .hp-swiss-promo__bar {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc((100% - var(--container)) / 2);
    width: 258px;          /* fixed: a taller band (wrapped heading) must not widen it */
    height: auto;
    pointer-events: none;
  }
  /* Reserve the bar's footprint; keep text + QR on one row and let the heading wrap */
  .hp-swiss-promo__inner { padding-left: 274px; flex-wrap: nowrap; }
  .hp-swiss-promo__text { flex: 0 1 auto; min-width: 0; }
}