/* Portrait tablets use the same four-screen fade deck as desktop. */
html.tablet-portrait.phone-index {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
  &.is-section-moving { scroll-snap-type: none; }
  overscroll-behavior-y: none;
  & body.section3-preview main#main-content .panel {
    display: block; height: var(--deck-height, 100dvh); block-size: var(--deck-height, 100dvh);
    min-height: 0; min-block-size: 0; padding: 0; overflow: hidden; scroll-margin-top: 0; scroll-snap-align: start; scroll-snap-stop: always;
  }
  & body.section3-preview main#main-content .section-stage {
    position: absolute; top: var(--tablet-stage-top, var(--header-height)); left: 50%;
    width: min(1000px, calc(100% - 2 * var(--phone-gutter))); height: auto;
    display: block; margin: 0; padding: 0;
    transform: translateX(-50%) scale(var(--tablet-stage-scale, 1)); transform-origin: 50% 0;
  }
  & body.section3-preview main#main-content .section-stage .section-body { display: block; }
  & body.section3-preview main#main-content .intro-message { padding-block: 12px 36px; }
  & body.section3-preview main#main-content .section-meta,
  & body.section3-preview main#main-content .panel:not(.intro) .section-meta {
    position: absolute; bottom: 32px; left: 50%;
    width: min(1000px, calc(100% - 2 * var(--phone-gutter)));
    display: flex; flex-direction: row; align-items: flex-end;
    margin: 0; transform: translateX(-50%);
  }
  & body.section3-preview main#main-content .section-next {
    display: flex; align-items: flex-end; min-height: 44px;
    font-size: 13px; line-height: 19.5px;
  }
  & body.section3-preview main#main-content .section-next > span:last-child { line-height: 19.5px; }
  & body.section3-preview main#main-content .intro .section-meta { justify-content: space-between; gap: 24px; }
  & body.section3-preview main#main-content .intro .section-next { align-self: flex-end; }
  & body.section3-preview main#main-content .stats { margin: 0; gap: clamp(24px, 5vw, 48px); }
  & body.section3-preview main#main-content .stats dt { line-height: 1.1; }
  & body.section3-preview main#main-content .stats dd { font-size: 13px; line-height: 19.5px; }
  & body.section3-preview main#main-content .balanced-lessons { gap: 26px; }
  & body.section3-preview main#main-content .balanced-lessons .vertical-card {
    min-height: 0; padding: 14px 18px; gap: 8px 18px;
    grid-template-rows: max-content minmax(0, 1fr) minmax(28px, auto);
  }
  & body.section3-preview main#main-content .balanced-lessons :is(.lesson-description, .yki-description),
  & body.section3-preview main#main-content .balanced-lessons .subscription-plan .lesson-description { grid-row: 2 / -1; }
  & body.section3-preview main#main-content .balanced-lessons .card-foot,
  & body.section3-preview main#main-content .balanced-lessons .subscription-plan .card-foot { grid-row: 3; min-height: 28px; }
  & body.section3-preview main#main-content .balanced-lessons .subscription-booking { min-height: 28px; }
  & body.section3-preview main#main-content .balanced-lessons .frequency-switch {
    grid-row: 1 / 3; grid-template-rows: repeat(2, 30px); justify-self: start;
  }
  & body.section3-preview main#main-content .balanced-lessons .frequency-switch label { min-height: 30px; padding-block: 4px; }
  & body.section3-preview main#main-content .balanced-lessons .lesson-arrow { top: 14px; right: 18px; }
  & body.section3-preview main#main-content .balanced-lessons :is(.lesson-title, .yki-heading) { font-size: 28px; }
  & body.section3-preview main#main-content .balanced-lessons .lesson-list { gap: 12px; }
  & body.section3-preview main#main-content .contact-footer {
    position: absolute; bottom: 0; left: var(--phone-gutter); right: var(--phone-gutter);
    width: auto; margin: 0; padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  }
}