/* Feature introduction and practice lesson for the arpeggio landing page. */
.arpeggio-landing .arpeggio-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 32px;
  max-width: none;
  padding: 28px 12px 16px;
}
.arpeggio-landing .arpeggio-hero h1 { font-size: clamp(29px, 3.2vw, 40px); line-height: 1.12; margin: 12px 0 20px; }
.arpeggio-tagline { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; font-weight: 650; margin: 0 0 16px; }
.arpeggio-landing .arpeggio-hero .generator-intro { font-size: 17px; line-height: 1.65; margin: 0 0 22px; }
.arpeggio-landing .arpeggio-hero-image { margin: 0; max-width: 560px; }
.arpeggio-landing .arpeggio-hero-image img { border-radius: 16px; }
.arpeggio-landing .arpeggio-hero-image figcaption { font-size: 13px; line-height: 1.55; }
.arpeggio-cta { margin-top: 22px; }
.arpeggio-cta .lesson-access { max-width: 48ch; line-height: 1.6; margin: 10px 0 0; }
.arpeggio-platforms { color: var(--muted, #625f58); font-size: 13px; margin: 12px 0 0; }
.arpeggio-store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.arpeggio-landing .lesson-section { row-gap: 16px; }
.arpeggio-landing .lesson-section > h2 { margin: 0 0 4px; }
.arpeggio-landing .lesson-section > p, .arpeggio-landing .lesson-section > ol { margin-block: 0; }
.arpeggio-landing .lesson-section > .arpeggio-cta { margin-top: 4px; }
.arpeggio-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.arpeggio-benefits h3 { font-size: 19px; line-height: 1.35; margin: 0 0 8px; }
.arpeggio-benefits p { margin: 0; }
.arpeggio-example-pair { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 28px; }
.arpeggio-example-pair .lesson-screenshot { margin: 0; max-width: none; }
.arpeggio-tab { margin: 4px 0; padding: 20px 24px; border: 1px solid var(--border, #d7d3cb); border-radius: 12px; background: var(--panel-soft, #f5f2ec); }
.arpeggio-tab figcaption { font-weight: 650; font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.arpeggio-tab pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(15px, 2vw, 21px); line-height: 1.65; margin: 0; overflow-x: auto; }
.arpeggio-details { border-top: 1px solid var(--border, #d7d3cb); padding: 17px 0; scroll-margin-top: 24px; }
.arpeggio-details summary { cursor: pointer; font-weight: 650; font-size: 17px; line-height: 1.5; }
.arpeggio-details summary:focus-visible { outline: 2px solid var(--accent, #aa6b32); outline-offset: 5px; border-radius: 3px; }
.arpeggio-details p:last-child { margin-bottom: 0; }
.arpeggio-landing .lesson-section .seo-table { min-width: 0; width: 100%; }
.arpeggio-landing .seo-table th, .arpeggio-landing .seo-table td { overflow-wrap: anywhere; }
.arpeggio-landing .progression-play-button { white-space: normal; max-width: 100%; }
.arpeggio-landing .lesson-jumps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 12px; }
.arpeggio-landing .lesson-footer { color: var(--muted, #625f58); font-size: 14px; }
@media (max-width: 760px) {
  .arpeggio-landing .landing-topbar { gap: 10px; }
  .arpeggio-landing .topbar-store-badge-row { display: flex; width: 100%; justify-content: flex-start; }
  .arpeggio-example-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .arpeggio-landing .arpeggio-hero { grid-template-columns: minmax(0, 1fr); padding: 12px 10px; gap: 24px; }
  .arpeggio-landing .arpeggio-hero h1 { margin-bottom: 14px; }
  .arpeggio-landing .arpeggio-hero-image { justify-self: center; }
  .arpeggio-benefits { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .arpeggio-landing .lesson-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .arpeggio-tab { padding: 16px 12px; }
  .arpeggio-landing .seo-table th, .arpeggio-landing .seo-table td { padding: 10px 8px; font-size: 14px; }
}