/* Lifetime bonus resource cards using the OTO1 staged-book visual direction. */
#bonuses .bonus-list{display:grid;gap:clamp(18px,3vw,28px)}
#bonuses .bonus-item{--bonus-accent:var(--primary-500);display:grid;grid-template-columns:minmax(250px,.92fr) minmax(0,1.08fr);gap:clamp(26px,5vw,64px);align-items:center;min-height:390px;padding:clamp(22px,4vw,46px);border:1px solid var(--border)!important;border-radius:18px;background:var(--surface)!important;overflow:hidden}
#bonuses .bonus-item:nth-child(even){--bonus-accent:var(--accent-500);grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);background:var(--surface-2)!important}
#bonuses .bonus-item:nth-child(even) .bonus-cover{order:2}
#bonuses .bonus-cover{position:relative;isolation:isolate;width:100%;min-width:0;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#0a0a0c;box-shadow:0 12px 30px rgba(0,0,0,.5)}
#bonuses .bonus-copy{min-width:0}
#bonuses .bonus-copy .chapter-label{margin-bottom:13px;color:var(--bonus-accent)!important}
#bonuses .bonus-copy h3{margin:0 0 14px;color:var(--text);font-size:clamp(25px,3vw,36px);line-height:1.08;letter-spacing:-.045em}
#bonuses .bonus-copy p{max-width:620px;color:var(--text-muted);font-size:17px;line-height:1.7}
#bonuses .bonus-copy p+p{margin-top:14px}
#bonuses .bonus-copy .bonus-inclusion{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0!important;padding:6px 10px;border:1px solid color-mix(in srgb,var(--bonus-accent) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bonus-accent) 10%,transparent);color:var(--bonus-accent)!important;font:500 11px/1 var(--font-mono)!important;letter-spacing:.045em;text-transform:uppercase}
#bonuses .bonus-copy .bonus-inclusion::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
@media(max-width:767px){
  #bonuses .bonus-item,#bonuses .bonus-item:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:25px;min-height:0;padding:20px}
  #bonuses .bonus-item:nth-child(even) .bonus-cover{order:initial}
  #bonuses .bonus-cover{width:100%;max-width:380px;margin:auto}
  #bonuses .bonus-copy h3{font-size:27px}
  #bonuses .bonus-copy p{font-size:16px}
}
#bonuses .bonus-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}