/* Index-only trial. The fixed composition remains available to every accessory
   page and to the existing phone layout. No text is scaled with transforms. */
html.responsive-index body.section3-preview main#main-content.responsive-index {
  --index-frame: min(1600px, calc(100% - clamp(48px, 12vw, 320px)));
  --index-gap: clamp(28px, 3.3vw, 64px);
  --index-title: clamp(40px, 4.34vw, 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;

  & .panel {
    display: block; padding: 0; height: var(--deck-height, 100dvh);
    block-size: var(--deck-height, 100dvh); min-height: 0; min-block-size: 0;
    overflow: clip;
  }
  & .panel .section-stage {
    --copy-size: var(--index-copy);
    --content-gap: var(--index-paragraph-gap);
    --frame-width: 100%;
    position: absolute; top: calc(var(--index-header-height, var(--header-height)) + 20px); bottom: 100px;
    left: 50%; width: var(--index-frame); height: auto; max-height: none;
    margin: 0; padding: 0; display: flex; flex-direction: column;
    transform: translateX(-50%); transform-origin: initial;
    min-height: 0; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-y: contain; scrollbar-width: thin;
    scrollbar-color: rgba(41,41,41,.2) transparent;
  }
  & #intro .section-stage { bottom: 150px; }
  & #contact .section-stage { bottom: 110px; }
  & .panel .section-stage .section-body {
    display: block; flex: none; width: 100%; max-width: none;
    min-height: 0; margin: auto 0; padding: 24px 0;
  }
  & .panel .section-content { display: block; width: 100%; min-height: 0; }
  & .panel .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;
  }
  & #intro .intro-message { 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; }
  & .about-heading { gap: 16px; margin-bottom: 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;
  }
  & :is(.about-body p, .teaching-approach p) + p { margin-top: var(--index-paragraph-gap); }
  & .balanced-about .about-body { padding: 0; }
  /* The biography sets the row height; the portrait never enlarges it. */
  & .balanced-about .about-portrait { display: grid; 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; }
  & #intro .intro-heading h1 { font-size: min(168px, 22.5cqw); line-height: .84; }
  & #intro .intro-copy { font-size: clamp(18px, 1.24vw, 24px); line-height: 1.5; margin: 0; }
  & #intro .discovery-button { margin-top: 32px; padding: 17px 26px; }
  & #intro .discovery-line strong { font-size: 15px; }
  & #intro .intro-steps { gap: 24px; margin-top: 40px; }
  & #intro .intro-step-number { width: 32px; height: 32px; font-size: 14px; }
  & #intro .intro-steps h2 { font-size: 18px; }
  & #intro .intro-steps p { font-size: 16px; line-height: 1.5; }
  & .contact-layout { gap: var(--index-gap); }
  & .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; }
  & .panel > .section-meta {
    position: absolute; bottom: 32px; left: 50%; width: var(--index-frame);
    display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;
    gap: 28px; margin: 0; transform: translateX(-50%);
  }
  & #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); }
  & .panel > .contact-footer { position: absolute; bottom: 0; }
  /* Keep the recently approved offer sizes and price/button alignment. */
  & .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;
    /* Centre the taller pill within the existing title row without enlarging it. */
    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%; }
}

@media (max-width: 1200px) {
  html.responsive-index body.section3-preview main#main-content.responsive-index {
    --index-meta-size: 12px; --index-stat-size: 38px;
    & #intro .section-stage { bottom: 190px; }
    & .intro-proof { flex-direction: column; align-items: flex-start; gap: 12px; }
    & #intro .intro-steps { gap: 16px; margin-top: 28px; }
    & #intro .intro-steps p { font-size: 14px; }
    & .offer-row,
    & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr max-content; }
    & .offer-heading { display: contents; }
    & .offer-description,
    & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1 / -1; }
    & .offer-action { grid-row: 3; }
    & .offer-list .offer-row.subscription-card .frequency-switch { grid-row: 3; }
  }
}

/* Stack columns before they become cramped, retaining the same four sections. */
@media (max-width: 1000px) {
  html.responsive-index body.section3-preview main#main-content.responsive-index {
    --index-frame: calc(100% - 64px);
    --index-title: clamp(40px, 5.5vw, 55px);
    & :is(.balanced-lessons, .contact-layout) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    & .balanced-lessons .lessons-editorial,
    & .balanced-lessons .lesson-stack { grid-column: 1; grid-row: auto; }
    & .balanced-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    & .balanced-about .about-body { display: contents; }
    & .balanced-about .about-heading { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
    & .balanced-about .about-portrait { grid-column: 1; grid-row: 1; align-self: center; container-type: normal; }
    & .balanced-about .photo-placeholder.portrait-photo {
      position: relative; inset: auto; width: min(100%, 620px); height: auto; margin: 0;
    }
    & .balanced-about .about-body > p { grid-column: 1 / -1; margin: 0; }
    & .balanced-about { row-gap: 22px; }
    & .about-heading #about-title { font-size: clamp(36px, 5vw, 50px); }
    & #intro .intro-message { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    & #intro .intro-heading { width: min(100%, 540px); }
    & #intro .intro-heading h1 { font-size: min(118px, 22.5cqw); }
    & #intro .intro-copy { font-size: 20px; }
    & #intro .intro-steps p { font-size: 16px; }
    & .contact-layout .contact-intro { max-width: 620px; }
    & .offer-row,
    & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr; }
    & .offer-heading { display: flex; }
    & .offer-description,
    & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1; }
    & .offer-action { grid-row: 2; }
    & .offer-list .offer-row.subscription-card .frequency-switch { grid-row: 1; }
  }
}

@media (any-pointer: coarse) {
  html.responsive-index body.section3-preview main#main-content.responsive-index {
    & .offer-action { min-height: 44px; }
    & .offer-list .offer-row.subscription-card .frequency-switch { height: 44px; min-height: 44px; margin-block: 0; }
    & .offer-list .offer-row.subscription-card .frequency-switch label { min-height: 44px; }
    & .section-next { min-height: 44px; }
  }
}