/* ==========================================================================
   Stage geometry matched to the reference landing page, measured live:
   1440 → stage full width × 448, card 480 × ~320 on the stage's bottom edge
          at the 80 px content gutter;
   1920 → stage 1728 × 538 (inset 96), content gutter 192, card 576.
   Height ≈ 31.1 % of the stage width, between 448 and 538.
   Loaded last on index.
   ========================================================================== */

/* ---- Gutters: the page frame and the stage card share one grid */
@media (min-width: 1280px) { body.home, body.scm-page { --page-rail: 80px !important; } }
@media (min-width: 1600px) { body.home, body.scm-page { --page-rail: max(80px, calc((100vw - 1536px) / 2)) !important; } }

/* Hairline frame in the reference's grey */
body.home, body.scm-page { --frame: #c9d6d8 !important; }

@media (min-width: 900px) {
  body.home {
    --stage-inset: max(0px, calc(var(--page-rail) - 96px));
    --stage-w: calc(100vw - 2 * var(--stage-inset));
    --hero-band-h: clamp(448px, calc(var(--stage-w) * 0.311), 538px) !important;
    --hero-home-h: var(--hero-band-h) !important;
    --card-x: calc(var(--page-rail) - var(--stage-inset));
    --card-w: max(440px, calc((100vw - 2 * var(--page-rail)) * 0.375));
  }
  body.home main > #top { margin-left: var(--stage-inset) !important; margin-right: var(--stage-inset) !important; width: auto !important; max-width: none !important; }
  .home .hero-stage {
    height: var(--hero-band-h) !important;
    min-height: var(--hero-band-h) !important;
  }

  /* Card: on the bottom edge, at the content gutter, 37.5 % of the column */
  .home .hero-slide .hero-card {
    top: auto !important;
    bottom: 0 !important;
    left: var(--card-x) !important;
    width: var(--card-w) !important;
    max-width: calc(100% - 2 * var(--card-x)) !important;
    padding: 24px 28px 22px !important;
    border-bottom: 0 !important;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }
  .home .hero-slide .hero-kicker { margin-bottom: 12px !important; }
  .home .hero-slide .hero-card h1,
  .home .hero-slide .hero-card h2 {
    font-size: clamp(26px, 2.35vw, 40px) !important;
    line-height: 1.1 !important;
  }
  .home .hero-slide .hero-card p:not(.hero-proof) {
    margin-top: 10px !important;
    font-size: clamp(14.5px, 1.05vw, 16.5px) !important;
    line-height: 1.5 !important;
    max-width: none;
  }
  .home .hero-slide .hero-actions { margin-top: 16px !important; gap: 10px 18px !important; }
  .home .hero-slide .hero-card .btn-line { margin-top: 16px; }
  .home .hero-slide .hero-actions .btn-line { margin-top: 0; }
  .home .hero-slide .hero-card .hero-cta { padding: 13px 18px !important; font-size: 11.5px !important; }
  .home .hero-proof { margin-top: 14px !important; padding-top: 10px !important; font-size: 12.5px !important; }

  /* Chapter strip sits beside the card, on the same bottom line */
  .hero-rail {
    left: calc(var(--card-x) + var(--card-w) + 32px) !important;
    right: var(--card-x) !important;
    bottom: 0 !important;
    height: 76px !important;
  }
  .hero-rail em { -webkit-line-clamp: 2 !important; font-size: 13px !important; }
  .hero-rail b { font-size: 20px !important; }

  /* Arrows: top-right, inside the gutter */
  .home .hero-arrow { top: 20px !important; }
  .home .hero-arrow--next { right: var(--card-x) !important; }
  .home .hero-arrow--prev { right: calc(var(--card-x) + 54px) !important; }
}

/* Narrow desktop: not enough room beside the card for four chapters */
@media (min-width: 900px) and (max-width: 1179px) {
  .hero-rail { grid-template-columns: repeat(2, 1fr) !important; height: 120px !important; }
  .hero-rail em { -webkit-line-clamp: 1 !important; }
}

/* ---- Frame below the stage: crisper, aligned to the same gutter */
body.home main > section:not(#top)::after,
body.scm-page main > section::after {
  background:
    linear-gradient(#048eaa, #048eaa) no-repeat 0 0 / 19px 1px,
    linear-gradient(#048eaa, #048eaa) no-repeat 100% 0 / 19px 1px,
    linear-gradient(#048eaa, #048eaa) no-repeat 9px 0 / 1px 9px,
    linear-gradient(#048eaa, #048eaa) no-repeat calc(100% - 9px) 0 / 1px 9px !important;
  opacity: 0.85;
}