/* Phone-only fitted deck. Tablet and desktop retain their four-screen layout. */
html.phone-deck.phone-index {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
  &.is-section-moving { scroll-snap-type: none; }

  & body.section3-preview main#main-content {
    & .panel {
      --phone-rail-bottom: max(16px, env(safe-area-inset-bottom));
      display: block; height: var(--deck-height); block-size: var(--deck-height);
      min-height: 0; min-block-size: 0; padding: 0; overflow: clip;
      scroll-margin-top: 0; scroll-snap-align: start; scroll-snap-stop: always;
    }
    & .section-stage {
      position: absolute; top: var(--phone-stage-top, var(--header-height)); left: 50%;
      width: var(--phone-stage-width, min(560px, calc(100% - 2 * var(--phone-gutter)))); height: auto;
      display: block; margin: 0; padding: 0;
      transform: translateX(-50%) scale(var(--phone-stage-scale, 1)); transform-origin: 50% 0;
    }
    & .section-stage .section-body,
    & .intro .section-content { display: block; }
    & .intro-message { padding: 0; }
    & .section-meta,
    & .panel:not(.intro) .section-meta {
      position: absolute; left: var(--phone-gutter); right: var(--phone-gutter);
      bottom: var(--phone-rail-bottom); width: auto;
      display: flex; flex-direction: row; align-items: flex-end;
      justify-content: flex-end; gap: 0; margin: 0; padding: 0;
    }
    & .section-next {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; min-height: 44px; margin: 0;
      font-size: 12px; line-height: 1.5;
    }
    & .section-next > span:last-child { font-size: 20px; line-height: 1; }
    & .intro .section-meta { flex-direction: column; align-items: stretch; gap: 14px; }
    & .stats { margin: 0; gap: 24px; }
    & .stats dt { font-size: 26px; line-height: 1.1; }
    & .stats dd { margin-top: 5px; font-size: 11px; }

    /* Equal portrait/heading columns, followed by the complete biography. */
    & .balanced-about { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
    & .balanced-about .about-portrait { grid-column: 1; grid-row: 1; align-self: center; }
    & .balanced-about .photo-placeholder { width: 100%; height: auto; }
    & .about-body { display: contents; }
    & .about-heading { grid-column: 2; grid-row: 1; align-self: center; gap: 12px; margin: 0; padding-left: 18px; }
    & .about-heading #about-title { font-size: 34px; line-height: 1.06; text-wrap: balance; }
    & .language-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 10px; }
    & .about-body > p { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; }
    & .about-body > p + p { margin-top: 0; }
    & .about-body > p:first-of-type { margin-top: 6px; }
    & .balanced-lessons { display: block; }
    & .teaching-approach p { font-size: 13px; line-height: 1.5; }
    & .teaching-approach p + p { margin-top: 16px; }

    /* Phone cards have their own flow; only Subscription needs a control row. */
    & .balanced-lessons .lesson-list {
      display: grid; grid-template-columns: minmax(0, 1fr) max-content;
      grid-template-rows: none; grid-auto-rows: auto; gap: 9px;
    }
    & .balanced-lessons .vertical-card {
      grid-template-columns: subgrid; grid-template-rows: auto auto;
      grid-column: 1 / -1; grid-row: auto;
      padding: 12px 14px; gap: 7px 10px; border-radius: 15px;
    }
    & .balanced-lessons :is(.lesson-title, .yki-heading) {
      grid-column: 1; grid-row: 1; align-self: center; font-size: 22px; line-height: 1.08;
      text-wrap: wrap;
    }
    & .balanced-lessons :is(.lesson-description, .yki-description) {
      grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 1.4;
    }
    & .balanced-lessons .card-foot,
    & .balanced-lessons .subscription-plan .card-foot {
      grid-column: 2; grid-row: 1; min-height: 24px; align-self: center;
      align-items: center; justify-content: flex-start;
    }
    & .balanced-lessons .subscription-card { grid-template-rows: auto auto auto; }
    & .balanced-lessons .subscription-plans,
    & .balanced-lessons .subscription-plan {
      grid-column: 1 / -1; grid-row: 1 / 3;
      grid-template-columns: subgrid; grid-template-rows: subgrid;
    }
    & .balanced-lessons .subscription-plan .lesson-description { grid-column: 1 / -1; grid-row: 2; }
    & .balanced-lessons :is(.lesson-price, .yki-price) { font-size: 14px; white-space: nowrap; }
    & .balanced-lessons .lesson-price small { font-size: 11px; }
    & .balanced-lessons .subscription-booking { min-height: 24px; }
    & .balanced-lessons .frequency-switch {
      grid-column: 1 / -1; grid-row: 3; align-self: start; justify-self: stretch;
      width: 100%; max-width: 100%; height: calc(52px * var(--phone-control-scale, 1));
      margin: 3px 0 0; padding: 3px;
      grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr;
      border-radius: 11px;
    }
    & .balanced-lessons .frequency-switch label {
      min-height: 0; padding: 0 8px; font-size: calc(13px * var(--phone-control-scale, 1));
      line-height: 1; white-space: nowrap;
    }
    & .balanced-lessons .frequency-switch label::after { content: none; }
    & .balanced-lessons .frequency-switch::before {
      inset: 3px auto 3px 3px; width: calc((100% - 6px) / 2); height: auto;
      border-radius: 8px; transform: translateX(0);
      transition: transform .7s cubic-bezier(.22, .8, .25, 1);
    }
    & .balanced-lessons .frequency-switch:has(#twice-weekly:checked)::before { inset: 3px auto 3px 3px; transform: translateX(100%); }
    & .balanced-lessons .lesson-arrow { position: static; font-size: 23px; margin-left: auto; }
    & .balanced-lessons .pricing-note { margin: 11px 0 0; font-size: 11px; line-height: 1.45; }

    & .contact .section-heading { margin-bottom: 18px; }
    & .contact-layout { gap: 18px; }
    & .contact-form { gap: 12px; }
    & .contact-form label { gap: 0; }
    & .contact-form input { min-height: 42px; padding-block: 7px; }
    & .contact-form textarea { height: 80px; min-height: 80px; resize: none; padding-block: 7px; overscroll-behavior-y: contain; }
    & .form-actions { gap: 8px; }
    & .form-status { font-size: 13px; }
    & .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));
    }
  }
}