/* Quiet offer rows: only the pill buttons navigate. */
html body.section3-preview main#main-content {
  & .lesson-stack { --offer-copy-size: 12.8px; --offer-copy-leading: 1.5; --offer-text-inset: 9.6px; }
  & .offer-list { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-auto-rows: 1fr; gap: 0 16px; }
  & .offer-row {
    display: grid; grid-column: 1 / -1; grid-row: auto; grid-template-columns: subgrid;
    grid-template-rows: max-content 1fr; gap: 4.8px 16px; align-items: start;
    margin: 0; padding: 17.6px 9.6px; min-width: 0; min-height: 0;
    border: 0; border-top: .5px solid rgba(41,41,41,.13); border-radius: 0;
    background: transparent; box-shadow: none; color: var(--ink); cursor: default;
  }
  & .offer-row:last-child { border-bottom: .5px solid rgba(41,41,41,.13); }
  & .offer-title {
    grid-column: 1; grid-row: 1; margin: 0; min-height: 28.8px; display: flex; align-items: center;
    font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em;
  }
  & .offer-description {
    grid-column: 1; grid-row: 2; margin: 0; min-width: 0;
    font-family: var(--sans); font-size: var(--offer-copy-size); font-weight: 300; line-height: var(--offer-copy-leading); color: var(--muted);
  }
  & .offer-description strong { font-weight: 500; color: var(--ink); }
  & .offer-price {
    grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: max-content; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums;
    font-family: var(--sans); font-size: 17.6px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
  }
  & .offer-price:not(:has(small)) { width: var(--offer-price-width, max-content); }
  & .offer-price small { font-size: 10.4px; font-weight: 300; color: var(--muted); letter-spacing: 0; }
  & .offer-free { display: inline-block; padding: 5.6px 11.2px; background: var(--ink); color: #fff; border-radius: 30px; font-size: 10.4px; font-weight: 500; line-height: 1.3; }
  /* Keep the approved pill sizes independent of the centered price text. */
  & .offer-action {
    grid-column: 2; grid-row: 2; align-self: start; justify-self: center;
    display: flex; align-items: center; justify-content: center;
    position: relative; width: 118.4px; height: 32px; border: 1px solid var(--ink); border-radius: 100px;
    color: #fff; background: #292929; font-family: var(--sans); font-size: 11.2px; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background .25s ease, color .25s ease;
  }
  & .offer-action:hover { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
  & .offer-heading { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 12.8px; min-width: 0; }
  & .offer-heading .offer-title { flex: none; }
  & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr; gap: 4.8px 16px; }
  & .offer-list .offer-row.subscription-card .frequency-switch {
    display: grid; flex: none; grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto;
    position: relative; top: auto; left: auto; align-self: start; justify-self: start;
    width: max-content; max-width: 100%; min-width: 0; height: auto; margin: 0; padding: 2.4px;
    border: 0; border-radius: 100px; background: rgba(41,41,41,.08); transform: none; z-index: 2;
  }
  & .offer-list .offer-row.subscription-card .frequency-switch label { min-height: 24px; padding: 4.8px 11.2px; font-size: 10.4px; line-height: 14.4px; }
  & .offer-list .offer-row.subscription-card .frequency-switch::before {
    inset: 2.4px 50% 2.4px 2.4px; width: auto; height: auto; border-radius: inherit; transform: none;
    transition: left .7s cubic-bezier(.22,.8,.25,1), right .7s cubic-bezier(.45,0,.2,1);
  }
  & .offer-list .offer-row.subscription-card .frequency-switch:has(#twice-weekly:checked)::before {
    inset: 2.4px 2.4px 2.4px 50%; transform: none;
    transition-timing-function: cubic-bezier(.45,0,.2,1), cubic-bezier(.22,.8,.25,1);
  }
  & .offer-list .offer-row.subscription-card :is(.subscription-plans, .subscription-plan) {
    display: grid; grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; min-width: 0;
    pointer-events: none;
  }
  & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1; grid-row: 2; pointer-events: auto; }
  & .offer-list .offer-row.subscription-card .offer-action { pointer-events: auto; }
  & .offer-list .offer-row.subscription-card .offer-price { pointer-events: auto; }
  & :is(#lessons, #lesson-options) .lesson-stack > .pricing-note { margin-top: 12.8px; padding-inline: var(--offer-text-inset); font-family: var(--sans); font-size: var(--offer-copy-size); font-weight: 200; line-height: var(--offer-copy-leading); color: var(--muted); }
}
html:not(.phone-deck) body.section3-preview main#main-content {
  & .balanced-lessons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; gap: 64px; }
  & .balanced-lessons .lessons-editorial { grid-column: 1; grid-row: 1; align-self: center; }
  & .balanced-lessons .lesson-stack { grid-column: 2; grid-row: 1; min-width: 0; }
  & :is(.contact-note, .email-note, .email-note a) { font-size: var(--copy-size); }
  & :is(.about-heading #about-title, .teaching-approach #approach-title) { font-size: 84px; line-height: 1.02; letter-spacing: -.045em; font-weight: 400; }
}
html.tablet-portrait.phone-index body.section3-preview main#main-content {
  & .lesson-stack { --offer-copy-size: 11.2px; --offer-text-inset: 0px; }
  & .balanced-lessons { gap: 32px; }
  & :is(.about-heading #about-title, .teaching-approach #approach-title) { font-size: clamp(31.5px,4.125vw,43.5px); line-height: 1.08; }
  & .offer-list { grid-template-columns: minmax(0,1fr) max-content; column-gap: 9.6px; }
  & .offer-row { padding: 12.8px 0; grid-template-rows: max-content 1fr max-content; column-gap: 9.6px; }
  & .offer-description { grid-column: 1 / -1; }
  & .offer-title { font-size: 14.4px; }
  & .offer-price { font-size: 14.4px; }
  & .offer-price small { font-size: 8.8px; }
  & .offer-action { grid-row: 3; width: 99.2px; height: 30.4px; font-size: 10.4px; }
  & .offer-heading { display: contents; }
  & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr max-content; column-gap: 9.6px; }
  & .offer-list .offer-row.subscription-card .offer-price { grid-row: 1; }
  & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1 / -1; }
  & .offer-list .offer-row.subscription-card .frequency-switch { grid-column: 1; grid-row: 3; align-self: center; }
  & .offer-list .offer-row.subscription-card .frequency-switch label { padding-inline: 6.4px; font-size: 9.6px; }
}
html.phone-deck body.section3-preview main#main-content {
  & .lesson-stack { --offer-copy-size: 10px; --offer-copy-leading: 1.45; --offer-text-inset: 0px; }
  & .offer-list { grid-template-columns: minmax(0,1fr) max-content; column-gap: 9.6px; }
  & .offer-row { padding: 9.6px 0; grid-template-rows: max-content 1fr max-content; gap: 4.8px 8px; }
  & .offer-title { font-size: 13.6px; }
  & .offer-description { grid-column: 1 / 3; }
  & .offer-price { grid-column: 2; grid-row: 1; font-size: 12.8px; }
  & .offer-price small { font-size: 8px; }
  & .offer-free { font-size: 8.8px; padding: 4px 8px; }
  & .offer-action { grid-row: 3; width: 94.4px; height: 30.4px; font-size: 9.6px; }
  & .offer-heading { display: contents; }
  & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr max-content; column-gap: 9.6px; }
  & .offer-list .offer-row.subscription-card .offer-price { grid-row: 1; }
  & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1 / -1; }
  & .offer-list .offer-row.subscription-card .frequency-switch { grid-column: 1; grid-row: 3; align-self: center; }
  & .offer-list .offer-row.subscription-card .frequency-switch label { min-height: calc(28.8px * var(--phone-control-scale,1)); padding: 6.4px 5.6px; font-size: 9.6px; }
  & :is(#lessons, #lesson-options) .lesson-stack > .pricing-note { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.section3-preview main#main-content .offer-row.subscription-card .frequency-switch::before { transition: none; }
}