/* HR Optimizer — desktop scale correction.
   Scope: desktop/tablet landscape presentation only. No mobile or processing logic changes. */

@media (min-width: 1200px) {
  .topbar,
  .hero,
  .section,
  footer {
    width: min(1560px, calc(100% - 56px)) !important;
    max-width: 1560px !important;
    box-sizing: border-box !important;
  }

  .topbar {
    padding-inline: 20px !important;
  }

  .hero {
    padding-inline: 28px !important;
    column-gap: clamp(38px, 3.3vw, 66px) !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr) !important;
  }

  .hero h1 {
    max-width: 820px !important;
    font-size: clamp(48px, 4.6vw, 82px) !important;
    line-height: 1.17 !important;
    letter-spacing: -2.8px !important;
  }

  .hero > p {
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 2 !important;
  }

  .workflow {
    max-width: none !important;
    width: 100% !important;
  }

  .section {
    padding-inline: 28px !important;
  }

  .section h2,
  .plans-head h2,
  .how h2,
  .cta h2 {
    font-size: clamp(36px, 3.2vw, 54px) !important;
  }

  .section-kicker {
    font-size: 10px !important;
  }

  .plan-grid {
    gap: 18px !important;
  }

  .plan-grid article h3 {
    font-size: 31px !important;
  }

  .plan-grid article > p {
    font-size: 12px !important;
  }

  .plan-grid .ref-features .feature-label {
    font-size: 13px !important;
  }

  .plan-grid .ref-features b {
    font-size: 14px !important;
  }

  .plan-grid .plan-btn {
    font-size: 15px !important;
  }

  nav a {
    font-size: 13px !important;
    padding-inline: 12px !important;
  }
}

/* Very wide browser viewports: stop the main content looking like a narrow centered column. */
@media (min-width: 1800px) {
  .topbar,
  .hero,
  .section,
  footer {
    width: min(1780px, calc(100% - 80px)) !important;
    max-width: 1780px !important;
  }

  .hero {
    min-height: 760px !important;
    padding: 82px 30px 66px !important;
    column-gap: clamp(52px, 3.2vw, 78px) !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  }

  .hero h1 {
    max-width: 900px !important;
    font-size: clamp(54px, 4.1vw, 88px) !important;
    line-height: 1.16 !important;
    letter-spacing: -3px !important;
  }

  .hero > p {
    max-width: 820px !important;
    font-size: 15px !important;
  }

  .workflow {
    min-height: 100% !important;
    padding: 22px !important;
    border-radius: 25px !important;
  }

  .flow-steps {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    padding: 16px !important;
  }

  .flow-steps .ico {
    width: 40px !important;
    height: 40px !important;
  }

  .section {
    padding-top: 92px !important;
    padding-bottom: 92px !important;
  }

  .plan-grid {
    gap: 22px !important;
  }

  .plan-grid article,
  .plan-grid article.featured {
    padding: 34px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr) !important;
    column-gap: 30px !important;
  }
  .hero h1 {
    font-size: clamp(42px, 4vw, 58px) !important;
    letter-spacing: -1.8px !important;
  }
}

/* Keep the existing mobile layout and its menu untouched. */