/* Systeme.io review (prefix sio-): landscape variant of the fam-rv template (see fam-rv.css section 10). */

/* Hero: short, wide band; photo on the right ~58%, copy on near-white left */
.sio-hero { --hero-h: 11.6rem; background: #fbfcfd; }
.sio-hero::before { background: linear-gradient(90deg, #fbfcfd 0%, #fbfcfd 44%, rgba(251, 252, 253, .6) 52%, rgba(251, 252, 253, 0) 62%); }
.sio-hero .hero__bg { left: 42%; }
.sio-hero .hero__bg img { object-position: 45% 50%; }
.sio-hero .hero__inner { padding-inline-start: 0; padding-block: .35rem .5rem; align-items: start; }
.sio-hero .hero__content { max-width: 42rem; }
.sio-hero .breadcrumb { font-size: .8rem; margin-bottom: .2rem; }
.sio-title { font-size: clamp(1.6rem, .8rem + 1.6vw, 1.95rem); line-height: 1.06; letter-spacing: -.03em; color: #0e1f4d; margin-bottom: .2em; }
.sio-hero .hero__lead { font-size: max(.78rem, 16px) /* rt-1019 */; line-height: 1.25; color: #26314d; max-width: 34.5rem; }
.sio-note { right: clamp(1rem, 6vw, 6rem); top: .9rem; font-size: 1.45rem; text-align: left; transform: rotate(-7deg); color: #0e1f4d; }
.sio-note::after { width: 85%; margin-left: 0; }

/* Quick verdict: blue tint box with brand mark, copy and a green score panel */
.sio-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) 12.5rem; gap: .9rem; align-items: center; padding: .45rem .5rem .45rem 1.1rem; border-radius: var(--radius-sm); background: #eef4fc; border: 1px solid #e1eaf7; }
.sio-verdict__mark { --s: 4.1rem; }
.sio-verdict h2 { margin: 0 0 .15rem; font-size: 1.2rem; letter-spacing: -.02em; }
.sio-verdict p { margin: 0; font-size: max(.74rem, 16px) /* rt-1019 */; line-height: 1.38; color: var(--rv-text); }
.sio-verdict__score { align-self: stretch; display: grid; place-content: center; justify-items: center; padding: .45rem; border-radius: var(--radius-sm); background: #ecf6ee; }
.sio-verdict__score .verdict-label { font-size: .72rem; padding: .18rem .6rem; }

/* Why we recommend: copy left, tick list box right */
.sio-why { display: grid; grid-template-columns: minmax(0, 1fr) 16.2rem; gap: 1.6rem; align-items: start; }
.sio-why h2 { margin: .1rem 0 .2rem; font-size: 1.15rem; letter-spacing: -.02em; }
.sio-why p { margin: 0; font-size: max(.74rem, 16px) /* rt-1019 */; line-height: 1.4; color: var(--rv-text); }
.sio-why__list { padding: .4rem .6rem; border-radius: var(--radius-sm); background: #f1f5fb; border: 1px solid #e5ecf6; gap: .1rem; }
.sio-why__list li { font-size: max(.62rem, 16px) /* rt-1019 */; line-height: 1.3; color: var(--rv-text); padding-left: 1.2rem; }
.sio-why__list li::before { width: .9rem; height: .9rem; background-color: var(--green-600); }

/* Pricing (left) beside the two "who" boxes (right) */
.sio-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 17.4rem; gap: .7rem; align-items: start; }
.sio-who { display: grid; gap: .5rem; margin-top: .4rem; }

@media (max-width: 1180px) {
  .sio-hero::before { background: linear-gradient(90deg, #fbfcfd 0%, #fbfcfd 50%, rgba(251, 252, 253, .7) 62%, rgba(251, 252, 253, .1) 78%); }
  .sio-note { display: none; }
  .sio-bottom { grid-template-columns: minmax(0, 1fr); }
  .sio-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sio-hero .hero__lead, .sio-verdict p, .sio-why p { font-size: max(.9rem, 16px) /* rt-1019 */; }
  .sio-why__list li { font-size: max(.84rem, 16px) /* rt-1019 */; }
}
@media (max-width: 760px) {
  .sio-hero { --hero-mobile-h: 190px; }
  .sio-hero .hero__bg { left: 0; }
  .sio-hero .hero__inner { padding-block: 1rem 1.2rem; }
  .sio-title { font-size: 1.6rem; }
  .sio-verdict { grid-template-columns: auto minmax(0, 1fr); }
  .sio-verdict__score { grid-column: 1 / -1; }
  .sio-why { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .sio-who { grid-template-columns: minmax(0, 1fr); }
}