.reading-info {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  margin: -44px 0 90px;
  border: 1px solid #70435d;
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 20%, #ff5caa30 0, transparent 34%),
    linear-gradient(135deg, #24151f 0%, #16141b 58%, #101015 100%);
  box-shadow: 0 30px 80px #00000055;
}
.detail-page .story-access { margin: 0 0 64px; }
.reading-info::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  left: -210px;
  bottom: -260px;
  border: 1px solid #ff5caa55;
  border-radius: 50%;
  box-shadow: 0 0 90px #ff5caa22;
}
.reading-offer { position: relative; z-index: 1; padding: 58px; }
.early-badge {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid #ff8dc4;
  border-radius: 999px;
  color: #ff9aca;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.reading-info h2 {
  max-width: 650px;
  margin: 22px 0 20px;
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.075em;
}
.reading-info h2 em { color: var(--pink); font-style: normal; }
.offer-copy { max-width: 580px; margin: 0; color: #d8d1d6; font-size: 17px; line-height: 1.65; }
.reading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.offer-button { padding: 17px 23px; box-shadow: 0 12px 34px #ff5caa30; }
.offer-button span { font-size: 18px; }
.vk-link { color: #f5dce8; font-size: 14px; font-weight: 800; text-underline-offset: 5px; }
.vk-link:hover { color: var(--pink); }
.reading-benefits {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px;
  border-left: 1px solid #ffffff17;
  background: #ffffff05;
  backdrop-filter: blur(12px);
}
.benefit { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 25px 0; }
.benefit + .benefit { border-top: 1px solid #ffffff18; }
.benefit-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ff77b8aa; border-radius: 50%; color: var(--pink); font-size: 20px; }
.benefit h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.025em; }
.benefit p { margin: 0; color: var(--muted); font-size: 14px; }
.support-note { margin: 8px 0 0; padding: 18px 20px; border-radius: 12px; background: #ff5caa12; color: #d8c8d0; font-size: 13px; }
@media (max-width: 900px) {
  .reading-info { grid-template-columns: 1fr; }
  .reading-benefits { border-top: 1px solid #ffffff17; border-left: 0; }
}
@media (max-width: 640px) {
  .reading-info { margin: -15px 0 55px; border-radius: 20px; }
  .reading-offer, .reading-benefits { padding: 28px 24px; }
  .reading-info h2 { font-size: 42px; }
  .offer-copy { font-size: 15px; }
  .reading-actions { align-items: flex-start; flex-direction: column; }
  .offer-button { width: 100%; }
}