/* Round 13: desktop messaging, audience proof and final CTA */

@media (min-width:851px){
  /* Transition section: keep the copy safely inside the reading column. */
  .chapter .wrap{width:min(1000px,calc(100% - 128px))!important}
  .chapter-copy{padding-inline:0!important}
  .chapter-kicker{width:auto!important;max-width:760px;margin:0 0 12px auto!important;color:var(--gold);font:700 .78rem Heebo;letter-spacing:.035em}
  .chapter-copy h2{max-width:760px!important;margin:0 0 17px auto!important}
  .chapter-copy>p:last-child{max-width:690px!important;margin:0 0 0 auto!important}

  /* Written audience reactions: a real proof module, ready for verified quotes as they are extracted. */
  .written-reactions{max-width:1000px!important;margin:30px auto 0!important;padding:22px 0 24px!important;border-block:1px solid #17233b22!important}
  .reactions-title{margin:0 0 14px!important;font:700 .84rem Heebo;color:#596171}
  .reaction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .reaction-grid .reaction{min-height:104px;max-width:none!important;margin:0!important;padding:17px 18px!important;background:#f8f6f1!important;border:1px solid #17233b18;box-shadow:none!important;display:flex;align-items:flex-end;font:700 1.22rem Heebo!important;line-height:1.35!important}
  .reaction-grid blockquote{margin:0}
  .reaction-grid .reaction-slot{background:transparent!important;border:1px dashed #17233b1b!important;opacity:.45}

  /* Final CTA: editorial image composition rather than a literal film-strip device. */
  .contact{overflow:hidden}
  .contact .contact-layout{max-width:1080px!important;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);gap:72px;align-items:center}
  .contact-copy{min-width:0}
  .contact-copy h2{max-width:690px!important}
  .contact-visual{position:relative;min-height:365px}
  .contact-frame{position:absolute;overflow:hidden;background:var(--night);box-shadow:0 18px 44px #0b163020}
  .contact-frame img{width:100%;height:100%;display:block;object-fit:cover}
  .contact-frame-main{width:78%;height:330px;left:0;top:0;transform:rotate(-1.2deg)}
  .contact-frame-main img{object-position:52% 42%}
  .contact-frame-detail{width:48%;height:190px;right:0;bottom:0;border:8px solid var(--paper);transform:rotate(2deg)}
  .contact-frame-detail img{object-position:72% 44%;transform:scale(1.45)}
}

/* Keep this pass desktop-only. Mobile will be composed after desktop approval. */
@media(max-width:850px){
  .reaction-grid{display:block}
  .reaction-grid .reaction-slot{display:none}
  .reactions-title{font:700 .82rem Heebo;color:#596171;margin-bottom:10px}
  .contact-visual{display:none}
}