.bonus-device {
  --cover-ink: #f8f3eb;
  --cover-paper: #25373d;
  --cover-accent: #ffb987;
  width: min(100%, 340px);
  margin: 12px auto;
  padding: clamp(13px, 3vw, 25px);
  border: 1px solid #11100e15;
  border-radius: 20px;
  background: radial-gradient(ellipse at 24% 8%, #fffdf9, #eee7de 76%);
}
.bonus-device--cream {
  --cover-ink: #231b15;
  --cover-paper: #f7eee1;
  --cover-accent: #a1440e;
}
.bonus-device--sage {
  --cover-ink: #1e2e25;
  --cover-paper: #d9e1d8;
  --cover-accent: #82401b;
}
.bonus-device__frame {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  padding: clamp(5px, 1.15vw, 9px);
  border: 1px solid #777a75;
  border-radius: clamp(13px, 2vw, 22px);
  background: linear-gradient(138deg, #454746, #161817 28%, #080908 72%, #383a38);
  box-shadow: inset 0 0 0 1px #141615, 7px 13px 21px #211b1533;
}
.bonus-device__frame::before {
  position: absolute;
  top: 3px;
  left: calc(50% - 1px);
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5d676c;
  content: "";
}
.bonus-device__cover {
  position: relative;
  display: grid;
  aspect-ratio: 3 / 4;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 9% 9% 8%;
  border-radius: 9px;
  background: var(--cover-paper);
  color: var(--cover-ink);
  font-family: var(--sans);
  text-align: left;
}
.bonus-device__brand, .bonus-device__footer {
  position: relative;
  z-index: 1;
  font-size: clamp(.45rem, 4.4cqi, .67rem);
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.22;
  text-transform: uppercase;
}
.bonus-device__brand {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
}
.bonus-device__name { position: relative; z-index: 1; padding-bottom: 21%; }
.bonus-device__name p {
  margin: 0 0 5px;
  color: var(--cover-accent);
  font-size: clamp(.53rem, 5cqi, .72rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bonus-device__name strong {
  display: block;
  color: var(--cover-ink);
  font-size: clamp(.94rem, 10.4cqi, 2rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .98;
  overflow-wrap: break-word;
}
.bonus-device__name > span {
  display: block;
  margin-top: 5px;
  color: var(--cover-accent);
  font-size: clamp(.65rem, 6.9cqi, 1.15rem);
  font-weight: 650;
  line-height: 1.18;
}
.bonus-device__art {
  position: absolute;
  right: 3%;
  bottom: 13%;
  width: 44%;
  height: auto;
  color: var(--cover-accent);
  opacity: .7;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.bonus-device__footer { padding-top: 7px; border-top: 1px solid currentColor; }


/* Keep the original three tablet covers as the interactive bonus buttons. */
.bonus-card .bonus-visual{display:block;height:auto;padding:0;background:transparent;border:0;overflow:visible;border-radius:0}
.bonus-card .bonus-visual .bonus-device{margin:0 auto;width:min(100%,340px)}
.bonus-card .bonus-device__name p{line-height:1.6}
.bonus-card .bonus-device__name strong{font-family:var(--sans)}
.brand-with-portrait{flex-direction:row;align-items:center;gap:14px}
.brand-wordmark{display:flex;flex-direction:column;line-height:1}
.portrait{display:block;width:64px;height:64px;flex-shrink:0;object-fit:cover;border:2px solid #c7520038;border-radius:50%;padding:3px;background:#fff}
@media(max-width:760px){header{height:auto;min-height:92px;gap:14px;flex-wrap:wrap;padding:14px 0}.portrait{width:56px;height:56px;padding:2px}.brand-with-portrait{gap:12px}.brand-wordmark .brand-small{font-size:8px;letter-spacing:2.8px}nav{margin-left:auto;gap:13px}.bonus-card .bonus-visual .bonus-device{width:min(100%,340px)}}
@media(max-width:430px){header nav{width:100%;justify-content:space-between;padding-bottom:3px}.brand-with-portrait{gap:12px}}