/* Approved desktop composition: one shared scale, keeping
   the desktop spacing and line breaks at every desktop window size. */
html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > .panel:not(.index-booking-enabled) {
  --index-frame: 1600px;
  --index-gap: 64px;
  --index-title: 84px;
  --index-copy: 16px;
  --index-paragraph-gap: 22px;
  --index-meta-size: 14px;
  --index-stat-size: 49.6px;
  --intro-meta-size: var(--index-meta-size);
  --intro-stat-size: var(--index-stat-size);
  --index-primary-height: 57px;

  & {
    display: block; padding: 0; height: var(--deck-height, 100dvh);
    block-size: var(--deck-height, 100dvh); min-height: 0; min-block-size: 0;
    overflow: clip;
  }
  & .section-stage {
    --copy-size: var(--index-copy);
    --content-gap: var(--index-paragraph-gap);
    --frame-width: 100%;
    position: absolute; top: var(--desktop-fit-top); bottom: auto;
    left: 50%; width: 1600px; height: 960px; max-height: none;
    margin: 0; padding: 0; display: flex; flex-direction: column;
    transform: translateX(-50%) scale(var(--desktop-fit-scale));
    transform-origin: 50% 0;
    min-height: 0; overflow: clip; overscroll-behavior: auto;
  }
  &:is(#intro) .section-stage { height: 910px; bottom: auto; }
  &:is(#contact) .section-stage { height: 950px; bottom: auto; }
  & .section-stage .section-body {
    display: block; flex: none; width: 100%; max-width: none;
    min-height: 0; margin: auto 0; padding: 24px 0;
  }
  & .section-content { display: block; width: 100%; min-height: 0; }
  & .section-content > * {
    position: relative; inset: auto; top: auto; width: 100%; max-width: none;
    margin: 0; transform: none;
  }
  & :is(.intro-message, .balanced-about, .balanced-lessons, .contact-layout) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto; gap: var(--index-gap); align-items: center;
  }
  &:is(#intro) .intro-message { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--index-gap); padding: 0; }
  & .balanced-lessons .lessons-editorial { grid-column: 1; grid-row: 1; }
  & .balanced-lessons .lesson-stack { grid-column: 2; grid-row: 1; }
  & :is(.about-heading #about-title, .teaching-approach #approach-title, .contact-intro #contact-title) {
    font-size: var(--index-title); line-height: 1.02; letter-spacing: -.045em;
    font-weight: 400; margin: 0 0 24px; transform: none;
    white-space: nowrap; text-wrap: initial;
  }
  & .title-line { display: block; white-space: nowrap; }
  & .about-heading #about-title { margin-bottom: 0; }
  & .balanced-about .about-heading { grid-column: auto; grid-row: auto; gap: 16px; margin: 0 0 24px; }
  & :is(.about-body p, .teaching-approach p, .contact-note, .email-note, .email-note a, .field input, .field textarea) {
    font-size: var(--index-copy); line-height: 1.55;
  }
  & .balanced-about .about-body > p { grid-column: auto; margin: 0; }
  & .balanced-about .about-body > p + p,
  & .teaching-approach p + p { margin-top: var(--index-paragraph-gap); }
  & .balanced-about .about-body { display: block; padding: 0; }
  & .balanced-about .about-portrait {
    display: grid; grid-column: auto; grid-row: auto; place-items: center;
    align-self: stretch; container-type: size;
  }
  & .balanced-about .photo-placeholder.portrait-photo {
    position: absolute; inset: 0; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
    aspect-ratio: 1; margin: auto; transform: none;
  }
  & .language-badge { font-size: 13px; }
  &:is(#intro) .intro-heading { width: auto; }
  &:is(#intro) .intro-heading .intro-title { font-size: min(168px, 22.5cqw); line-height: .84; }
  &:is(#intro) .intro-copy { font-size: 24px; line-height: 1.5; margin: 0; }
  &:is(#intro) .discovery-button { margin-top: 32px; padding: 17px 26px; }
  &:is(#intro) .discovery-line strong { font-size: 15px; }
  &:is(#intro) .intro-steps { gap: 24px; margin-top: 40px; }
  &:is(#intro) .intro-step-number { width: 32px; height: 32px; font-size: 14px; }
  &:is(#intro) .intro-steps h2 { font-size: 18px; }
  &:is(#intro) .intro-steps p { font-size: 16px; line-height: 1.5; }
  & .contact-layout { gap: var(--index-gap); }
  & .contact-layout .contact-intro { max-width: none; }
  & .contact-form { gap: 24px; }
  & .contact-form .field label { font-size: var(--index-copy); font-weight: 300; }
  & .field textarea { height: 140px; }
  & .contact-intro .email-note { margin-top: 24px; }
  & > .section-meta {
    position: absolute; bottom: calc(var(--desktop-fit-spare) + 32px * var(--desktop-fit-scale));
    left: 50%; width: 1600px;
    display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;
    gap: 28px; margin: 0;
    transform: translateX(-50%) scale(var(--desktop-fit-scale)); transform-origin: 50% 100%;
  }
  &:is(#intro) > .section-meta { justify-content: space-between; }
  & .section-next { min-height: 32px; font-size: var(--index-meta-size); line-height: 1.5; white-space: nowrap; }
  & .intro-proof { display: flex; flex-direction: row; align-items: flex-end; gap: var(--index-gap); }
  & .stats { gap: var(--index-gap); margin: 0; }
  & .stats dt { font-size: var(--index-stat-size); line-height: 1.15; }
  & :is(.stats dd, .intro-reviews) { font-size: var(--index-meta-size); }
  & > .contact-footer { position: absolute; bottom: 0; }

  & .lesson-stack { --offer-copy-size: 14px; --offer-text-inset: 9.6px; }
  & .offer-list { column-gap: 16px; }
  & .offer-row,
  & .offer-list .offer-row.subscription-card { padding: 17.6px 9.6px; grid-template-rows: max-content 1fr; gap: 4.8px 16px; }
  & .offer-title { font-size: 16px; white-space: nowrap; }
  & .offer-description { grid-column: 1; font-size: 14px; }
  & .offer-price { font-size: 17.6px; }
  & .offer-price small { font-size: 10.4px; }
  & .offer-action {
    grid-row: 2; width: 118.4px; height: 32px;
    font: 300 16px/1.35 var(--sans); letter-spacing: -.02em;
  }
  & .offer-heading { display: flex; flex-wrap: nowrap; gap: 4px 12.8px; }
  & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1; }
  & .offer-list .offer-row.subscription-card .frequency-switch {
    grid-row: 1; align-self: center; height: 32px; min-height: 32px; margin-block: -2px; padding: 0;
  }
  & .offer-list .offer-row.subscription-card .frequency-switch label {
    display: flex; align-items: center; justify-content: center;
    height: 32px; min-height: 32px; padding: 0 11.2px;
    font: 300 16px/1.35 var(--sans); letter-spacing: -.02em;
  }
  & .offer-list .offer-row.subscription-card .frequency-switch::before { inset: 0 50% 0 0; }
  & .offer-list .offer-row.subscription-card .frequency-switch:has(#twice-weekly:checked)::before { inset: 0 0 0 50%; }
}