/* Widget 8 — end-of-article app cutout. Sample values (lines 245-259):
   brand gradient r20, padding 28/30, brand shadow, 56px translucent mark,
   title 19/700 white, sub 14.5 at 88% white, ink badge chips r11. */

.hc-cutout {
  background: var(--hc-grad);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 12px 28px -12px rgba(255, 77, 103, 0.5);
  margin: 40px 0 0;
}

.hc-cutout__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hc-cutout__mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-cutout__copy { flex: 1; }
.hc-cutout__title { font-size: 19px; font-weight: 700; color: var(--hc-white); }
.hc-cutout__sub { font-size: 14.5px; color: rgba(255, 255, 255, 0.88); margin-top: 3px; }

.hc-cutout__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Pre-launch action: white pill to /early-access/ ahead of the inert badges. */
.hc-cutout a.hc-cutout__wl {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hc-pink);
  background: var(--hc-white);
  border-radius: 999px;
  padding: 11px 22px;
  white-space: nowrap;
}

.hc-cutout__badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--hc-ink);
  color: var(--hc-white);
  border-radius: 11px;
  padding: 8px 15px;
  white-space: nowrap;
}
.hc-cutout__badge-small { font-size: 8.5px; opacity: 0.75; }
.hc-cutout__badge-big { font-size: 13px; font-weight: 700; margin-top: -1px; }

@media (max-width: 760px) {
  .hc-cutout__head { flex-wrap: wrap; }
  .hc-cutout__badges { flex-wrap: wrap; }
}