/* Phone composition only. Loaded with a matching media attribute by the shared build. */
@media (max-width: 680px) {
  #services.section { padding-top: 36px; padding-bottom: 36px; }
  #services .section-title { margin-bottom: 20px; }
  #services .section-title h2 { font-size: 25px; line-height: 1.55; }
  #services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #services .service { min-width: 0; padding: 14px; border-radius: 18px; display: flex; flex-direction: column; }
  #services .service h3 { font-size: 17px; line-height: 1.5; margin: 8px 0 6px; }
  #services .service p { font-size: 13.5px; line-height: 1.75; margin: 0 0 12px; }
  #services .card-go { margin-top: auto; padding-top: 10px; min-height: 44px; font-size: 13.5px; gap: 4px; }
  #services .card-go b { width: 25px; height: 25px; flex: none; }
  #services .service.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 12px; }
  #services .featured .service-drawing { grid-column: 2; grid-row: 1 / 4; width: 88px; height: 90px; margin: 0; align-self: center; }
  #services .featured h3, #services .featured p, #services .featured .card-go { grid-column: 1; }
  #services .rings, #services .sound-bars { height: 62px; margin: 0; }
  #services .rings i { width: 34px; height: 34px; }
  #services .rings i:nth-child(2) { width: 46px; height: 46px; }
  #services .rings i:nth-child(3) { width: 58px; height: 58px; }
  #services .rings b { font-size: 25px; }
  #services .sound-bars { gap: 5px; overflow: hidden; }
  #services .sound-bars i { max-height: 52px; width: 5px; }

  #membership.opl { padding: 36px 0; }
  #membership .opl-head { margin-bottom: 20px; }
  #membership h2 { font-size: 27px; line-height: 1.4; }
  #membership .opl-lead { font-size: 14px; line-height: 1.8; margin-top: 10px; }
  #membership .opl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; align-items: stretch; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  #membership .opl-card { min-width: 0; border-radius: 17px; }
  #membership .opl-in { height: 100%; min-height: 186px; padding: 14px 12px 8px; border-radius: 16px; gap: 8px; }
  #membership .opl-top { align-items: flex-start; flex-wrap: wrap; gap: 5px; }
  #membership .opl-top h3 { font-size: 18px; line-height: 1.5; }
  #membership .opl-badge { padding: 2px 7px; font-size: 10px; }
  #membership .opl-tag { min-height: 0; margin: 0; font-size: 13.5px; line-height: 1.65; }
  #membership .opl-price { gap: 5px; margin: 2px 0 0; padding-bottom: 10px; }
  #membership .opl-price b { font-size: 27px; line-height: 1.2; }
  #membership .opl-price small { font-size: 11.5px; line-height: 1.6; }
  #membership .opl-plan-source { display: none; }
  #membership .opl-plan-open { margin-top: auto; width: 100%; justify-content: center; background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 50%, var(--line)); color: inherit; font-family: inherit; cursor: pointer; }
  #membership .opl-plan-open:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
  .opl-dialog { box-sizing: border-box; width: calc(100% - 28px); max-width: 450px; max-height: 86vh; max-height: 86dvh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--ink); font-family: inherit; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
  .opl-dialog[open] { display: flex; flex-direction: column; animation: plan-dialog-in .18s ease-out; }
  .opl-dialog::backdrop { background: rgba(0,0,0,.65); }
  .opl-dialog-close { align-self: flex-start; margin: 12px 16px 0; padding: 8px 12px; min-height: 44px; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; cursor: pointer; flex: none; }
  .opl-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 22px 20px; }
  .opl-dialog h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.5; }
  .opl-dialog .opl-tag { margin: 0; font-size: 15px; line-height: 1.8; }
  .opl-dialog .opl-price { margin-top: 20px; padding-bottom: 16px; }
  .opl-dialog .opl-price b { font-size: 36px; }
  .opl-dialog .opl-list { gap: 13px; padding-top: 16px; }
  .opl-dialog .opl-list li { font-size: 15px; line-height: 1.9; }
  .opl-dialog-actions { flex: none; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
  .opl-dialog-continue { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 13px; padding: 8px 12px; background: var(--green); color: #060e14; font-size: 15px; line-height: 1.7; font-weight: 800; text-decoration: none; }
  .opl-dialog-continue:focus-visible, .opl-dialog-close:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
  @keyframes plan-dialog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .opl-dialog[open] { animation: none; } }
  #membership .opl-list { gap: 10px; padding: 6px 0; }
  #membership .opl-list li { font-size: 14px; line-height: 1.8; gap: 5px; }
  #membership .opl-list svg { width: 14px; height: 14px; }
  #membership .opl-btn { font-size: 13px; padding: 8px 10px; min-height: 44px; border-radius: 12px; line-height: 1.7; }
  #membership .opl-arrow { width: 16px; height: 16px; }

  #trainers.otm { padding: 36px 0 28px; }
  #trainers .otm-head { gap: 14px; margin-bottom: 16px; }
  #trainers h2 { font-size: 25px; line-height: 1.5; }
  #trainers .otm-lead { min-height: 218px; }
  #trainers .otm-lead-copy { padding: 16px; gap: 7px; }
  #trainers .otm-lead h3 { font-size: 23px; }
  #trainers .otm-role { font-size: 13px; }
  /* Padding includes the upward hover travel; no curved edge is clipped by the scroller. */
  #trainers .otm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 8px 0; overflow: visible; scroll-snap-type: none; }
  #trainers .otm-card { min-width: 0; height: auto; min-height: 148px; padding: 10px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; }
  #trainers .otm-card:hover { transform: translateY(-4px); }
  #trainers .otm-card > img { position: static; width: 68px; height: 68px; margin: 0; flex: none; object-fit: contain; border-radius: 50%; background: var(--soft); filter: none; }
  #trainers .otm-card-copy { position: static; width: 100%; padding: 7px 0 0; background: none; text-align: center; }
  #trainers .otm-card h3 { font-size: 15px; line-height: 1.55; }
  #trainers .otm-card p { font-size: 12px; line-height: 1.6; }

  #coach-path.ocp { padding: 36px 0; }
  #coach-path .ocp-head { margin-bottom: 18px; }
  #coach-path h2 { font-size: 25px; line-height: 1.5; }
  #coach-path .ocp-head p { font-size: 14px; line-height: 1.8; }
  #coach-path .ocp-grid { gap: 10px; max-width: none; }
  #coach-path .ocp-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; padding: 16px 14px; align-items: start; text-align: right; }
  #coach-path .ocp-level { grid-column: 1; grid-row: 1; margin: 0; font-size: 13px; }
  #coach-path .ocp-card h3 { grid-column: 1; grid-row: 2; margin: 0; font-size: 19px; line-height: 1.6; }
  #coach-path .ocp-card ul { grid-column: 2; grid-row: 1 / 4; }
  #coach-path .ocp-card li { padding: 5px 0; font-size: 14px; line-height: 1.8; }
  #coach-path .ocp-btn { grid-column: 1; grid-row: 3; min-height: 44px; margin-top: 8px; padding: 6px; font-size: 13px; line-height: 1.6; }
}