/*
  Nia Brooks Guitar
  Harmony: split-complementary. Base hue: warm marigold yellow (about 45deg, echoes the honey guitar tops
  and the mustard wall in the photo shoot). Split complements: ink violet (about 255deg) and cyan blue (about 205deg,
  echoes the denim shirts).
  60%  --sun      #FFE7A0  page background
  30%  --ink      #23174A  text, fretboard band, footer
       --paper    #FFF6DA  light surfaces (form, quotes)
       --plum     #2F2362  raised surfaces on the dark band
  10%  --blue     #0E6FAE  accent marks, finger dots, focus
       --sky      #5BC0F5  accent on dark surfaces
  Contrast (WCAG): ink on sun 13.30, ink on paper 15.04, sun on ink 13.30, sun on plum 11.18,
  white on blue 5.38 (buttons), blue on sun 4.40 (large text and marks only), sky on ink 7.97,
  muted ink #5A4E86 on sun 5.99, lilac #CFC6EE on ink 10.03.
*/
:root {
  --sun: #FFE7A0;
  --paper: #FFF6DA;
  --ink: #23174A;
  --plum: #2F2362;
  --blue: #0E6FAE;
  --sky: #5BC0F5;
  --muted: #5A4E86;
  --lilac: #CFC6EE;
  --display: "Bricolage Grotesque", "Figtree", sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sun); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-family: var(--display); font-variation-settings: "wdth" 88; line-height: 1; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--sun); padding: .6rem 1rem; border-radius: 10px; z-index: 50; }
.skip:focus { top: 1rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: .8rem 1.5rem; border-radius: 999px; font: 700 1rem/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ink { background: var(--ink); color: var(--sun); }
.btn--ink:hover { background: var(--plum); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--sun); }
.btn--sun { background: var(--sun); color: var(--ink); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 4vw, 3.5rem); background: color-mix(in srgb, var(--sun) 92%, transparent); backdrop-filter: blur(8px); transition: box-shadow .2s ease; }
.top.is-stuck { box-shadow: 0 1px 0 rgba(35, 23, 74, .14); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 800 1.35rem/1 var(--display); font-variation-settings: "wdth" 85; }
.brand small { display: block; font: 500 .8rem/1.2 var(--body); color: var(--muted); letter-spacing: 0; margin-top: .15rem; }
.brand__pick { width: 34px; height: 34px; fill: var(--ink); transform: rotate(-12deg); }
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); font-weight: 600; }
.menu a { text-decoration: none; padding: .4rem 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; transition: background-size .2s ease; }
.menu a:hover { background-size: 100% 2px; }
.menu .menu__cta { background: var(--ink); color: var(--sun); padding: .7rem 1.2rem; border-radius: 999px; }
.menu .menu__cta:hover { background: var(--plum); }
.burger { display: none; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.burger span:not(.sr) { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform .2s ease; }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 26px; }
.top.is-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.top.is-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); max-width: 1440px; margin: 0 auto; }
.hero__where { font-weight: 600; color: var(--muted); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.hero__where::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(14, 111, 174, .18); }
.hero h1 { font-size: clamp(3rem, 7.2vw, 6.9rem); font-weight: 800; letter-spacing: -.035em; line-height: .92; text-wrap: balance; }
.hero__lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 34ch; margin-top: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__facts { list-style: none; padding: 0; margin: 2.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--ink); }
.hero__facts li { flex: 1 1 150px; padding: 1rem 1.2rem 0 0; font-size: .95rem; color: var(--muted); }
.hero__facts b { display: block; color: var(--ink); font: 800 1.2rem/1.2 var(--display); }
.hero__pick { margin: 0; position: relative; }
.hero__pick img { width: 100%; aspect-ratio: 10 / 11; object-fit: cover; clip-path: url(#pickShape); transform: rotate(-4deg); animation: pickIn 1s cubic-bezier(.2, .8, .2, 1.1) both; }
.hero__pick::before { content: ""; position: absolute; inset: 4% -2% -3% 6%; background: var(--ink); clip-path: url(#pickShape); transform: rotate(6deg); z-index: -1; }
.hero__pick figcaption { position: absolute; right: 0; bottom: 8%; max-width: 15rem; background: var(--paper); padding: .8rem 1rem; border-radius: 14px; font-size: .92rem; line-height: 1.4; box-shadow: 0 10px 30px -12px rgba(35, 23, 74, .45); transform: rotate(2deg); }
.pick-clip { position: absolute; }
@keyframes pickIn { from { opacity: 0; transform: rotate(-16deg) scale(.9); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* Chords: signature */
.chords { background: var(--ink); color: var(--sun); padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.chords > * { max-width: 1240px; width: 100%; margin-inline: auto; }
.chords__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.chords h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 800; }
.chords__head p { color: var(--lilac); max-width: 40ch; justify-self: end; }
.chords__picker { display: flex; flex-wrap: wrap; gap: .6rem; }
.chords__picker button { min-width: 72px; height: 64px; padding: 0 1.1rem; border-radius: 16px; border: 2px solid var(--plum); background: var(--plum); color: var(--sun); font: 800 1.6rem/1 var(--display); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.chords__picker button:hover { transform: translateY(-2px); border-color: var(--sky); }
.chords__picker button[aria-checked="true"] { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.board { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: .8rem; }
.board__names { display: grid; grid-template-rows: repeat(6, 1fr); font: 700 1rem/1 var(--display); color: var(--lilac); align-items: center; text-align: center; padding-block: .4rem; }
.board__neck { position: relative; height: clamp(230px, 24vw, 300px); border-radius: 14px; background: linear-gradient(90deg, #3a2c73, var(--plum) 60%); overflow: hidden; --nut: 64px; }
.board__neck::before { content: ""; position: absolute; left: var(--nut); top: 0; bottom: 0; width: 10px; background: var(--paper); border-radius: 2px; z-index: 1; }
.board__status { position: absolute; left: 0; top: 0; bottom: 0; width: var(--nut); display: grid; grid-template-rows: repeat(6, 1fr); padding-block: .4rem; }
.board__status span { position: relative; }
.board__status span.o::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--sky); }
.board__status span.x::before, .board__status span.x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; border-radius: 2px; background: var(--lilac); transform: rotate(45deg); }
.board__status span.x::after { transform: rotate(-45deg); }
.board__frets { position: absolute; left: calc(var(--nut) + 10px); right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.board__frets i { border-right: 4px solid rgba(255, 231, 160, .55); }
.board__inlays { position: absolute; left: calc(var(--nut) + 10px); right: 0; top: 0; bottom: 0; }
.board__inlays i { position: absolute; top: 50%; left: calc((var(--f) - .5) * 20%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(255, 231, 160, .2); }
.board__strings { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); padding-block: .4rem; }
.board__strings button { position: relative; border: 0; background: transparent; cursor: pointer; padding: 0; }
.board__strings button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--g, 2px); transform: translateY(-50%); background: linear-gradient(90deg, #d8cfae, #fff3c8 40%, #d8cfae); box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }
.board__strings button:hover::before, .board__strings button:focus-visible::before { background: var(--sky); }
.board__strings button.is-ringing::before { animation: ring .6s ease-out; }
@keyframes ring { 0%, 100% { transform: translateY(-50%); } 20% { transform: translateY(calc(-50% - 3px)); } 40% { transform: translateY(calc(-50% + 3px)); } 60% { transform: translateY(calc(-50% - 1.5px)); } 80% { transform: translateY(calc(-50% + 1px)); } }
.board__dots { position: absolute; left: calc(var(--nut) + 10px); right: 0; top: 0; bottom: 0; padding-block: .4rem; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.board__dots span { position: relative; }
.board__dots b { position: absolute; top: 50%; left: calc((var(--f) - .5) * 20%); width: clamp(38px, 3.6vw, 48px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font: 800 1.1rem/1 var(--display); box-shadow: 0 0 0 5px rgba(91, 192, 245, .22); animation: dotIn .45s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes dotIn { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
.board__numbers { grid-column: 2; display: grid; grid-template-columns: var(--nutw, 74px) repeat(5, 1fr); padding-top: .5rem; color: var(--lilac); font-size: .85rem; text-align: center; }
.board__numbers::before { content: ""; }
.chords__foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.strum { font-size: 1.1rem; min-height: 58px; padding-inline: 1.8rem; }
.strum svg { width: 26px; height: 26px; }
.strum span { font-family: var(--display); font-weight: 800; }
.chords__tip { color: var(--lilac); max-width: 58ch; font-size: 1.02rem; }
.chords__tip b { color: var(--sun); }

/* Level + packages */
.start { padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 4vw, 3.5rem); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.start h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); font-weight: 800; }
.start__intro > p { margin-top: 1rem; max-width: 42ch; }
.level { display: grid; gap: .7rem; margin-top: 2rem; }
.level button { text-align: left; border: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--r); padding: 1rem 1.2rem 1rem 3.4rem; cursor: pointer; position: relative; font: inherit; transition: background-color .15s ease; }
.level button::before { content: ""; position: absolute; left: 1.1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.level button[aria-checked="true"] { background: var(--ink); color: var(--sun); }
.level button[aria-checked="true"]::before { border-color: var(--sun); background: var(--sky); box-shadow: inset 0 0 0 4px var(--ink); }
.level button:hover:not([aria-checked="true"]) { background: var(--paper); }
.level b { display: block; font: 700 1.15rem/1.2 var(--display); }
.level span { font-size: .95rem; opacity: .85; }
.setlist { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.set { position: relative; display: grid; grid-template-columns: 1fr 1.25fr auto auto; gap: 1.2rem 1.6rem; align-items: center; padding: 1.6rem 1.2rem; border-bottom: 2px solid rgba(35, 23, 74, .25); transition: background-color .3s ease, color .3s ease; border-radius: 0; }
.set h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; }
.set__len { font-size: .92rem; color: var(--muted); margin-top: .3rem; }
.set__what { font-size: .98rem; }
.set__price { text-align: right; }
.set__price b { display: block; font: 800 2rem/1 var(--display); }
.set__price span { font-size: .85rem; color: var(--muted); }
.set__go { display: inline-grid; place-items: center; min-height: 46px; padding: 0 1.2rem; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; text-decoration: none; }
.set__go:hover { background: var(--ink); color: var(--sun); }
.set__flag { position: absolute; top: -.85rem; left: 1.2rem; background: var(--blue); color: #fff; font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.set.is-picked { background: var(--ink); color: var(--sun); border-radius: var(--r); border-bottom-color: transparent; }
.set.is-picked .set__len, .set.is-picked .set__price span { color: var(--lilac); }
.set.is-picked .set__go { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.set.is-picked .set__flag { opacity: 1; transform: none; }
.start__note { grid-column: 2; font-size: .95rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.pay { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.pay:hover { color: var(--blue); }

/* Learn */
.learn { background: var(--paper); padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.learn h2 { grid-column: 1 / -1; font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 800; max-width: 1340px; }
.learn__list { list-style: none; margin: 0; padding: 0; }
.learn__list li { display: grid; grid-template-columns: minmax(170px, 14rem) 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 2px solid rgba(35, 23, 74, .16); align-items: baseline; }
.learn__list b { font: 800 1.35rem/1.2 var(--display); }
.learn__list span { color: var(--muted); }
.learn__photo { margin: 0; }
.learn__photo img { border-radius: 28px 28px 120px 28px; aspect-ratio: 9 / 7; object-fit: cover; width: 100%; }
.learn__photo figcaption { font-size: .92rem; color: var(--muted); margin-top: .7rem; }

/* About */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 4vw, 3.5rem); max-width: 1440px; margin: 0 auto; }
.about__photos { position: relative; padding-bottom: 18%; }
.about__a { width: 78%; border-radius: 24px; aspect-ratio: 9 / 10; object-fit: cover; }
.about__b { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid var(--sun); }
.about h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; margin-bottom: 1.4rem; }
.about__copy p + p { margin-top: 1rem; }
.about__copy p { max-width: 50ch; }
.about__facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.about__facts li { border-left: 3px solid var(--blue); padding-left: .9rem; font-size: .93rem; color: var(--muted); }
.about__facts b { display: block; font: 800 1.4rem/1.1 var(--display); color: var(--ink); }

/* Words */
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding: 0 clamp(1rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); max-width: 1440px; margin: 0 auto; }
.words blockquote { margin: 0; padding-top: 1.2rem; border-top: 3px solid var(--ink); }
.words blockquote:nth-child(3) { transform: translateY(2rem); }
.words blockquote:nth-child(2) { transform: translateY(1rem); }
.words p { font: 600 clamp(1.25rem, 1.9vw, 1.6rem)/1.25 var(--display); letter-spacing: -.01em; }
.words footer { margin-top: .9rem; font-size: .92rem; color: var(--muted); }

/* Free lesson form */
.free { background: var(--ink); color: var(--sun); padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.free h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; }
.free__side > p { margin-top: 1.2rem; color: var(--lilac); max-width: 40ch; }
.free__how { margin: 2rem 0 0; display: grid; gap: 1rem; }
.free__how div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 231, 160, .2); }
.free__how dt { font: 800 1.05rem/1.4 var(--display); color: var(--sky); }
.free__how dd { margin: 0; }
.form { background: var(--paper); color: var(--ink); border-radius: 26px; padding: clamp(1.3rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field select { font: inherit; font-weight: 400; min-height: 50px; padding: .7rem .9rem; border: 2px solid rgba(35, 23, 74, .35); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.field input::placeholder { color: #7c7399; }
.field input:focus, .field select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px rgba(14, 111, 174, .2); }
.field input.is-bad { border-color: #B3261E; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { font-weight: 600; font-size: .95rem; margin-bottom: .45rem; padding: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-grid; place-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid rgba(35, 23, 74, .35); border-radius: 999px; font-weight: 600; font-size: .95rem; transition: background-color .15s ease; }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--sun); }
.chips input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.submit { justify-self: start; min-height: 56px; font-size: 1.05rem; }
.form__status { font-weight: 600; min-height: 1.4em; }
.form__status.is-ok { color: #0B5E93; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; padding: 2.5rem clamp(1rem, 4vw, 3.5rem); border-top: 2px solid var(--ink); }
.foot__name { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--display); font-variation-settings: "wdth" 85; }
.foot a { text-decoration: none; border-bottom: 1px solid currentColor; }
.foot__small { font-size: .85rem; color: var(--muted); }

/* Responsive */
@media (max-width: 1080px) {
  .set { grid-template-columns: 1fr auto; }
  .set__what { grid-column: 1 / -1; grid-row: 2; }
  .set__go { grid-column: 2; grid-row: 1; }
  .set__price { grid-column: 1; grid-row: 3; text-align: left; display: flex; align-items: baseline; gap: .7rem; }
  .set__price b { display: inline; }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sun); padding: .5rem 1rem 1.2rem; border-bottom: 2px solid var(--ink); display: none; }
  .top.is-open .menu { display: flex; }
  .menu a { padding: .95rem .2rem; border-bottom: 1px solid rgba(35, 23, 74, .15); font-size: 1.1rem; }
  .menu .menu__cta { margin-top: .8rem; text-align: center; border: 0; }
  .hero, .start, .learn, .about, .free { grid-template-columns: 1fr; }
  .hero__pick { max-width: 520px; width: 92%; margin: 0 auto; }
  .chords__head { grid-template-columns: 1fr; }
  .chords__head p { justify-self: start; }
  .start__note { grid-column: 1; }
  .words { grid-template-columns: 1fr; }
  .words blockquote:nth-child(n) { transform: none; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero { padding-top: 1.2rem; }
  .hero h1 { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
  .hero__facts li { flex-basis: 100%; padding: .8rem 0 0; }
  .hero__pick figcaption { position: static; transform: none; max-width: none; margin-top: .6rem; box-shadow: none; }
  .row { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1.3rem 1fr; column-gap: .4rem; }
  .board__neck { --nut: 38px; height: 250px; }
  .board__frets, .board__inlays, .board__dots { left: calc(var(--nut) + 8px); }
  .board__numbers { --nutw: 46px; }
  .board__frets { grid-template-columns: repeat(5, 1fr); }
  .chords__picker button { min-width: 0; flex: 1 1 calc(33% - .6rem); height: 56px; }
  .learn__list li { grid-template-columns: 1fr; gap: .2rem; }
  .about__facts { grid-template-columns: 1fr; }
  .free__how div { grid-template-columns: 1fr; gap: .2rem; }
  .strum { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}