/* First screen only: the remaining screens await their separate review. */
body:has(.hero-section) { margin: 0; }
.hero-section, .hero-section * { box-sizing: border-box; }
.hero-section { color: #231b12; font-family: Arial, Helvetica, sans-serif; padding: 24px 20px 38px; background: #fff; }
.hero-section .decor-corner { display: none; }
.hero-layout { position: relative; max-width: 1160px; margin: 0 auto; padding-bottom: 28px; overflow: hidden; background: radial-gradient(ellipse at 3% 61%, #fbd4b1 0, transparent 49%), radial-gradient(ellipse at 100% 91%, #c8dbc4 0, transparent 62%), #f8f1e6; }
.hero-visual { width: 100%; height: 690px; overflow: hidden; }
.hero-visual img { display: block; width: 100%; height: auto; }
.hero-panel { position: relative; margin: -12px 4.25% 0; }
.hero-copy { border-radius: 48px; padding: 82px 48px 96px; text-align: center; background: #faf5ec; background: linear-gradient(120deg, #fcf6edee, #faf4ea); }
.hero-copy h1 { font-size: clamp(40px, 7.8vw, 110px); font-weight: 900; letter-spacing: -3px; line-height: 1.04; margin: 12px -12px 36px; color: #21180c; }
.hero-subtitle { color: #df8549; font-size: clamp(24px, 3.6vw, 55px); font-weight: 400; line-height: 1.2; margin: 0 0 48px; letter-spacing: -1px; }
.hero-subtitle span { white-space: nowrap; }
.hero-section .fine-line { height: 1px; background: #d9d5c8; margin: 0 36px 34px; }
.hero-lead { max-width: 850px; margin: 0 auto; font-size: 38px; line-height: 1.38; font-weight: 400; }
.hero-features { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 20px -4px 0; text-align: center; }
.hero-section .mini-feature { position: relative; padding: 0 22px; }
.hero-section .mini-feature + .mini-feature::before { content: ''; position: absolute; width: 1px; background: #e9bb98; left: 0; top: 48px; bottom: 8px; }
.mini-feature__icon { height: 80px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.mini-feature__icon img { width: auto; height: 72px; object-fit: contain; }
.hero-section .mini-feature h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.25; font-weight: 600; }
.hero-section .mini-feature p { margin: 0; font-size: 20px; line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 30px 0 0; margin-top: 30px; border-top: 1px solid #d7d5c4; }
.hero-actions .button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 50px; padding: 15px 24px; border-radius: 25px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .5px; }
.hero-actions .button--primary { background: #e79c66; color: #231b12; }
.hero-actions .button--secondary { color: #475e4c; border: 1px solid #a8b6a3; }
.hero-actions .button:hover { filter: brightness(.96); }
.hero-actions .button:focus-visible { outline: 2px solid #475e4c; outline-offset: 4px; }
@media(min-width: 1440px) { .hero-copy h1 { font-size: 110px; } }
@media(max-width: 1100px) {
 .hero-visual { height: 57vw; }
 .hero-copy { padding: 65px 34px 70px; }
 .hero-copy h1 { letter-spacing: -2px; margin-bottom: 30px; }
 .hero-subtitle { margin-bottom: 36px; }
 .hero-lead { font-size: 32px; }
 .hero-section .mini-feature { padding: 0 14px; }
 .hero-section .mini-feature h2 { font-size: 20px; }
 .hero-section .mini-feature p { font-size: 18px; }
}
@media(max-width: 800px) {
 .hero-section { padding: 14px 12px 24px; }
 .hero-copy { padding: 46px 26px 52px; border-radius: 34px; }
 .hero-copy h1 { font-size: 7.2vw; margin-bottom: 25px; }
 .hero-subtitle { font-size: 3.8vw; letter-spacing: -.5px; margin-bottom: 30px; }
 .hero-lead { font-size: 25px; }
 .hero-section .fine-line { margin: 0 15px 25px; }
 .hero-section .mini-feature { padding: 0 10px; }
 .hero-section .mini-feature h2 { font-size: 17px; }
 .hero-section .mini-feature p { font-size: 16px; }
 .mini-feature__icon { height: 62px; }
 .mini-feature__icon img { height: 57px; }
}
@media(max-width: 560px) {
 /* Keep the mobile content width equal to its CSS viewport in desktop previews. */
 html { scrollbar-width: none; }
 html::-webkit-scrollbar { display: none; }
 .hero-section { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
 .hero-section { padding: 6px 16px 20px; background: #f8f1e6; }
 .hero-layout { overflow: visible; padding-bottom: 36px; }
 .hero-visual { height: auto; border-radius: 0 0 24px 24px; overflow: hidden; }
 .hero-panel { margin: -24px 5px 0; }
 .hero-copy { padding: 18px 14px 22px; border-radius: 26px; background: rgba(255,253,250,.96); }
 .hero-copy h1 { margin: 0 0 12px; font-size: 9.2vw; letter-spacing: -1.2px; line-height: 1.06; white-space: nowrap; text-align: center; }
 .hero-subtitle { font-size: 4vw; line-height: 1.3; letter-spacing: -.35px; margin: 0 0 15px; white-space: nowrap; text-align: center; }
 .hero-subtitle span { display: inline; }
 .hero-section .fine-line { margin: 0 22px 14px; }
 .hero-lead { font-size: 12px; line-height: 1.5; width: calc(100% + 8px); margin-left: -4px; }
 .hero-lead .mobile-lead-line { display: block; }
 .hero-features { grid-template-columns: minmax(0,1fr); gap: 0; margin: 8px 0 0; text-align: left; }
 .hero-section .mini-feature { display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 10px; padding: 13px 4px; align-items: start; }
 .hero-section .mini-feature + .mini-feature { border-top: 1px solid #e9bb98; }
 .hero-section .mini-feature + .mini-feature::before { display: none; }
 .mini-feature__icon { grid-column: 1; grid-row: 1 / 3; height: 40px; margin: 0; }
 .mini-feature__icon img { height: auto; max-height: 38px; width: auto; max-width: 36px; }
 .hero-section .mini-feature h2 { grid-column: 2; font-size: 11.2px; line-height: 1.3; margin: 0 0 4px; }
 .hero-section .mini-feature p { grid-column: 2; font-size: 10px; line-height: 1.45; }
 .hero-actions { border-top: 0; margin: 6px -5px 0; padding-top: 0; gap: 12px; }
 .hero-actions .button { width: 100%; min-height: 47px; border-radius: 15px; font-size: 14px; padding: 14px 8px; letter-spacing: .1px; }
}
/* Landscape photo framing: trim only the empty strip above the headstock.
   The taller frame keeps both guitar bodies instead of clipping their lower halves. */
@media (orientation: landscape) {
 .hero-section .hero-visual { height: auto; aspect-ratio: 4096 / 3314; }
 .hero-section .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
}
/* Keep the iPad Air feature proportions across landscape viewport sizes. */
@media (orientation: landscape) {
 .hero-section .hero-features { container-type: inline-size; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; text-align: center; }
 .hero-section .mini-feature { display: block; padding: 0 1.75cqw; border-top: 0; }
 .hero-section .mini-feature h2 { font-size: 2.2cqw; line-height: 1.25; margin: 0 0 .75cqw; }
 .hero-section .mini-feature p { font-size: 1.9cqw; line-height: 1.4; }
 .hero-section .mini-feature__icon { height: 7.6cqw; margin: 0 0 1.3cqw; }
 .hero-section .mini-feature__icon img { height: 6.8cqw; width: auto; max-width: none; max-height: none; }
 .hero-section .mini-feature + .mini-feature::before { display: block; top: 4.6cqw; bottom: .75cqw; width: 1px; }
}
/* Screen 2 — all rules are scoped to the approved section boundary. */
.about-section, .about-section * { box-sizing: border-box; }
.about-section { position: relative; padding: 0 20px 30px; color: #24241f; font-family: Arial, Helvetica, sans-serif; background: #fff; }
.about-section > .decor-corner { display: none; }
.about-section > .container { position: relative; max-width: 1160px; margin: 0 auto; overflow: hidden; background: #f6f1e9; }
.about-section .about-figure { position: relative; margin: 0; }
.about-section .about-figure > img { display: block; width: 100%; height: auto; }
/* The PDF's unaltered photo crop already carries this exact caption. */
.about-section figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.about-section .about-content { position: relative; isolation: isolate; padding: 60px 11.5% 70px; background: radial-gradient(ellipse at 0 100%, #f9d7bd55, transparent 45%), radial-gradient(ellipse at 100% 100%, #cfe3d055, transparent 45%), #f6f1e9; }
.about-section .about-content::before, .about-section .about-content::after { content: ''; position: absolute; z-index: -1; bottom: -80px; width: 22%; height: 65%; border-radius: 50%; }
.about-section .about-content::before { left: -15%; background: #f9d9c0; transform: rotate(-25deg); }
.about-section .about-content::after { right: -15%; background: #d5e6d7; transform: rotate(25deg); }
.about-section .section-title--with-icon { display: flex; align-items: flex-start; gap: 22px; margin: 0 0 42px; }
.about-section .inline-guitar { display: block; width: 60px; flex: 0 0 60px; padding-top: 0; }
.about-section .inline-guitar img { display: block; width: 100%; height: 60px; object-fit: contain; }
.about-section h2 { font-size: clamp(26px,4.1vw,55px); line-height: 1.15; font-weight: 700; letter-spacing: -1.5px; margin: 0; }
.about-section .section-line { height: 3px; width: 42%; background: #b3d2ba; margin-top: 27px; }
.about-section .about-points { display: grid; gap: 42px; }
.about-section .about-point { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: start; gap: 30px; }
.about-section .about-point__icon { width: 92px; height: 92px; }
.about-section .about-point__icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.about-section .about-point p { font-size: 28px; line-height: 1.5; margin: 2px 0 0; font-weight: 400; }
@media(max-width:1100px) {
 .about-section .about-content { padding: 44px 10% 54px; }
 .about-section .about-point { grid-template-columns: 76px minmax(0,1fr); gap: 25px; }
 .about-section .about-point__icon { width: 76px; height: 76px; }
 .about-section .about-point p { font-size: 24px; }
 .about-section .about-points { gap: 34px; }
}
@media(max-width:800px) {
 .about-section { padding: 0 12px 24px; }
 .about-section .about-content { padding: 34px 8% 44px; }
 .about-section .inline-guitar { width: 45px; flex-basis: 45px; }
 .about-section .inline-guitar img { height: 45px; }
 .about-section .section-title--with-icon { gap: 15px; margin-bottom: 30px; }
 .about-section h2 { letter-spacing: -.8px; }
 .about-section .about-point { grid-template-columns: 64px minmax(0,1fr); gap: 20px; }
 .about-section .about-point__icon { width: 64px; height: 64px; }
 .about-section .about-point p { font-size: 19px; }
}
@media(max-width:560px) {
 .about-section { padding: 0 16px 20px; }
 .about-section .about-content { padding: 26px 20px 34px; }
 .about-section .section-title--with-icon { gap: 10px; margin-bottom: 25px; }
 .about-section .inline-guitar { width: 30px; flex-basis: 30px; }
 .about-section .inline-guitar img { height: 33px; }
 .about-section h2 { font-size: 24px; letter-spacing: -.65px; }
 .about-section .mobile-break { display: block; }
 .about-section .nowrap { white-space: nowrap; }
 .about-section .section-line { margin-top: 15px; height: 2px; width: 60%; }
 .about-section .about-points { gap: 25px; }
 .about-section .about-point { grid-template-columns: 43px minmax(0,1fr); gap: 12px; }
 .about-section .about-point__icon { width: 43px; height: 43px; }
 .about-section .about-point p { font-size: 14px; line-height: 1.5; margin-top: 0; }
}
/* Screen 3: isolated styles, preserving screens 1 and 2. */
.compare-section, .compare-section * { box-sizing: border-box; }
.compare-section { padding: 0 20px 30px; font-family: Arial, Helvetica, sans-serif; color: #22231f; background: #fff; }
.compare-section > .container { position: relative; isolation: isolate; overflow: hidden; max-width: 1160px; margin: 0 auto; padding: 105px 56px 80px; background: radial-gradient(ellipse at 0 0, #cfe0ce 0, transparent 27%), radial-gradient(ellipse at 100% 0, #f9d5bf 0, transparent 28%), radial-gradient(ellipse at 4% 100%, #dfe6d8 0, transparent 25%), #faf4eb; }
.compare-section .section-title { margin: 0 48px 52px; }
.compare-section h2 { margin: 0; font-size: clamp(34px,5.2vw,76px); line-height: 1.15; letter-spacing: -1.8px; font-weight: 700; }
.compare-section .section-line { width: 265px; max-width: 40%; height: 3px; margin: 30px 0 35px; background: #b8d7bd; }
.compare-section .section-intro { margin: 0; font-size: 27px; line-height: 1.5; }
.compare-section .compare-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.compare-section .compare-card { padding: 42px 24px 40px; border-radius: 26px; background: #fffefa; box-shadow: 0 6px 14px #6d5a3e0a; min-width: 0; }
.compare-section .compare-card.featured { background: #fcf0e1; border: 2px solid #ffb15e; padding: 40px 22px 38px; }
.compare-section .compare-card__icon { width: 140px; height: 140px; max-width: 55%; margin: 0 auto 28px; }
.compare-section .compare-card__icon img { display: block; width: 100%; height: auto; border-radius: 50%; }
.compare-section h3 { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 82px; font-size: 30px; line-height: 1.25; font-weight: 700; margin: 0 0 30px; padding-bottom: 24px; border-bottom: 2px solid #bfd6bf; }
.compare-section .featured h3 { border-color: #f6c59e; }
.compare-section .compare-block span { display: inline-block; font-size: 24px; line-height: 1.2; padding: 5px 15px; border-radius: 9px; background: #d1e4d0; }
.compare-section .compare-block.minus span { background: #ffd3b7; }
.compare-section .compare-block p, .compare-section .featured-copy { font-size: 24px; line-height: 1.65; margin: 10px 0 0; }
.compare-section .compare-block.plus { min-height: 235px; }
.compare-section .compare-block.minus { margin-top: 28px; padding-top: 27px; border-top: 2px solid #f9ceae; }
.compare-section .featured-copy { margin-top: 0; min-height: 235px; }
.compare-section .featured-copy + .featured-copy { min-height: 0; margin-top: 28px; padding-top: 27px; border-top: 2px solid #f9ceae; }
@media(max-width:1100px) {
 .compare-section > .container { padding: 65px 35px 60px; }
 .compare-section .section-title { margin: 0 28px 38px; }
 .compare-section .section-intro { font-size: 23px; }
 .compare-section .compare-card { padding: 30px 20px; }
 .compare-section .compare-card.featured { padding: 28px 18px; }
 .compare-section .compare-card__icon { width: 110px; height: 110px; margin-bottom: 22px; }
 .compare-section h3 { font-size: 25px; min-height: 88px; }
 .compare-section .compare-block span { font-size: 21px; }
 .compare-section .compare-block p, .compare-section .featured-copy { font-size: 20px; line-height: 1.55; }
 .compare-section .compare-block.plus, .compare-section .featured-copy { min-height: 210px; }
 .compare-section .featured-copy + .featured-copy { min-height: 0; }
}
@media(max-width:850px) {
 .compare-section { padding: 0 12px 24px; }
 .compare-section > .container { padding: 42px 30px; }
 .compare-section .section-title { margin: 0 0 30px; }
 .compare-section h2 { font-size: 42px; }
 .compare-section .section-intro { font-size: 20px; }
 .compare-section .compare-grid { grid-template-columns: minmax(0,1fr); gap: 24px; max-width: 610px; margin: 0 auto; }
 .compare-section .compare-card, .compare-section .compare-card.featured { padding: 30px; }
 .compare-section h3 { min-height: 0; font-size: 27px; margin-bottom: 22px; padding-bottom: 20px; }
 .compare-section .compare-block.plus, .compare-section .featured-copy { min-height: 0; }
 .compare-section .compare-card__icon { margin-bottom: 20px; }
 .compare-section .compare-block.minus, .compare-section .featured-copy + .featured-copy { margin-top: 24px; padding-top: 24px; }
}
@media(max-width:560px) {
 .compare-section { padding: 0 16px 20px; }
 .compare-section > .container { padding: 32px 18px; }
 .compare-section h2 { font-size: 29px; letter-spacing: -.7px; }
 .compare-section .section-line { margin: 20px 0 22px; }
 .compare-section .section-intro { font-size: 16px; line-height: 1.5; }
 .compare-section .compare-card, .compare-section .compare-card.featured { padding: 26px 20px; border-radius: 22px; }
 .compare-section .compare-card__icon { width: 100px; height: 100px; }
 .compare-section h3 { font-size: 23px; }
 .compare-section .compare-block span { font-size: 18px; }
 .compare-section .compare-block p, .compare-section .featured-copy { font-size: 17px; line-height: 1.55; }
}
/* Remove the reserved page-scrollbar strip on every viewport; scrolling stays enabled. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: #f8f1e6; }
/* Landscape comparison: shared grid rows keep both dividers aligned. */
@media (orientation: landscape) and (min-width: 900px) {
 .compare-section > .container { padding: 24px 32px 26px; }
 .compare-section .section-title { margin: 0 20px 22px; }
 .compare-section h2 { font-size: clamp(32px, 3vw, 43px); letter-spacing: -1px; }
 .compare-section .section-line { margin: 14px 0 16px; height: 2px; }
 .compare-section .section-intro { font-size: 16px; line-height: 1.4; }
 .compare-section .compare-grid { grid-template-rows: 64px 64px auto auto; gap: 14px 16px; }
 .compare-section .compare-card, .compare-section .compare-card.featured { display: grid; grid-row: span 4; grid-template-rows: subgrid; padding: 18px; border: 2px solid transparent; }
 .compare-section .compare-card.featured { border-color: #ffb15e; }
 .compare-section .compare-card__icon { width: 64px; height: 64px; margin: 0 auto; }
 .compare-section h3 { font-size: 20px; min-height: 0; height: 100%; margin: 0; padding-bottom: 12px; }
 .compare-section .compare-block span { font-size: 16px; padding: 3px 10px; border-radius: 6px; }
 .compare-section .compare-block p, .compare-section .featured-copy { font-size: clamp(16px,1.25vw,18px); line-height: 1.4; margin: 7px 0 0; }
 .compare-section .compare-block.plus, .compare-section .featured-copy { min-height: 0; }
 .compare-section .compare-block.minus, .compare-section .featured-copy + .featured-copy { margin: 0; padding-top: 14px; }
}
/* Let the page background continue through outer section margins. */
.hero-section, .about-section, .compare-section { background-color: #f8f1e6; }

/* Each screen fills the viewport; its content keeps symmetric inner spacing. */
main > section { box-sizing: border-box; width: 100%; }
.hero-section, .about-section, .compare-section { padding: 0 clamp(12px, 3vw, 44px); }
.hero-layout,
.about-section > .container,
.compare-section > .container { width: 100%; max-width: none; margin-inline: 0; }

/* Preserve the entire prepared wide photograph at its natural proportions. */
.hero-section .hero-visual { height: auto; aspect-ratio: auto; }
.hero-section .hero-visual img { width: 100%; height: auto; object-fit: contain; }

/* First screen: trim 35 source pixels from the top, retaining the full width. */
.hero-section .hero-visual { position: relative; aspect-ratio: 1672 / 906; }
.hero-section .hero-visual img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }

@media (orientation: landscape) {
 .hero-section .hero-copy { padding-top: 28px; padding-bottom: 32px; }
 .hero-section .hero-copy h1 { font-size: clamp(28px, 6.4vw, 88px); margin-top: 0; margin-bottom: 20px; }
 .hero-section .hero-subtitle { font-size: clamp(20px, 3.15vw, 48px); margin-bottom: 24px; }
 .hero-section .fine-line { margin-bottom: 20px; }
}

@media (orientation: portrait) {
 .hero-section .hero-copy { padding-top: 22px; padding-bottom: 26px; }
 .hero-section .hero-copy h1 { font-size: clamp(26px, 8.2vw, 98px); margin-top: 0; margin-bottom: 10px; }
 .hero-section .hero-subtitle { font-size: clamp(12px, 3.7vw, 50px); margin-bottom: 14px; }
 .hero-section .fine-line { margin-bottom: 16px; }
 .hero-section .hero-lead { font-size: clamp(16px, 3.5vw, 40px); line-height: 1.45; width: 100%; margin-inline: auto; }
 .hero-section .hero-lead .mobile-lead-line { display: inline; }
 .hero-section .hero-features { grid-template-columns: minmax(0, 1fr); text-align: left; margin: 12px 0 0; }
 .hero-section .mini-feature { display: grid; grid-template-columns: clamp(40px, 5.5vw, 64px) minmax(0, 1fr); column-gap: 14px; padding: 16px 4px; align-items: start; }
 .hero-section .mini-feature + .mini-feature { border-top: 1px solid #e9bb98; }
 .hero-section .mini-feature + .mini-feature::before { display: none; }
 .hero-section .mini-feature__icon { grid-column: 1; grid-row: 1 / 3; height: auto; margin: 0; }
 .hero-section .mini-feature__icon img { width: 100%; height: auto; max-width: none; max-height: none; }
 .hero-section .mini-feature h2 { grid-column: 2; font-size: clamp(18px, 2.8vw, 30px); line-height: 1.3; margin-bottom: 5px; }
 .hero-section .mini-feature p { grid-column: 2; font-size: clamp(16px, 2.5vw, 26px); line-height: 1.45; }
}

/* Shared typography: local Cyrillic-capable Lato, independent of layout rules. */
@font-face { font-family: 'Lato'; src: url('assets/fonts/Lato-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/fonts/Lato-Medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/fonts/Lato-SemiBold.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/fonts/Lato-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/fonts/Lato-ExtraBold.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
:root {
 --font-text: 'Lato', Arial, sans-serif;
 --weight-text: 400;
 --weight-accent: 500;
 --weight-label: 600;
 --weight-heading: 700;
 --weight-display: 800;
 --text-ink: #282521;
 --text-orange: #df8148;
 --text-green: #506753;
}
body, button, input, select, textarea { font-family: var(--font-text); }
body { color: var(--text-ink); font-weight: var(--weight-text); }
.hero-section, .about-section, .compare-section { font-family: var(--font-text); color: var(--text-ink); font-weight: var(--weight-text); }
h1, h2, h3, .type-heading { font-weight: var(--weight-heading); }
.hero-section .hero-copy h1 { font-weight: var(--weight-display); color: var(--text-ink); }
.hero-section .hero-subtitle { font-weight: var(--weight-accent); color: var(--text-orange); }
.hero-section .hero-lead, .about-section .about-point p { font-weight: var(--weight-text); }
.hero-section .mini-feature h2, .type-label { font-weight: var(--weight-label); }
.about-section h2, .compare-section h2, .compare-section h3 { font-weight: var(--weight-heading); }
.hero-actions .button { font-family: var(--font-text); font-weight: var(--weight-label); }
.hero-actions .button--primary { color: var(--text-ink); }
.hero-actions .button--secondary { color: var(--text-green); }
.type-accent { color: var(--text-orange); font-weight: var(--weight-accent); }
.type-text { font-weight: var(--weight-text); }

/* Keep the three formats in a shared comparison row at every width. */
.compare-section .compare-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
@media (max-width: 899px), (orientation: portrait) {
 .compare-section > .container { padding-inline: clamp(6px, 2vw, 24px); }
 .compare-section .compare-grid { grid-template-rows: auto auto auto auto; gap: clamp(10px, 1.8vw, 16px) clamp(5px, 1.2vw, 16px); margin-inline: 0; }
 .compare-section .compare-card, .compare-section .compare-card.featured {
  box-sizing: border-box; display: grid; grid-row: span 4; grid-template-rows: subgrid;
  padding: clamp(12px, 2.2vw, 24px) clamp(5px, 1.2vw, 16px);
  border: 2px solid transparent; border-radius: clamp(14px, 2.6vw, 26px);
 }
 .compare-section .compare-card.featured { border-color: #ffb15e; }
 .compare-section .compare-card__icon { width: clamp(40px, 8vw, 90px); height: auto; aspect-ratio: 1; max-width: 75%; margin: 0 auto; }
 .compare-section h3 { font-size: clamp(12px, 2.3vw, 25px); line-height: 1.25; min-height: 0; height: auto; margin: 0; padding-bottom: clamp(10px, 1.8vw, 20px); }
 .compare-section .compare-block span { font-size: clamp(12px, 1.9vw, 20px); padding: 3px clamp(4px, .9vw, 10px); border-radius: 6px; }
 .compare-section .compare-block p, .compare-section .featured-copy { font-size: clamp(12px, 1.9vw, 18px); line-height: 1.45; margin: 7px 0 0; }
 .compare-section .compare-block.plus, .compare-section .featured-copy { min-height: 0; }
 .compare-section .compare-block.minus, .compare-section .featured-copy + .featured-copy { min-height: 0; margin: 0; padding-top: clamp(10px, 1.8vw, 20px); }
}

/* Comparison text wraps only between whole words. */
.compare-section .compare-card,
.compare-section .compare-card h3,
.compare-section .compare-card p,
.compare-section .compare-card span {
 hyphens: none;
 word-break: normal;
 overflow-wrap: normal;
}

/* Screen 4: the PDF's vertical numbered learning sequence. */
.steps-section, .steps-section * { box-sizing: border-box; }
.steps-section {
 padding: 0 clamp(12px, 3vw, 44px);
 color: var(--text-ink); font-family: var(--font-text);
 background: #f8f1e6;
}
.steps-section > .container {
 position: relative; isolation: isolate; overflow: hidden;
 max-width: none; margin: 0 auto;
 padding: clamp(40px, 6.8vw, 90px) clamp(18px, 7vw, 100px) clamp(40px, 5vw, 72px);
 background: radial-gradient(ellipse at 90% 0, #fce8db55, transparent 46%), #faf5ed;
}
.steps-section > .container::before,
.steps-section > .container::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none;
 width: 280px; height: 300px;
 background: url('assets/steps-corner.svg') center / 100% 100% no-repeat;
}
.steps-section > .container::before { right: -10px; top: 0; }
.steps-section > .container::after { left: -40px; bottom: -40px; transform: rotate(180deg); filter: hue-rotate(75deg) saturate(.35); }
.steps-section .section-title { max-width: 1060px; margin: 0 auto 38px; }
.steps-section h2 { font-size: clamp(32px, 4.8vw, 64px); line-height: 1.12; font-weight: var(--weight-heading); margin: 0; }
.steps-section .section-line { width: 270px; max-width: 38%; height: 3px; background: #b8d7bd; margin: 26px 0 30px; }
.steps-section .section-intro { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.45; margin: 0; max-width: 790px; }
.steps-section .steps-list { list-style: none; padding: 0; margin: 0 auto; max-width: 1060px; }
.steps-section .step-row {
 position: relative; display: grid;
 grid-template-columns: 48px clamp(90px, 11vw, 145px) minmax(0, 1fr);
 column-gap: clamp(22px, 3.8vw, 50px); align-items: start;
 padding: 0; margin: 0 0 18px;
}
.steps-section .step-row:last-child { margin-bottom: 0; }
.steps-section .step-row:not(:last-child)::before {
 content: ''; position: absolute; left: 23px; top: 78px; bottom: -50px;
 border-left: 3px dotted #b8d7bd;
}
.steps-section .step-row__num {
 position: relative; z-index: 1; display: grid; place-items: center;
 width: 48px; height: 48px; margin-top: 34px; border-radius: 50%;
 background: linear-gradient(110deg, #7eaf7a, #91bd8e); color: #fff;
 font-size: 30px; line-height: 1; font-weight: var(--weight-heading);
}
.steps-section .step-row__icon {
 width: 100%; aspect-ratio: 1; margin-top: 12px; border-radius: 50%;
 display: grid; place-items: center; overflow: hidden;
 background: linear-gradient(130deg, #d2e5d4, #e8eee3); color: #164c1e;
}
.steps-section .step-row__icon.peach { background: linear-gradient(130deg, #fbd5be, #ffe2cd); color: #2e241b; }
.steps-section .step-row__icon svg { width: 76%; height: 76%; }
.steps-section .step-row__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.steps-section .step-row__card {
 border-radius: 20px; padding: 30px 34px; min-height: 165px;
 background: #fffdfbd9; box-shadow: 0 5px 10px #8f6f4510;
}
.steps-section .step-row h3 { margin: 0 0 12px; font-size: clamp(23px, 2.7vw, 32px); line-height: 1.2; font-weight: var(--weight-heading); }
.steps-section .step-row p { margin: 0; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.45; }
.steps-section .summary-note {
 max-width: 1060px; margin: 22px auto 0; display: grid;
 grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: center;
 padding: 22px 30px; border: 1px solid #ffcbaa; border-radius: 18px;
 background: linear-gradient(110deg, #ffe2cd, #fbd6bf);
}
.steps-section .summary-note span { display: block; }
.steps-section .summary-note svg { display: block; width: 100%; height: auto; }
.steps-section .summary-note p { margin: 0; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.3; font-weight: var(--weight-heading); }
.steps-section h2, .steps-section h3, .steps-section p {
 hyphens: none; word-break: normal; overflow-wrap: normal;
}
@media (max-width: 1023px) {
 .steps-section > .container { padding-inline: 5%; }
 .steps-section .step-row { grid-template-columns: 38px 90px minmax(0, 1fr); column-gap: 24px; }
 .steps-section .step-row__num { width: 38px; height: 38px; font-size: 25px; margin-top: 28px; }
 .steps-section .step-row:not(:last-child)::before { left: 18px; top: 64px; bottom: -44px; }
 .steps-section .step-row__card { padding: 24px; min-height: 146px; }
}
@media (max-width: 767px) {
 .steps-section > .container { padding: 38px 14px 36px; }
 .steps-section > .container::before, .steps-section > .container::after { width: 160px; height: 190px; opacity: .65; }
 .steps-section .section-title { margin-bottom: 28px; }
 .steps-section h2 { font-size: 32px; }
 .steps-section .section-line { margin: 20px 0 22px; max-width: 55%; }
 .steps-section .section-intro { font-size: 18px; }
 .steps-section .step-row {
  grid-template-columns: 28px 48px minmax(0, 1fr); column-gap: 8px;
  margin-bottom: 18px;
 }
 .steps-section .step-row__num { width: 28px; height: 28px; margin-top: 22px; font-size: 20px; }
 .steps-section .step-row__icon { margin-top: 12px; }
 .steps-section .step-row__card { min-height: 0; padding: 20px 12px; border-radius: 16px; }
 .steps-section .step-row:not(:last-child)::before { left: 13px; top: 50px; bottom: -40px; border-left-width: 2px; }
 .steps-section .step-row h3 { font-size: 21px; margin-bottom: 10px; }
 .steps-section .step-row p { font-size: 18px; line-height: 1.45; }
 .steps-section .summary-note { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px 14px; margin-top: 26px; border-radius: 16px; }
 .steps-section .summary-note p { font-size: 20px; }
}

/* Screen 4 compact pass; the original version is preserved in backups. */
.steps-section > .container { padding-top: 32px; padding-bottom: 30px; }
.steps-section .section-title { margin-bottom: 22px; }
.steps-section h2 { font-size: clamp(32px, 3.75vw, 54px); }
.steps-section .section-line { margin: 16px 0 18px; }
.steps-section .section-intro { font-size: 20px; line-height: 1.4; max-width: 900px; }
.steps-section .step-row {
 grid-template-columns: 34px clamp(64px, 7vw, 94px) minmax(0, 1fr);
 column-gap: 22px; margin-bottom: 10px;
}
.steps-section .step-row__num { width: 34px; height: 34px; font-size: 24px; margin-top: 18px; }
.steps-section .step-row__icon { margin-top: 2px; }
.steps-section .step-row:not(:last-child)::before { left: 16px; top: 50px; bottom: -30px; border-left-width: 2px; }
.steps-section .step-row__card { padding: 10px 24px; min-height: 0; }
.steps-section .step-row h3 { font-size: 26px; margin-bottom: 7px; }
.steps-section .step-row p { font-size: 20px; line-height: 1.4; }
.steps-section .summary-note { margin-top: 16px; padding: 14px 22px; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
.steps-section .summary-note p { font-size: 22px; }
@media (min-width: 768px) and (max-width: 1023px) {
 .steps-section .step-row { grid-template-columns: 30px 64px minmax(0, 1fr); column-gap: 16px; }
 .steps-section .step-row__num { width: 30px; height: 30px; font-size: 22px; margin-top: 14px; }
 .steps-section .step-row:not(:last-child)::before { left: 14px; top: 44px; bottom: -24px; }
 .steps-section .step-row__card { padding: 14px 20px; }
 .steps-section .step-row h3 { font-size: 23px; }
 .steps-section .step-row p, .steps-section .section-intro { font-size: 18px; }
 .steps-section .summary-note p { font-size: 20px; }
}
@media (max-width: 767px) {
 .steps-section > .container { padding-top: 30px; padding-bottom: 28px; }
 .steps-section .section-intro { font-size: 18px; }
 .steps-section .step-row {
  grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 28px auto;
  column-gap: 10px; row-gap: 6px; margin-bottom: 14px;
 }
 .steps-section .step-row__num { grid-column: 1; grid-row: 1; width: 26px; height: 26px; margin: 0 auto; font-size: 19px; }
 .steps-section .step-row__icon { grid-column: 1; grid-row: 2; width: 34px; margin: 0; position: relative; z-index: 1; }
 .steps-section .step-row__card { grid-column: 2; grid-row: 1 / 3; padding: 16px 14px; }
 .steps-section .step-row:not(:last-child)::before { left: 16px; top: 26px; bottom: -16px; }
 .steps-section .step-row h3 { font-size: 21px; margin-bottom: 8px; }
 .steps-section .step-row p { font-size: 18px; line-height: 1.4; }
 .steps-section .summary-note { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 16px 14px; margin-top: 18px; }
 .steps-section .summary-note p { font-size: 20px; }
}

/* Screen 5: three click-to-play examples, styled independently of other screens. */
.videos-section, .videos-section * { box-sizing: border-box; }
.videos-section {
 padding: 0 clamp(12px, 3vw, 44px); background: #f8f1e6;
 color: var(--text-ink); font-family: var(--font-text);
}
.videos-section > .container {
 position: relative; isolation: isolate; overflow: hidden;
 padding: 42px clamp(18px, 5vw, 72px) 42px;
 background: radial-gradient(ellipse at 0 100%, #d9e7d744, transparent 45%), #faf5ed;
}
.videos-section > .container::before, .videos-section > .container::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none;
 width: 260px; height: 290px; background: url('assets/steps-corner.svg') center / 100% 100% no-repeat;
}
.videos-section > .container::before { top: 0; right: 0; }
.videos-section > .container::after { bottom: -30px; left: -40px; transform: rotate(180deg); filter: hue-rotate(75deg) saturate(.35); }
.videos-section .section-title { margin: 0 0 28px; }
.videos-section h2 { font-size: clamp(32px, 3.75vw, 54px); line-height: 1.12; font-weight: var(--weight-heading); max-width: 1000px; margin: 0; }
.videos-section .section-line { height: 3px; width: 270px; max-width: 45%; background: #b8d7bd; margin: 20px 0 24px; }
.videos-section .section-intro { font-size: 20px; line-height: 1.45; max-width: 950px; margin: 0 0 16px; }
.videos-section .section-intro:last-child { margin-bottom: 0; }
.videos-section .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.videos-section .video-card { min-width: 0; border: 1px solid #eff0e7; border-radius: 22px; padding: 14px; background: #fffdfb; box-shadow: 0 5px 12px #8f6f4510; }
.videos-section .video-card--featured { border-color: #f2bd95; background: #fff3e7; }
.videos-section .video-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #e4eadd; }
.videos-section .video-preview { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #e4eadd; }
.videos-section .video-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.videos-section .play-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fffdfb; background: #48684cee; box-shadow: 0 2px 8px #0002; }
.videos-section .play-circle svg { width: 32px; height: 32px; }
.videos-section .video-card--featured .play-circle { background: #bd7949ee; }
.videos-section .video-preview:hover .play-circle { transform: translate(-50%, -50%) scale(1.08); }
.videos-section .video-preview:focus-visible { outline: 3px solid #506753; outline-offset: -4px; }
.videos-section .video-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.videos-section .video-card h3 { font-size: 23px; line-height: 1.3; font-weight: var(--weight-heading); margin: 18px 4px 8px; }
.videos-section .video-note { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: center; margin: 26px 0 0; padding: 22px 26px; border-radius: 20px; background: #e7ecdf; }
.videos-section .video-note__icon svg { display: block; width: 100%; height: auto; color: #506753; }
.videos-section .video-note p { font-size: 20px; line-height: 1.45; margin: 0; }
.videos-section h2, .videos-section h3, .videos-section p { hyphens: none; word-break: normal; overflow-wrap: normal; }
@media (min-width: 768px) and (max-width: 1100px) {
 .videos-section > .container { padding-inline: 5%; }
 .videos-section .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .videos-section .video-card--featured { grid-column: 1 / 3; width: calc((100% - 18px) / 2); justify-self: center; }
 .videos-section .video-card h3 { font-size: 22px; }
}
@media (max-width: 767px) {
 .videos-section > .container { padding: 32px 14px; }
 .videos-section > .container::before, .videos-section > .container::after { width: 160px; height: 190px; opacity: .65; }
 .videos-section .section-intro, .videos-section .video-note p { font-size: 18px; }
 .videos-section .video-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
 .videos-section .video-card { padding: 12px; border-radius: 18px; }
 .videos-section .video-card h3 { font-size: 22px; margin: 16px 2px 6px; }
 .videos-section .video-note { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin-top: 22px; padding: 18px 14px; border-radius: 18px; }
}

/* Screen 6: results and musical progression share one quiet composition. */
.month-section, .month-section * { box-sizing: border-box; }
.month-section { padding: 0 clamp(12px, 3vw, 44px); background: #f8f1e6; color: var(--text-ink); font-family: var(--font-text); }
.month-section > .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); padding: 44px clamp(18px, 5vw, 72px); background: linear-gradient(to bottom, transparent calc(100% - 44px), #f8f1e6), radial-gradient(ellipse at 100% 65%, #ffe3cc33, transparent 60%), #faf5ed; }
.month-section .month-results, .month-section .month-progress { min-width: 0; width: 100%; max-width: 900px; }
.month-section h2 { margin: 0; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.16; font-weight: var(--weight-heading); }
.month-section .section-line { width: 210px; max-width: 55%; height: 3px; margin: 20px 0 22px; background: #a9cdb0; }
.month-section .peach-line { width: 150px; background: #ffbb96; }
.month-section p, .month-section li, .month-section h2 { hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }
.month-section .month-list, .month-section .summary-note, .month-section .progress-path { max-width: 820px; }
.month-section .month-list ul { padding: 0; margin: 0; list-style: none; }
.month-section .month-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: center; padding: 11px 0; font-size: 20px; line-height: 1.4; }
.month-section .month-list li + li { border-top: 1px solid #d4e1d3; }
.month-section .month-check { width: 32px; height: 32px; color: #82b38a; }
.month-section .summary-note { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 22px; padding: 20px; border-radius: 18px; background: #e8ece1; }
.month-section .summary-note svg { display: block; width: 48px; height: 48px; }
.month-section .summary-note p { margin: 0; font-size: 19px; line-height: 1.4; }
.month-section .progress-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 20px; }
.month-section .progress-item__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #ffddc8; color: #376b39; }
.month-section .progress-item__icon svg { width: 46px; height: 46px; }
.month-section .progress-item p { font-size: 20px; line-height: 1.45; margin: 0; }
.month-section .path-arrow { width: 24px; height: 30px; margin: 6px 0 6px 92px; color: #ffb58e; }
.month-section .path-arrow svg { display: block; width: 24px; height: 30px; }
@media (max-width: 1000px) {
 .month-section > .container { gap: 36px; }
 .month-section h2 { font-size: clamp(30px, 4.5vw, 38px); }
}
@media (max-width: 767px) {
 .month-section > .container { padding: 32px 14px; gap: 32px; }
 .month-section h2 { font-size: 30px; }
 .month-section .section-line { margin: 16px 0 18px; }
 .month-section .month-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 0; font-size: 18px; }
 .month-section .month-check { width: 28px; height: 28px; }
 .month-section .summary-note { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px 14px; margin-top: 18px; }
 .month-section .summary-note svg { width: 38px; height: 38px; }
 .month-section .summary-note p, .month-section .progress-item p { font-size: 18px; }
 .month-section .progress-item { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
 .month-section .progress-item__icon { width: 52px; height: 52px; }
 .month-section .progress-item__icon svg { width: 38px; height: 38px; }
 .month-section .path-arrow { margin-left: 72px; margin-block: 4px; height: 26px; }
 .month-section .path-arrow svg { height: 26px; }
}

/* The hero's original transparent assets are the single source for both symbols. */
.about-point__icon:has(.unified-guitar), .compare-card__icon:has(.unified-guitar) { display: grid; place-items: center; border-radius: 50%; }
.about-point__icon:has(.unified-guitar) { background: linear-gradient(130deg, #d2e5d4, #e8eee3); }
.compare-card__icon:has(.unified-guitar) { background: linear-gradient(130deg, #fbd5be, #ffe2cd); }
.about-section .about-point__icon img.unified-guitar, .compare-section .compare-card__icon img.unified-guitar { width: 70%; height: 70%; object-fit: contain; border-radius: 0; }
.steps-section .step-row__icon img.unified-guitar { width: 76%; height: 76%; object-fit: contain; }
.month-section .progress-item__icon img { display: block; width: 46px; height: 46px; object-fit: contain; }
.subscription-icon .unified-notes { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 767px) {
 .month-section .progress-item__icon img { width: 38px; height: 38px; }
}

/* Recolour the original alpha contours through CSS; keep each circle intact. */
.about-section .about-point__icon:has(.unified-guitar),
.compare-section .compare-card__icon:has(.unified-guitar),
.month-section .progress-item__icon:has(.unified-guitar),
.month-section .progress-item__icon:has(.unified-notes) {
 position: relative;
 --icon-mask: url('assets/benefit-guitar.png');
 --icon-size: 70%;
 --icon-contour: #477c3c;
}
.compare-section .compare-card__icon:has(.unified-guitar) { --icon-contour: #164c1e; }
.month-section .progress-item__icon:has(.unified-guitar),
.month-section .progress-item__icon:has(.unified-notes) { --icon-size: 46px; --icon-contour: #376b39; }
.month-section .progress-item__icon:has(.unified-notes) { --icon-mask: url('assets/benefit-notes.png'); }
.about-section .about-point__icon img.unified-guitar,
.compare-section .compare-card__icon img.unified-guitar,
.month-section .progress-item__icon img.unified-guitar,
.month-section .progress-item__icon img.unified-notes { visibility: hidden; }
.about-section .about-point__icon:has(.unified-guitar)::after,
.compare-section .compare-card__icon:has(.unified-guitar)::after,
.month-section .progress-item__icon:has(.unified-guitar)::after,
.month-section .progress-item__icon:has(.unified-notes)::after {
 content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
 width: var(--icon-size); height: var(--icon-size); background-color: var(--icon-contour);
 -webkit-mask: var(--icon-mask) center / contain no-repeat;
 mask: var(--icon-mask) center / contain no-repeat;
 pointer-events: none;
}
@media (max-width: 767px) {
 .month-section .progress-item__icon:has(.unified-guitar),
 .month-section .progress-item__icon:has(.unified-notes) { --icon-size: 38px; }
}

/* Compensate for the reference PNG's translucent, diagonal contour. */
.about-section .about-point__icon:has(.unified-guitar) { --icon-size: 78%; }
.compare-section .compare-card__icon:has(.unified-guitar) { --icon-size: 80%; }
.month-section .progress-item__icon:has(.unified-guitar) { --icon-size: 50px; }
.steps-section .step-row__icon:has(.unified-guitar) {
 position: relative; --icon-size: 82%; --icon-contour: #164c1e;
 --icon-mask: url('assets/benefit-guitar.png');
}
.steps-section .step-row__icon img.unified-guitar { visibility: hidden; }
.steps-section .step-row__icon:has(.unified-guitar)::after {
 content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
 width: var(--icon-size); height: var(--icon-size); background-color: var(--icon-contour);
 -webkit-mask: var(--icon-mask) center / contain no-repeat;
 mask: var(--icon-mask) center / contain no-repeat; pointer-events: none;
}
.about-section .about-point__icon:has(.unified-guitar)::after,
.compare-section .compare-card__icon:has(.unified-guitar)::after,
.steps-section .step-row__icon:has(.unified-guitar)::after,
.month-section .progress-item__icon:has(.unified-guitar)::after { filter: url('#guitar-contour-ink'); }
@media (max-width: 767px) {
 .month-section .progress-item__icon:has(.unified-guitar) { --icon-size: 42px; }
}

/* Apply opacity correction after masking, without filtering the circular background. */
.about-point__icon:has(.guitar-ink)::after,
.compare-card__icon:has(.guitar-ink)::after,
.step-row__icon:has(.guitar-ink)::after,
.progress-item__icon:has(.guitar-ink)::after { content: none; }
.guitar-ink {
 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
 width: var(--icon-size); height: var(--icon-size); pointer-events: none;
 filter: url('#guitar-contour-ink');
}
.guitar-ink::before {
 content: ''; display: block; width: 100%; height: 100%; background: var(--icon-contour);
 -webkit-mask: var(--icon-mask) center / contain no-repeat;
 mask: var(--icon-mask) center / contain no-repeat;
}

/* Screen 6 finishing pass: natural heading wraps and quiet decoration. */
.month-section > .container { position: relative; isolation: isolate; }
.month-section .month-results, .month-section .month-progress { max-width: none; position: relative; }
.month-section h2 { max-width: 1100px; text-wrap: pretty; }
.month-section .month-list, .month-section .summary-note, .month-section .progress-path { max-width: 880px; }
.month-section .section-line, .month-section .peach-line { width: clamp(150px, 15vw, 190px); max-width: 55%; height: 3px; }
.month-section .month-results::before, .month-section .month-results::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; width: min(27%, max(0px, calc(100% - 900px)));
}
.month-section .month-results::before { top: -24px; height: 330px; background: radial-gradient(ellipse, #cbdcc875, #dce7d42a 48%, transparent 72%); }
.month-section .month-results::after { bottom: -24px; height: 250px; background: radial-gradient(ellipse, #f9d9c357, transparent 72%); }
.month-section .month-progress::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; top: 10%;
 width: min(24%, max(0px, calc(100% - 900px))); height: 86%; opacity: .5;
 background: url("assets/decor-inline-1.svg") center / 100% 100% no-repeat;
}
@media (min-width: 1200px) {
 .month-section .month-list li, .month-section .progress-item p { font-size: 23px; }
 .month-section .summary-note p { font-size: 22px; }
}
@media (max-width: 1100px) {
 .month-section .month-results::before, .month-section .month-results::after, .month-section .month-progress::after { display: none; }
}

/* Background stage 1: dissolve the existing side shapes into the next section. */
.about-section, .compare-section { background-color: #f8f1e6; }
.about-section .about-content {
 background: linear-gradient(to bottom, transparent calc(100% - 140px), #f8f1e6),
 radial-gradient(ellipse at 0 100%, #f9d7bd55, transparent 45%),
 radial-gradient(ellipse at 100% 100%, #cfe3d055, transparent 45%), #f6f1e9;
}
.about-section .about-content::before, .about-section .about-content::after {
 -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent calc(100% - 80px));
 mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent calc(100% - 80px));
}
.compare-section > .container {
 background: linear-gradient(to bottom, #f8f1e6, transparent 120px),
 radial-gradient(ellipse at 100% 0, #d7e4d4aa 0, transparent 32%),
 radial-gradient(ellipse at 0 5%, #f4dbc6a0 0, transparent 30%),
 radial-gradient(ellipse at 4% 100%, #dfe6d8 0, transparent 25%), #faf4eb;
}
@media (max-width: 560px) {
 .about-section .about-content {
  background: linear-gradient(to bottom, transparent calc(100% - 100px), #f8f1e6),
  radial-gradient(ellipse at 0 100%, #f9d7bd55, transparent 45%),
  radial-gradient(ellipse at 100% 100%, #cfe3d055, transparent 45%), #f6f1e9;
 }
 .compare-section > .container {
  background: linear-gradient(to bottom, #f8f1e6, transparent 90px),
  radial-gradient(ellipse at 100% 0, #d7e4d4aa 0, transparent 32%),
  radial-gradient(ellipse at 0 5%, #f4dbc6a0 0, transparent 30%),
  radial-gradient(ellipse at 4% 100%, #dfe6d8 0, transparent 25%), #faf4eb;
 }
}

/* Background stage 2: soft washes and fading lines, with individual compositions. */
.steps-section > .container {
 background: radial-gradient(ellipse at 4% 0, #dfe6d855, transparent 32%),
 radial-gradient(ellipse at 94% 12%, #f5dfcf55, transparent 38%),
 radial-gradient(ellipse at 8% 100%, #d9e7d733, transparent 32%), #faf5ed;
}
.videos-section > .container {
 background: radial-gradient(ellipse at 100% 15%, #f9dfcc70, transparent 40%),
 radial-gradient(ellipse at 0 100%, #d9e7d744, transparent 45%), #faf5ed;
}
.steps-section > .container::before, .steps-section > .container::after,
.videos-section > .container::before, .videos-section > .container::after {
 background-image: url('assets/steps-corner.svg?v=soft-20261009');
 -webkit-mask-image: radial-gradient(ellipse at 80% 15%, #000 15%, #0009 48%, transparent 78%);
 mask-image: radial-gradient(ellipse at 80% 15%, #000 15%, #0009 48%, transparent 78%);
}
.steps-section > .container::before { opacity: .7; }
.steps-section > .container::after { opacity: .55; }
.videos-section > .container::before { opacity: .85; }
.videos-section > .container::after { opacity: .45; }
/* Fade both ends of the corner artwork as well as its outside edge. */
.steps-section > .container::before, .steps-section > .container::after,
.videos-section > .container::before, .videos-section > .container::after {
 -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45px, #000 calc(100% - 45px), transparent), radial-gradient(ellipse at 80% 15%, #000 15%, #0009 48%, transparent 78%);
 mask-image: linear-gradient(to bottom, transparent, #000 45px, #000 calc(100% - 45px), transparent), radial-gradient(ellipse at 80% 15%, #000 15%, #0009 48%, transparent 78%);
 -webkit-mask-composite: source-in;
 mask-composite: intersect;
}

/* Screen 7: scoped repertoire typography, card and disclosure. */
.repertoire-section, .repertoire-section * { box-sizing: border-box; }
.repertoire-section { padding: 0 clamp(12px, 3vw, 44px); background: #f8f1e6; color: var(--text-ink); font-family: var(--font-text); }
.repertoire-section > .container { position: relative; isolation: isolate; overflow: hidden; padding: 44px clamp(18px, 5vw, 72px); background: #faf5ed; }
.repertoire-section > .container::before { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 0; right: 0; width: 260px; height: 300px; opacity: .4; background: url("assets/decor-inline-2.svg") center/contain no-repeat; mask-image: linear-gradient(#000, transparent); }
.repertoire-section h2 { margin: 0; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.16; font-weight: var(--weight-heading); }
.repertoire-section .section-line { width: 190px; max-width: 55%; height: 3px; background: #a9cdb0; margin: 20px 0 22px; }
.repertoire-section .section-intro { max-width: 950px; font-size: 22px; line-height: 1.45; margin: 0 0 28px; }
.repertoire-section .repertoire-box { padding: 28px 32px; border-radius: 22px; background: #fffdfa; box-shadow: 0 4px 12px #8066400c; }
.repertoire-section .repertoire-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 44px; }
.repertoire-section .repertoire-list li { position: relative; padding-left: 22px; margin: 0 0 11.5px; break-inside: avoid; font-size: 16px; line-height: 1.45; }
.repertoire-section .repertoire-list li::before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #a8c29b; left: 0; top: .6em; }
.repertoire-section .repertoire-list--hidden:not([hidden]) { grid-template-rows: repeat(15, auto); margin-top: 22px; padding-top: 22px; border-top: 1px solid #dce5d5; animation: repertoire-in .22s ease-out; }
.repertoire-section .repertoire-list[hidden] { display: none; }
.repertoire-section .toggle-button { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; margin: 22px auto; padding: 13px 24px; border: 0; border-radius: 16px; color: #405d43; background: #dce7d5; font: var(--weight-label) 16px/1.3 var(--font-text); cursor: pointer; transition: background .18s; }
.repertoire-section .toggle-button:hover { background: #cfdcc7; }
.repertoire-section .toggle-button:focus-visible { outline: 2px solid #506753; outline-offset: 4px; }
.repertoire-section .toggle-button svg { width: 22px; height: 22px; flex: 0 0 22px; transition: transform .22s; }
.repertoire-section .toggle-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.repertoire-section .repertoire-note { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 18px; align-items: center; padding: 20px 24px; border-radius: 18px; background: #e8ece1; }
.repertoire-section .repertoire-note svg { width: 46px; height: 46px; color: #506753; }
.repertoire-section .repertoire-note p { margin: 0; font-size: 20px; line-height: 1.45; }
.repertoire-section h2, .repertoire-section p, .repertoire-section li { hyphens: none; word-break: normal; overflow-wrap: normal; }
@keyframes repertoire-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
 .repertoire-section > .container { padding: 32px 14px; }
 .repertoire-section .section-intro, .repertoire-section .repertoire-note p { font-size: 18px; }
 .repertoire-section .repertoire-list li { font-size: 14px; }
 .repertoire-section .repertoire-list, .repertoire-section .repertoire-list--hidden:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
 .repertoire-section .repertoire-box { padding: 22px 18px; border-radius: 18px; }
 .repertoire-section .toggle-button { width: 100%; padding-inline: 14px; font-size: 14px; }
 .repertoire-section .repertoire-note { grid-template-columns: 32px minmax(0,1fr); gap: 12px; padding: 16px 14px; }
 .repertoire-section .repertoire-note svg { width: 32px; height: 32px; }
 .repertoire-section .section-line { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
 .repertoire-section .repertoire-list--hidden:not([hidden]) { animation: none; }
 .repertoire-section .toggle-button svg { transition: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
 .repertoire-section .repertoire-list li { font-size: 15px; }
}

/* Independent repertoire columns prevent wrapped titles from stretching adjacent rows. */
.repertoire-section .repertoire-list { grid-template-rows: none; grid-auto-flow: row; align-items: start; }
.repertoire-section .repertoire-list--hidden:not([hidden]) { grid-template-rows: none; }
.repertoire-section .repertoire-column { margin: 0; padding: 0; list-style: none; min-width: 0; }

/* Student performances: four linked previews; all rules scoped to screen 8. */
.students-section, .students-section * { box-sizing: border-box; }
.students-section { padding: 0 clamp(12px,3vw,44px); color: var(--text-ink); font-family: var(--font-text); background: #f8f1e6; }
.students-section > .container { position: relative; isolation: isolate; overflow: hidden; padding: 44px clamp(18px,5vw,72px); background: radial-gradient(ellipse at 0 10%, #dce9d850, transparent 32%), radial-gradient(ellipse at 100% 18%, #f8dfcc60, transparent 35%), #faf5ed; }
.students-section h2 { max-width: 1100px; margin: 0; font-size: clamp(30px,3.5vw,48px); line-height: 1.16; font-weight: var(--weight-heading); }
.students-section .section-line { width: 190px; max-width: 55%; height: 3px; margin: 20px 0 22px; background: #a9cdb0; }
.students-section .section-intro { margin: 0 0 28px; font-size: 22px; line-height: 1.45; max-width: 950px; }
.students-section .student-grid { max-width: 960px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.students-section .student-video { display: block; padding: 10px; border-radius: 20px; background: #fffdfa; box-shadow: 0 4px 12px #8066400c; text-decoration: none; }
.students-section .student-preview { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg,#e3eadc,#f3e3d3); }
.students-section .student-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.students-section .student-preview img[hidden] { display: none; }
.students-section .student-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #34543cdd; box-shadow: 0 2px 8px #0002; transition: background .18s; }
.students-section .student-play svg { width: 26px; height: 26px; }
.students-section .student-video:hover .student-play { background: #294830; }
.students-section .student-playlist { display: flex; width: fit-content; max-width: 100%; justify-content: center; text-align: center; padding: 14px 24px; margin: 24px 0 0; border-radius: 16px; min-height: 48px; background: #dce7d5; color: #405d43; font-size: 16px; line-height: 1.4; font-weight: var(--weight-label); text-decoration: none; transition: background .18s; }
.students-section .student-playlist:hover { background: #cfdcc7; }
.students-section a:focus-visible { outline: 2px solid #506753; outline-offset: 4px; }
.students-section h2, .students-section p, .students-section a { hyphens: none; word-break: normal; overflow-wrap: normal; }
@media(max-width:767px) {
 .students-section > .container { padding: 32px 14px; }
 .students-section .section-intro { font-size: 18px; }
 .students-section .section-line { width: 150px; }
 .students-section .student-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
 .students-section .student-playlist { width: 100%; padding: 14px 16px; font-size: 14px; }
}
/* Browser extensions may inject download controls alongside media links. */
.students-section .student-grid > :not(.student-video) { display: none; }

/* Meaningful title groups and decoration confined to the spare gallery area. */
.students-section .students-title-part { display: block; }
.students-section .students-title-group { white-space: nowrap; }
@media (min-width: 1280px) and (orientation: landscape) {
 .students-section > .container::after { content: ''; position: absolute; pointer-events: none; z-index: -1; top: 290px; left: calc(clamp(18px,5vw,72px) + 985px); right: 8px; height: 480px; background: radial-gradient(ellipse at 80% 45%, #f4ceb140, transparent 70%); }
 .students-section > .container::before { content: ''; position: absolute; pointer-events: none; z-index: -1; top: 310px; left: calc(clamp(18px,5vw,72px) + 985px); right: 8px; height: 440px; opacity: .4; background: url("assets/decor-inline-3.svg") center/100% 100% no-repeat; mask-image: linear-gradient(transparent,#000 25%,#000 75%,transparent); }
}

/* Screen 9: original PDF portraits framed in CSS, without altering source pixels. */
.teachers-section, .teachers-section * { box-sizing: border-box; }
.teachers-section { padding: 0 clamp(12px,3vw,44px); color: var(--text-ink); font-family: var(--font-text); background: #f8f1e6; }
.teachers-section > .decor-corner { display: none; }
.teachers-section > .container { padding: 44px clamp(18px,5vw,72px); background: radial-gradient(ellipse at 0 12%,#dfe7d54d,transparent 30%),radial-gradient(ellipse at 100% 14%,#f7ddc650,transparent 32%),#faf5ed; }
.teachers-section .section-title { text-align: center; }
.teachers-section h2 { margin: 0; font-size: clamp(30px,3.5vw,48px); line-height: 1.16; font-weight: var(--weight-heading); }
.teachers-section .section-line { width: 190px; height: 3px; background: #a9cdb0; margin: 20px auto 30px; }
.teachers-section .teacher-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 1000px; margin: auto; gap: 36px; }
.teachers-section .teacher-card { text-align: center; }
.teachers-section .teacher-photo { position: relative; width: min(100%,340px); aspect-ratio: 1; margin: 0 auto 22px; overflow: hidden; border-radius: 14px; }
.teachers-section .teacher-source { position: absolute; max-width: none; width: 100%; height: auto; top: 0; }
.teachers-section .teacher-source--nina { width:107%; left:-5%; top:-38%; }
.teachers-section .teacher-source--yuri { width:142%; left:-24%; top:-9%; }
.teachers-section .teacher-name { margin: 0; font-size: 24px; line-height: 1.25; font-weight: var(--weight-heading); }
.teachers-section .teacher-name--green { color: #506753; }
.teachers-section .teacher-name--peach { color: var(--text-orange); }
.teachers-section .teacher-name-line { width: 64px; height: 3px; margin: 16px auto; background: #98b38b; }
.teachers-section .teacher-name-line--peach { background: #e9a379; }
.teachers-section .teacher-card p { margin: 6px 0; font-size: 20px; line-height: 1.45; }
.teachers-section .teacher-guitar-sketch { display: none; }
.teachers-section .why-us { margin: 32px auto 0; max-width: 1100px; padding: 28px 32px; border-radius: 24px; background: #fffdf9d9; }
.teachers-section .why-us h3 { margin: 0; text-align: center; color: #506753; font-size: 28px; line-height: 1.25; }
.teachers-section .why-us-line { width: 90px; height: 3px; background: #98b38b; margin: 16px auto 24px; }
.teachers-section .why-item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 18px; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px dashed #e9bd9e; }
.teachers-section .why-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.teachers-section .why-dot { width: 14px; height: 14px; margin-top: 6px; background: #8ca77b; border-radius: 50%; }
.teachers-section .why-item--peach .why-dot { background: #df8148; }
.teachers-section .why-item h4 { margin: 0 0 8px; font-size: 22px; line-height: 1.35; font-weight: var(--weight-heading); }
.teachers-section .why-item p { margin: 0; font-size: 20px; line-height: 1.45; }
.teachers-section h2, .teachers-section h3, .teachers-section h4, .teachers-section p { hyphens: none; word-break: normal; overflow-wrap: normal; }
@media(max-width:850px) {
 .teachers-section .teacher-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
}
@media(max-width:767px) {
 .teachers-section > .container { padding: 32px 14px; }
 .teachers-section .section-line { width: 150px; }
 .teachers-section .teacher-name { font-size: 22px; }
 .teachers-section .teacher-card p, .teachers-section .why-item p { font-size: 18px; }
 .teachers-section .why-us { padding: 22px 16px; }
 .teachers-section .why-us h3 { font-size: 24px; }
 .teachers-section .why-item { gap: 10px; grid-template-columns: 14px minmax(0,1fr); }
 .teachers-section .why-item h4 { font-size: 20px; }
}

/* Teacher refinements: clean portrait boundaries, balanced wrapping and soft side shapes. */
.teachers-section > .container { position: relative; isolation: isolate; overflow: hidden; }
.teachers-section .teacher-photo { border-radius: 16px; background: transparent; border: 0; box-shadow: none; clip-path: inset(0 round 16px); }
.teachers-section .teacher-photo::before, .teachers-section .teacher-photo::after { content: none; }
.teachers-section .teacher-source--nina { width:107%; left:-5%; top:-38%; }
.teachers-section .teacher-source--yuri { width:142%; left:-24%; top:-9%; }
.teachers-section .teacher-name--peach, .teachers-section .teacher-name-line--peach { color: #df8148; }
.teachers-section .teacher-name-line--peach { background: #df8148; }
.teachers-section .teacher-name-line--green { background: #506753; }
.teachers-section h2, .teachers-section .why-us h3, .teachers-section .why-item h4 { text-wrap: balance; }
.teachers-section .teacher-name, .teachers-section .teacher-card p { text-wrap: balance; }
@media(min-width:851px) and (orientation:landscape) {
 .teachers-section > .container::before, .teachers-section > .container::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
 .teachers-section > .container::after { right: -95px; top: 160px; width: clamp(220px,22vw,410px); height: 480px; border-radius: 48% 52% 60% 40%; background: radial-gradient(ellipse, #f2c8a980 0%,#f4d1b850 40%,transparent 72%); transform: rotate(-14deg); }
 .teachers-section > .container::before { left: -90px; top: 300px; width: clamp(190px,18vw,320px); height: 310px; border-radius: 60% 40% 48% 52%; background: radial-gradient(ellipse,#c5d8bb80,#d4e2c950 40%,transparent 72%); transform: rotate(20deg); }
 .teachers-section .teacher-area, .teachers-section .why-us { position: relative; z-index: 1; }
}
@media(max-width:430px) {
 .teachers-section .why-us { padding-inline: 12px; }
 .teachers-section .why-item { gap: 8px; }
 .teachers-section .teacher-name { font-size: clamp(19px,5.4vw,22px); }
}
/* Screen 9 decorative pass: asymmetric washes fade at both section boundaries. */
.teachers-section > .container {
 background: linear-gradient(to bottom,#faf5ed,transparent 130px,transparent calc(100% - 130px),#faf5ed),
 radial-gradient(ellipse at 96% 26%,#f3d4bc88,transparent 34%),
 radial-gradient(ellipse at 2% 15%,#d0dfc977,transparent 25%),
 radial-gradient(ellipse at 18% 82%,#e0e8d64d,transparent 30%),
 radial-gradient(ellipse at 90% 68%,#f4dfcc44,transparent 24%),#faf5ed;
}
.teachers-section > .container::before, .teachers-section > .container::after { content: none; }
.teachers-section .why-item::before {
 content: ''; position: absolute; left: 6.5px; top: 20px; bottom: 20px;
 width: 1px; background: #8ca77b; pointer-events: none;
}
.teachers-section .why-item--peach::before { background: #df8148; }
.teachers-section .why-item:last-child::before { bottom: 0; }
@media(min-width:851px) {
 .teachers-section .teacher-grid { position: relative; }
 .teachers-section .teacher-grid::after {
  content: ''; position: absolute; left: 50%; top: 362px; bottom: 0;
  border-left: 1px dashed #ebc5a9; pointer-events: none;
 }
 .teachers-section .teacher-area::before {
  content: ''; position: absolute; left: -52px; top: 22px; width: 72px; height: 96px;
  background-image: radial-gradient(circle,#dfb69b 2px,transparent 2.5px);
  background-size: 24px 24px; opacity: .65; pointer-events: none;
 }
}
/* Final teacher backdrop: shaped pastels with directional fading. */
.teachers-section > .container { background: #faf5ed; }
.teachers-section > .container::before,
.teachers-section > .container::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none;
 border-radius: 50%; transform: none;
 mask-image: linear-gradient(to bottom,transparent,#000 22%,#000 65%,transparent);
}
.teachers-section > .container::before {
 left: 12px; top: 110px; width: clamp(140px,18vw,260px); height: 380px;
 background: linear-gradient(115deg,#dce1cfb3 0%,#a5af914d 35%,#dce1cf44 58%,transparent 82%);
 transform: rotate(18deg);
}
.teachers-section > .container::after {
 right: 12px; top: 280px; width: clamp(170px,21vw,310px); height: 430px;
 background: linear-gradient(255deg,#efc8b280 0%,#f7e5d9aa 42%,#f7e5d933 65%,transparent 88%);
 transform: rotate(-17deg);
}
@media(min-width:851px) {
 .teachers-section .teacher-area::after {
  content: ''; position: absolute; right: -44px; top: 420px;
  width: 54px; height: 54px; pointer-events: none;
  background: radial-gradient(circle,#dab49c 1.6px,transparent 2px) 0 0/18px 18px;
  opacity: .45;
 }
}
@media(max-width:767px) {
 .teachers-section > .container::before, .teachers-section > .container::after { content: none; }
 .teachers-section .teacher-card:first-child { position: relative; }
 .teachers-section .teacher-card:first-child::before {
  content: ''; position: absolute; right: -7px; top: min(278px, calc(100vw - 118px));
  width: 36px; height: 54px; pointer-events: none;
  background: radial-gradient(circle,#dab49c 1.6px,transparent 2px) 0 0/18px 18px;
  opacity: .55;
 }
 .teachers-section .teacher-photo { z-index: 1; }
}
@media(max-width:360px) {
 .teachers-section .teacher-card:first-child::before { height: 36px; }
}
@media(max-width:767px) {
 .teachers-section .teacher-card:first-child::before { top: calc(min(340px, 100vw - 52px) - 30px); }
}
@media(max-width:360px) {
 .teachers-section .teacher-card:first-child::before { top: calc(min(340px, 100vw - 52px) - 18px); }
}
/* Portrait decoration follows each photograph; desktop geometry stays intact. */
.teachers-section .teacher-photo-frame { display: contents; }
@media (max-width:767px), (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
 .teachers-section .teacher-photo-frame { display: block; position: relative; isolation: isolate; width: min(100%,340px); margin: 0 auto 22px; }
 .teachers-section .teacher-photo-frame .teacher-photo { width: 100%; margin: 0; }
 .teachers-section .teacher-card:first-child::before { content: none; }
 .teachers-section .teacher-photo-frame::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 83%; height: 88%; border-radius: 50%; }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::before { left: -30px; top: -22px; background: linear-gradient(125deg,#a5af9170,#dce1cf88 45%,transparent 86%); transform: rotate(-24deg); mask-image: linear-gradient(110deg,#000 15%,#000 60%,transparent); }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::before { right: -28px; bottom: -20px; background: linear-gradient(300deg,#efc8b280,#f7e5d9aa 45%,transparent 86%); transform: rotate(20deg); mask-image: linear-gradient(280deg,#000 15%,#000 60%,transparent); }
 .teachers-section .teacher-photo-frame::after { content: ''; position: absolute; pointer-events: none; width: 36px; height: 54px; background: radial-gradient(circle,#dab49c 1.6px,transparent 2px) 0 0/18px 18px; opacity: .6; }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::after { right: -12px; bottom: -12px; }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::after { left: -12px; bottom: -12px; }
}
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
 .teachers-section > .container::before, .teachers-section > .container::after { content: none; }
 .teachers-section .teacher-photo-frame::before { width: 100%; height: 105%; }
 .teachers-section .teacher-photo-frame::after { width: 54px; height: 54px; }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::after { left: -30px; right: auto; top: -14px; bottom: auto; }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::after { right: -30px; left: auto; bottom: -14px; }
}
@media(max-width:360px) {
 .teachers-section .teacher-photo-frame::after { height: 36px; }
}
/* Larger asymmetric portrait backdrops for vertical layouts only. */
@media (max-width:767px), (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
 .teachers-section .teacher-card:first-child .teacher-photo-frame::before {
  width: 130%; height: 130%; left: -24%; top: -20%;
  border-radius: 46% 54% 58% 42%; transform: rotate(-14deg);
  background: linear-gradient(125deg,#a5af9180 5%,#dce1cfaa 48%,#dce1cf33 70%,transparent 88%);
  mask-image: linear-gradient(145deg,transparent 3%,#000 19%,#000 58%,transparent 88%);
 }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::before {
  width: 145%; height: 120%; right: -27%; bottom: -8%;
  border-radius: 54% 46% 48% 52%; transform: rotate(12deg);
  background: linear-gradient(300deg,#efc8b299 8%,#f7e5d9cc 45%,#f7e5d944 70%,transparent 88%);
  mask-image: linear-gradient(285deg,transparent 3%,#000 20%,#000 62%,transparent 91%);
 }
 .teachers-section .teacher-photo-frame::after {
  width: 88px; height: 88px;
  background-size: 22px 22px; opacity: .65; z-index: -1;
 }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::after {
  left: -20px; right: auto; top: -18px; bottom: auto;
 }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::after {
  right: -18px; left: auto; top: auto; bottom: -18px;
 }
}

@media (max-width:767px), (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
 .teachers-section .teacher-card > .teacher-name,
 .teachers-section .teacher-card > .teacher-name-line,
 .teachers-section .teacher-card > p { position: relative; z-index: 1; }
}
/* Balanced photo-bound decoration: keep the colour inside each portrait's vicinity. */
@media (max-width:1100px) {
 .teachers-section > .container::before,
 .teachers-section > .container::after,
 .teachers-section .teacher-area::before,
 .teachers-section .teacher-area::after,
 .teachers-section .teacher-card:first-child::before { content: none; }
 .teachers-section .teacher-photo-frame {
  display: block; position: relative; isolation: isolate;
  width: min(100%,340px); margin: 0 auto 22px;
 }
 .teachers-section .teacher-photo-frame .teacher-photo { width: 100%; margin: 0; position: relative; z-index: 1; }
 .teachers-section .teacher-photo-frame::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 116%; height: 104%; border-radius: 50%; transform: none;
  mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
 }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::before {
  left: -12%; top: -2%; right: auto; bottom: auto;
  width: 116%; height: 104%; border-radius: 48% 52% 49% 51%; transform: none;
  background: linear-gradient(100deg,#a5af917a,#dce1cf99 65%,#dce1cf33);
  mask-image: linear-gradient(90deg,transparent,#000 14%,#000 85%,transparent);
 }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::before {
  right: -12%; top: 1%; left: auto; bottom: auto;
  width: 116%; height: 103%; border-radius: 50% 50% 47% 53%; transform: none;
  background: linear-gradient(270deg,#efc8b28a,#f7e5d9b3 65%,#f7e5d933);
  mask-image: linear-gradient(270deg,transparent,#000 14%,#000 85%,transparent);
 }
 .teachers-section .teacher-photo-frame::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 76px; height: 76px; opacity: .75;
  background: radial-gradient(circle,#dab49c 1.7px,transparent 2px) 0 0/19px 19px;
 }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::after {
  left: -12px; top: -12px; right: auto; bottom: auto;
 }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::after {
  right: -12px; bottom: -12px; left: auto; top: auto;
 }
}
/* Targeted portrait balance: narrow phones and the stacked Mini tablet layout. */
@media (min-width:768px) and (max-width:850px) {
 .teachers-section .teacher-card:first-child .teacher-photo-frame::before { left: -23%; }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::before { right: -23%; }
}
@media (max-width:393px) {
 .teachers-section .teacher-photo-frame { width: min(90%,306px); }
 .teachers-section .teacher-card:first-child .teacher-photo-frame::before { left: -17%; }
 .teachers-section .teacher-card:nth-child(2) .teacher-photo-frame::before { right: -17%; }
}
/* Screen 10 — subscription, scoped independently of FAQ and the final screen. */
.subscription-section { background: #faf5ed; color: var(--text-ink); font-family: Lato,sans-serif; padding: 48px clamp(12px,3vw,44px); }
.subscription-section .container { max-width: 1200px; margin: auto; }
.subscription-section .section-title { text-align: center; }
.subscription-section h2 { font-size: clamp(30px,3.5vw,48px); line-height: 1.16; margin: 0; text-wrap: balance; }
.subscription-section .section-line { width: 190px; height: 3px; background: #b8d3bd; margin: 20px auto 32px; }
.subscription-section * { hyphens: none; word-break: normal; overflow-wrap: normal; box-sizing: border-box; }
.subscription-section .subscription-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px 30px; }
.subscription-section .subscription-feature { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding-bottom: 20px; border-bottom: 1px dotted #dfc6b5; }
.subscription-section .subscription-icon { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #284c31; background: #dce5d8; }
.subscription-section .subscription-icon.peach { background: #f7dfce; }
.subscription-section .subscription-icon svg { width: 38px; height: 38px; }
.subscription-section .subscription-icon img { display: none; }
.subscription-section .subscription-icon:has(.unified-notes)::before { content: ''; width: 38px; height: 38px; background: currentColor; mask: url('assets/benefit-notes.png') center/contain no-repeat; }
.subscription-section .subscription-icon:has(.classical-guitar-icon)::before { content: ''; width: 42px; height: 42px; background: currentColor; mask: url('assets/benefit-guitar.png') center/contain no-repeat; }
.subscription-section .subscription-feature h3 { font-size: 22px; line-height: 1.25; margin: 2px 0 8px; text-wrap: balance; }
.subscription-section .subscription-feature p { font-size: 18px; line-height: 1.45; margin: 0; }
.subscription-section .subscription-guitar-sketch { display: none; }
.subscription-section .price-shell { margin: 32px auto 24px; padding: 28px; border: 1px solid #c5d1bc; border-radius: 24px; background: #e7eadfd9; display: flex; align-items: center; justify-content: center; gap: 48px; }
.subscription-section .price-main { text-align: center; }
.subscription-section .price-main h3 { font-size: 28px; margin: 0; }
.subscription-section .price-line { width: 100px; height: 3px; background: #df8148; margin: 14px auto 18px; }
.subscription-section .price-value { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px; margin-bottom: 22px; font-size: 38px; }
.subscription-section .price-value strong { color: #6c8961; }
.subscription-section .price-value b { font-weight: 700; }
.subscription-section .price-value small { font-size: 18px; color: #506753; }
.subscription-section .price-button { display: inline-flex; justify-content: center; align-items: center; padding: 17px 24px; min-height:56px; line-height:1.3; border-radius: 14px; background: #b9553d; color: white; text-decoration: none; font-size: 18px; font-weight: 700; }
.subscription-section .price-button:hover { filter:brightness(.96); }
.subscription-section .price-button:focus-visible { outline:2px solid #506753; outline-offset:4px; }
.subscription-section .desktop-qr { width: 240px; text-align: center; }
.subscription-section .desktop-qr img { width: 108px; height: 108px; object-fit: contain; }
.subscription-section .desktop-qr p { font-size: 15px; line-height: 1.4; margin: 10px 0 0; }
.subscription-section .subscription-details { max-width: 1000px; margin: auto; border-radius: 18px; background: #fffdf8; padding: 0 24px; }
.subscription-section .subscription-details summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 20px 0; font-size: 18px; font-weight: 700; color: #506753; }
.subscription-section summary::-webkit-details-marker { display: none; }
.subscription-section summary span { transition: transform .25s; font-size: 26px; }
.subscription-section details[open] summary span { transform: rotate(180deg); }
.subscription-section .accordion-content { overflow: hidden; font-size: 18px; line-height: 1.55; }
.subscription-section .accordion-content p { margin: 0 0 18px; }
.subscription-section .accordion-content a { color: #506753; text-underline-offset: 3px; }
@media(max-width:1100px) { .subscription-section .subscription-features { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .subscription-section .desktop-qr { display: none; } }
@media(max-width:767px) {
 .subscription-section { padding: 32px 18px; }
 .subscription-section .subscription-features { grid-template-columns: 1fr; gap: 18px; }
 .subscription-section .subscription-feature h3 { font-size: 21px; }
 .subscription-section .subscription-feature { gap: 14px; padding-bottom: 18px; }
 .subscription-section .subscription-icon { flex-basis: 50px; width: 50px; height: 50px; }
 .subscription-section .section-line { width: 150px; }
 .subscription-section .price-shell { padding: 24px 14px; margin-top: 26px; }
 .subscription-section .price-value { font-size: 30px; gap: 8px; }
 .subscription-section .price-value small { flex-basis: 100%; }
 .subscription-section .price-main h3 { font-size: 25px; }
 .subscription-section .price-button { font-size: 17px; padding: 16px 20px; }
 .subscription-section .subscription-details { padding: 0 18px; }
 .subscription-section .subscription-details summary { font-size: 16px; }
}
/* FAQ: one reading column, independent native disclosure cards. */
.faq-section { padding: 44px clamp(18px,4vw,56px); background: #faf5ed; color: var(--text-ink); font-family: Lato,sans-serif; }
.faq-section .decor-corner { display: none; }
.faq-section .container { max-width: 980px; margin: auto; }
.faq-section .section-title { text-align: center; }
.faq-section h2 { font-size: clamp(30px,3.5vw,48px); line-height: 1.16; margin: 0; }
.faq-section .section-line { width: 190px; height: 3px; margin: 20px auto 30px; background: #b8d3bd; }
.faq-section .faq-list { display: grid; gap: 12px; }
.faq-section .faq-item { border-radius: 18px; background: #fffdf9; border: 1px solid #e8e4d9; }
.faq-section summary { display: grid; grid-template-columns: 36px minmax(0,1fr) 22px; gap: 16px; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 20px; line-height: 1.4; font-weight: 700; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary:focus-visible { outline: 2px solid #78966d; outline-offset: 3px; border-radius: 18px; }
.faq-section .faq-num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #dfe7d8; color: #506753; font-size: 18px; font-weight: 400; }
.faq-section .faq-num.peach { background: #f7dfce; }
.faq-section .faq-chevron { width: 12px; height: 12px; border-right: 2px solid #78966d; border-bottom: 2px solid #78966d; transform: rotate(45deg); transition: transform .26s; font-size: 0; justify-self: center; }
.faq-section details[open] .faq-chevron { transform: rotate(225deg); }
.faq-section .faq-answer { overflow: hidden; padding: 0 62px 0 76px; font-size: 18px; line-height: 1.55; }
.faq-section .faq-answer p { margin: 0 0 18px; }
.faq-section a { color: #506753; text-underline-offset: 3px; }
.faq-section * { box-sizing: border-box; hyphens: none; word-break: normal; overflow-wrap: normal; }
@media(max-width:767px) {
 .faq-section { padding: 32px 16px; }
 .faq-section .section-line { width: 150px; }
 .faq-section summary { grid-template-columns: 30px minmax(0,1fr) 16px; gap: 10px; padding: 16px 14px; font-size: 18px; }
 .faq-section .faq-num { width: 30px; height: 30px; font-size: 16px; }
 .faq-section .faq-answer { padding: 0 18px; font-size: 18px; }
}
/* FAQ surroundings only: retained card geometry and disclosure behaviour. */
.faq-section {
 position: relative; isolation: isolate;
 padding-top: 32px;
 background:
  radial-gradient(ellipse 560px 340px at 12% 260px,#f3d7c45c,transparent 100%),
  radial-gradient(ellipse 520px 470px at 94% 560px,#dce1cf70,transparent 100%),
  radial-gradient(ellipse 600px 380px at 40% 780px,#f7e5d947,transparent 100%),#faf5ed;
}
.faq-section .container { position: relative; z-index: 1; }
.faq-music-decor { display: none; position: absolute; pointer-events: none; width: 96px; height: 150px; color: #8c9e7d; opacity: .3; }
.faq-music-decor i { position: absolute; display: block; width: 38px; height: 48px; background: currentColor; mask: url('assets/benefit-notes.png') center/contain no-repeat; }
.faq-music-decor--left { top: 260px; left: calc((100% - 980px)/4 - 48px); transform: rotate(-9deg); }
.faq-music-decor--left::before { content: ''; position: absolute; top: 25px; width: 96px; height: 49px; background: repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 12px); }
.faq-music-decor--left i:first-child { left: 8px; top: 19px; }
.faq-music-decor--left i:last-child { left: 50px; top: 34px; width: 30px; }
.faq-music-decor--right { right: calc((100% - 980px)/4 - 48px); top: 520px; color: #c59c81; transform: rotate(10deg); }
.faq-music-decor--right i:first-child { top: 4px; left: 4px; width: 45px; height: 56px; }
.faq-music-decor--right i:last-child { top: 78px; right: 1px; width: 32px; }
@media(min-width:1280px) and (min-height:700px) { .faq-music-decor { display: block; } }
@media(max-width:767px) {
 .faq-section { padding-top: 24px; background: radial-gradient(ellipse 280px 150px at 15% 120px,#f3d7c455,transparent),radial-gradient(ellipse 220px 350px at 100% 440px,#dce1cf55,transparent),#faf5ed; }
}

/* Approved FAQ variant B, with clearer compact header decoration. */
.faq-section {
 background: radial-gradient(ellipse 650px 180px at 35% 90px,#efc8b28a,transparent),radial-gradient(ellipse 620px 210px at 75% 80px,#dce1cfa6,transparent),radial-gradient(ellipse 340px 580px at 2% 500px,#f7e5d999,transparent),radial-gradient(ellipse 360px 600px at 99% 700px,#dce1cf80,transparent),#faf5ed;
 overflow: clip;
}
.faq-music-decor { display:block; width:clamp(100px,13vw,240px);height:460px;opacity:.48; transform:none; background:currentColor; mask-size:contain;mask-position:center;mask-repeat:no-repeat; }
.faq-music-decor::before,.faq-music-decor i { display:none; }
.faq-design-b .faq-music-decor--left {mask-image:url('previews/faq/b-left.svg');}
.faq-design-b .faq-music-decor--right {mask-image:url('previews/faq/b-right.svg');}
.faq-music-decor--left {left:calc((100% - 980px)/4 - clamp(50px,6.5vw,120px));top:150px;color:#8e9f80; transform:rotate(-8deg);}
.faq-music-decor--right {right:calc((100% - 980px)/4 - clamp(50px,6.5vw,120px));top:450px;color:#ceaa90;transform:rotate(13deg);}
@media(max-width:1279px) {
 .faq-music-decor {width:72px;height:115px;opacity:.4;top:0;}
 .faq-music-decor--left {left:18px;transform:rotate(-10deg);}
 .faq-music-decor--right {right:18px;transform:rotate(12deg);}
}
@media(max-width:767px),(max-height:500px) {
 .faq-section {background:radial-gradient(ellipse 240px 125px at 22% 70px,#efc8b29c,transparent),radial-gradient(ellipse 250px 150px at 84% 60px,#dce1cfbb,transparent),#faf5ed;}
 .faq-music-decor {top:4px;width:38px;height:92px;opacity:.38;}
 .faq-music-decor--left {left:-2px;}
 .faq-music-decor--right {right:-2px;}
}
@media(max-width:1279px) {
 .faq-design-b .faq-music-decor {mask-image:url('previews/faq/b-header.svg');}
}

@media(max-width:1279px) {
 .faq-design-b .faq-music-decor { width: 104px; height: 100px; top: 4px; opacity: .58; }
}
@media(max-width:767px),(max-height:500px) {
 .faq-design-b .faq-music-decor { width: 64px; height: 64px; top: 24px; opacity: .65; }
 .faq-design-b .faq-music-decor--left { left: -14px; }
 .faq-design-b .faq-music-decor--right { right: -14px; }
}

/* Header decoration only; the approved side compositions remain untouched. */
@media(max-width:1279px) {
 .faq-design-b .faq-music-decor { top: 10px; width: 96px; height: 90px; opacity: .65; }
 .faq-design-b .faq-music-decor--left { left: 14px; transform: rotate(-6deg); }
 .faq-design-b .faq-music-decor--right { right: 14px; transform: none; mask-image: url('previews/faq/header-symbols.svg'); }
}
@media(max-width:767px),(max-height:500px) {
 .faq-design-b .faq-music-decor { top: 14px; width: 48px; height: 76px; opacity: .7; }
 .faq-design-b .faq-music-decor--left { left: 10px; transform: rotate(-4deg); }
 .faq-design-b .faq-music-decor--right { right: 10px; transform: none; mask-image: url('previews/faq/header-symbols.svg'); }
}
@media(max-width:375px) {
 .faq-design-b .faq-music-decor--right { mask-image: url('previews/faq/header-symbols-small.svg'); }
}
/* Landscape phones: balance the motifs between the heading and section edges. */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px) {
 .faq-design-b .faq-music-decor--left { left: calc(25% - 90px); }
 .faq-design-b .faq-music-decor--right { right: calc(25% - 90px); }
}

/* Compact tablets: move only the header motifs inward, preserving their size. */
@media (min-width:768px) and (max-width:1024px) and (min-height:501px) {
 .faq-design-b .faq-music-decor--left { left: calc(25% - 62px); }
 .faq-design-b .faq-music-decor--right { right: calc(25% - 62px); }
}

/* Final screen — a quiet closing card, independent of the approved FAQ. */
.final-cta-section { background:#faf5ed; color:var(--text-ink); font-family:Lato,sans-serif; padding:36px clamp(16px,4vw,56px) 56px; }
.final-cta-section, .final-cta-section * { box-sizing:border-box; }
.final-cta-section .container { max-width:1120px; margin:auto; }
.final-cta-section .final-cta { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; padding:44px 48px; border:1px solid #a5b697; border-radius:26px; background:#fffdf9; }
.final-cta-section .final-cta__copy, .final-cta-section .final-cta__buy { min-width:0; }
.final-cta-section h2 { margin:0; font-size:clamp(30px,3.5vw,48px); line-height:1.16; text-wrap:balance; }
.final-cta-section .section-line { width:110px; height:3px; margin:18px 0 22px; background:#e9a379; }
.final-cta-section .final-cta__copy p { max-width:460px; margin:0; font-size:20px; line-height:1.5; }
.final-cta-section .final-cta__buy { border-left:1px solid #e6dace; padding-left:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.final-cta-section .final-price { display:grid; grid-template-columns:auto auto auto; align-items:baseline; gap:8px 12px; font-size:clamp(30px,3.2vw,44px); white-space:nowrap; }
.final-cta-section .final-price strong { color:#6c8961; }
.final-cta-section .final-price b { font-weight:700; }
.final-cta-section .final-price small { grid-column:1/-1; text-align:center; font-size:18px; color:#506753; }
.final-cta-section .final-button { display:flex; align-items:center; justify-content:center; width:100%; max-width:360px; min-height:56px; margin-top:24px; padding:17px 24px; border-radius:14px; background:#b9553d; color:#fff; font-size:18px; font-weight:700; line-height:1.3; text-align:center; text-decoration:none; }
.final-cta-section .final-button:hover { filter:brightness(.96); }
.final-cta-section .final-button:focus-visible { outline:2px solid #506753; outline-offset:4px; }
@media(max-width:1023px) {
 .final-cta-section .final-cta { padding:32px; gap:28px; }
 .final-cta-section .final-cta__buy { padding-left:28px; }
 .final-cta-section .final-cta__copy p { font-size:18px; }
 .final-cta-section .final-price { gap:8px; }
 .final-cta-section .final-button { font-size:16px; padding:16px; }
}
@media(max-width:699px) {
 .final-cta-section { padding:24px 16px 36px; }
 .final-cta-section .final-cta { grid-template-columns:minmax(0,1fr); gap:28px; padding:28px 22px; border-radius:22px; }
 .final-cta-section .final-cta__buy { border-left:0; padding-left:0; }
 .final-cta-section .section-line { margin:16px 0 20px; }
 .final-cta-section .final-price { font-size:clamp(28px,7.8vw,34px); }
}

/* Footer — isolated from all approved landing sections. */
.site-footer { background:#f6f2e9; border-top:1px solid #c4cfb9; color:var(--text-ink); font-family:Lato,sans-serif; padding:32px clamp(16px,4vw,56px) 24px; }
.site-footer, .site-footer * { box-sizing:border-box; }
.site-footer .footer-container { max-width:1120px; margin:auto; }
.site-footer .footer-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.site-footer .footer-brand { font-size:23px; font-weight:700; letter-spacing:1px; color:#506753; }
.site-footer .footer-top p { margin:8px 0 0; font-size:15px; line-height:1.45; }
.site-footer a { color:#506753; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.site-footer a:focus-visible { outline:2px solid #506753; outline-offset:4px; border-radius:6px; }
.site-footer .footer-home { padding:12px 0; font-size:16px; line-height:1.4; }
.site-footer .footer-contact { text-align:center; margin:36px 0 32px; }
.site-footer h2 { font-size:28px; line-height:1.2; margin:0 0 12px; }
.site-footer .footer-contact > p { font-size:17px; line-height:1.5; margin:0 auto; max-width:640px; }
.site-footer .footer-socials { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:680px; margin:20px auto 0; gap:12px; }
.site-footer .footer-socials a { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:10px 6px; font-size:16px; }
.site-footer .footer-socials svg { width:30px; height:30px; flex:none; }
.site-footer .footer-bottom { border-top:1px solid #d1d8c8; padding-top:20px; }
.site-footer .footer-copyright { font-size:14px; margin:0 0 12px; }
.site-footer .footer-legal { font-size:13px; line-height:1.55; color:#696b64; margin:0; }
@media(max-width:600px) {
 .site-footer .footer-top { flex-direction:column; align-items:flex-start; gap:10px; }
 .site-footer .footer-socials { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:380px; gap:8px; }
 .site-footer .footer-contact { margin:28px 0; }
 .site-footer h2 { font-size:25px; }
 .site-footer .footer-contact > p { font-size:16px; }
}

/* Preserve the approved landscape crop while serving the untouched camera original. */
 .about-section .about-figure { aspect-ratio:2409 / 1651; overflow:hidden; border-radius:0 0 50% 50% / 0 0 12% 12%; }
.about-section .about-figure > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 65%; }
.about-section figcaption { position:absolute; left:6.5%; bottom:12%; width:auto; height:auto; max-width:70%; overflow:visible; clip-path:none; color:#fff; font-family:var(--font-text); line-height:1.15; text-shadow:0 1px 4px #0005; }
.about-section figcaption span { display:block; }
.about-section figcaption span:first-child { font-size:clamp(22px,4.7vw,74px); font-weight:700; }
.about-section figcaption span:last-child { margin-top:12px; font-size:clamp(13px,2.6vw,42px); }
@media(max-width:560px) {
 .about-section .about-figure > img { object-position:center 61%; }
 .about-section figcaption { bottom:11%; max-width:88%; }
 .about-section figcaption span:first-child { font-size:clamp(20px,5vw,28px); }
 .about-section figcaption span:last-child { margin-top:6px; font-size:clamp(11px,2.8vw,16px); }
}

/* Section 2: use the approved 1376x1032 crop proportions at every landscape width.
   Crop from the original's right edge; keep source x=0 at the left.
   translateY uses the image height, so the source crop does not drift with viewport height. */
@media (orientation:landscape) {
 .about-section .about-figure { aspect-ratio:1293.4375 / 701.7578125; height:auto; min-height:0; }
 .about-section .about-figure > img { inset:auto; top:0; left:0; width:106%; height:auto; max-width:none; object-fit:initial; transform:translateY(-36%); }
 .about-section figcaption { bottom:13%; max-width:67%; }
 .about-section figcaption span:first-child { font-size:clamp(24px,3.5vw,56px); }
 .about-section figcaption span:last-child { margin-top:10px; font-size:clamp(15px,2vw,30px); }
}
@media (orientation:landscape) and (max-height:500px) {
 .about-section figcaption { bottom:14%; max-width:74%; }
 .about-section figcaption span:first-child { font-size:clamp(23px,3.4vw,32px); }
 .about-section figcaption span:last-child { margin-top:6px; font-size:clamp(14px,1.9vw,18px); }
}

/* Touch-first portrait devices use the approved complete 4K frame.
   Resizing a mouse/trackpad desktop window alone does not activate it. */
@media (orientation:portrait) and (max-width:1400px) and (hover:none) and (pointer:coarse) {
 .hero-section .hero-visual { aspect-ratio:4096 / 3594; }
 .hero-section .hero-visual img { position:static; width:100%; height:auto; }
}