/* Prisoptimering – page-specific layout. */

/* hero: centred, heading at h3 size (as the old page) */
.po-hero { padding-block: 34px 44px; }
.po-hero .hero__inner { max-width: 760px; }
.po-hero .hero__title { max-width: 640px; margin-inline: auto; }
.po-hero .hero__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.1; margin-bottom: 30px; }
.po-hero .hero__text { margin-bottom: 0; }
.po-hero .eyebrow { margin-bottom: 20px; }

/* intro split: light panel behind the left 60%, illustration centred in the right column */
.po-intro-section { padding-block: 90px; }
.po-intro-section::before { right: 40%; }
.po-intro-section .split__content { max-width: 400px; }
.po-intro-section .split__title { margin-top: 0; }
.po-intro-section .split__text { font-size: var(--fs-medium); }
.po-intro-section .split__media { display: flex; justify-content: center; }
.po-intro-section .split__media img { width: 100%; max-width: 480px; } /* the SVG has inner whitespace: ~350px visible, as the old page */
.po-intro-section .icon-list li { font-weight: 500; }

/* feature grid */
.po-features { padding-block: 50px 60px; }
.po-features .container { max-width: 1240px; }
.po-features .feature-grid { gap: 40px 50px; }
.po-features .feature__text { line-height: 1.6; }

@media (max-width: 991px) {
  .po-intro-section { padding-block: 60px; }
}
@media (max-width: 767px) {
  .po-hero { padding-block: 20px 36px; }
  .po-hero .hero__inner { text-align: left; }
  .po-hero .hero__title { margin-bottom: 20px; }
  .po-intro-section { padding-block: 40px 20px; }
  .po-intro-section::before { inset: 0; background: var(--white); }
  .po-intro-section .split__media img { max-width: 240px; }
  .po-features { padding-top: 40px; }
  .po-features .feature-grid { max-width: 340px; margin-inline: auto; }
}