:root {
                --wine: #32141f;
                --ink: #281d22;
                --gold: #c59958;
                --paper: #faf7f2;
                --muted: #6b6265;
            }
            * {
                box-sizing: border-box;
            }
            html {
                scroll-behavior: smooth;
                scroll-padding-top: 90px;
            }
            body {
                margin: 0;
                background: var(--paper);
                color: var(--ink);
                font-family: Arial, sans-serif;
                font-size: 16px;
                line-height: 1.7;
            }
            h1,
            h2,
            h3,
            .brand {
                font-family: Georgia, serif;
                font-weight: 400;
            }
            a {
                color: inherit;
                text-decoration: none;
            }
            button {
                font: inherit;
                cursor: pointer;
            }
            button,
            a,
            input {
                touch-action: manipulation;
            }
            a:focus-visible,
            button:focus-visible {
                outline: 3px solid var(--gold);
                outline-offset: 5px;
            }
            .wrap {
                max-width: 1200px;
                margin: auto;
                padding: 0 42px;
            }
            .nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 94px;
                gap: 25px;
            }
            .brand {
                font-size: 30px;
                letter-spacing: 1px;
                line-height: 1.1;
            }
            .brand small {
                display: block;
                font: 11px Arial;
                letter-spacing: 3px;
                margin-top: 8px;
            }
            .navlinks {
                display: flex;
                align-items: center;
                gap: 30px;
                font-size: 14px;
            }
            .btn {
                display: inline-block;
                border: 1px solid var(--wine);
                padding: 12px 23px;
                background: var(--wine);
                color: white;
                border-radius: 3px;
                font-size: 14px;
                letter-spacing: 0.2px;
            }
            .btn.light {
                background: var(--gold);
                border-color: var(--gold);
                color: var(--wine);
            }
            .eyebrow {
                font-size: 12px;
                letter-spacing: 2.3px;
                text-transform: uppercase;
                font-weight: 600;
            }
            .hero {
                background: var(--wine);
                color: var(--paper);
                overflow: hidden;
            }
            .hero-grid {
                display: grid;
                grid-template-columns: 1.04fr 1fr;
                gap: 65px;
                align-items: center;
                padding-top: 50px;
                padding-bottom: 50px;
            }
            .hero h1 {
                font-size: clamp(48px, 5.7vw, 78px);
                line-height: 1.06;
                margin: 22px 0 26px;
                letter-spacing: -2px;
            }
            .hero h1 em {
                font-weight: 400;
                color: #dbb579;
            }
            .hero p {
                max-width: 470px;
                color: #e0cfd2;
                font-size: 17px;
                margin-bottom: 30px;
            }
            .hero .eyebrow {
                color: #dbb579;
            }
            .hero-image {
                height: 540px;
                position: relative;
            }
            .hero-image img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 180px 180px 4px 4px;
            }
            .image-label {
                position: absolute;
                bottom: 25px;
                left: 24px;
                color: white;
                font: italic 21px Georgia;
            }
            .hero-note {
                font-size: 12px;
                letter-spacing: 0.7px;
                margin-top: 24px;
                color: #cbb5bc;
            }
            .band {
                border-bottom: 1px solid #dfd6cc;
            }
            .band .wrap {
                display: flex;
                justify-content: space-between;
                gap: 20px;
                padding-top: 22px;
                padding-bottom: 22px;
                color: #675a5e;
                font-size: 13px;
            }
            .band span::before {
                content: "✦";
                color: #9c7136;
                margin-right: 12px;
            }
            .section {
                padding: 85px 0;
            }
            .intro {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 85px;
            }
            .section h2 {
                font-size: 44px;
                line-height: 1.17;
                letter-spacing: -1px;
                margin: 14px 0 23px;
            }
            .section p {
                color: var(--muted);
            }
            .intro-text {
                padding-top: 30px;
            }
            .text-link {
                display: inline-block;
                border-bottom: 1px solid var(--wine);
                padding-bottom: 3px;
                font-size: 14px;
            }
            .paths {
                background: #eee8df;
            }
            .section-head {
                display: flex;
                justify-content: space-between;
                align-items: end;
                gap: 35px;
                margin-bottom: 34px;
            }
            .section-head p {
                max-width: 350px;
                margin-bottom: 25px;
            }
            .cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .card {
                padding: 32px;
                background: var(--paper);
                border-top: 3px solid #ad814c;
            }
            .num {
                color: #99743d;
                font-size: 13px;
                letter-spacing: 1px;
            }
            .card h3 {
                font-size: 27px;
                line-height: 1.25;
                margin: 28px 0 12px;
            }
            .card p {
                font-size: 15px;
            }
            .card ul {
                padding-left: 18px;
                font-size: 14px;
                color: #65575c;
                margin-top: 23px;
            }
            .card li {
                margin: 8px 0;
            }
            .practice {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 85px;
                align-items: center;
            }
            .soundbox {
                background: var(--wine);
                color: var(--paper);
                padding: 40px;
                border-radius: 5px;
            }
            .soundbox .eyebrow {
                color: #d6af72;
            }
            .soundbox h3 {
                font-size: 32px;
                margin: 15px 0;
            }
            .soundbox p {
                color: #d6c6cb;
                font-size: 14px;
            }
            .notes {
                display: flex;
                gap: 7px;
                margin: 28px 0 16px;
            }
            .note {
                flex: 1;
                min-width: 0;
                padding: 20px 2px;
                background: #fff6e9;
                border: 0;
                border-radius: 40px;
                color: var(--wine);
                font-family: Georgia;
                font-size: 17px;
            }
            .note:hover,
            .note.playing {
                background: var(--gold);
            }
            .soundstatus {
                font-size: 12px !important;
                min-height: 22px;
                margin-bottom: 0;
            }
            .methods {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 22px;
                margin-top: 30px;
            }
            .method {
                border: 1px solid #d8cbc0;
                padding: 30px;
            }
            .method h3 {
                font-size: 27px;
                margin: 0 0 12px;
            }
            .method p {
                font-size: 15px;
            }
            .method strong {
                font-size: 12px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: #9c7136;
            }
            .faq {
                max-width: 790px;
                margin: auto;
            }
            .faq h2 {
                text-align: center;
                margin-bottom: 35px;
            }
            .faq details {
                border-bottom: 1px solid #d9cec3;
                padding: 20px 0;
            }
            .faq summary {
                cursor: pointer;
                font-size: 17px;
                list-style: none;
                display: flex;
                justify-content: space-between;
                gap: 20px;
            }
            .faq summary::after {
                content: "+";
                font-size: 23px;
                color: #9c7136;
            }
            .faq details[open] summary::after {
                content: "−";
            }
            .faq details p {
                font-size: 15px;
                max-width: 680px;
            }
            .join {
                background: var(--wine);
                color: var(--paper);
                text-align: center;
                padding: 72px 30px;
            }
            .join h2 {
                font: 46px/1.2 Georgia;
                margin: 15px 0;
            }
            .join p {
                color: #d6c5cb;
                max-width: 570px;
                margin: 20px auto 28px;
            }
            .join .eyebrow {
                color: #dbb579;
            }
            .choice {
                display: flex;
                justify-content: center;
                gap: 10px;
                flex-wrap: wrap;
                margin-bottom: 20px;
            }
            .choice button {
                padding: 10px 18px;
                border: 1px solid #85636e;
                background: transparent;
                color: white;
                border-radius: 30px;
                font-size: 14px;
            }
            .choice button[aria-pressed="true"] {
                background: #f8efdf;
                color: var(--wine);
                border-color: #f8efdf;
            }
            .plan {
                max-width: 620px;
                margin: auto;
                background: #462331;
                padding: 20px 25px;
                border-radius: 5px;
                min-height: 105px;
            }
            .plan p {
                margin: 0;
                font-size: 15px;
            }
            .plan strong {
                display: block;
                color: #e0b878;
                margin-bottom: 5px;
                font-weight: 400;
            }
            .footer {
                display: flex;
                justify-content: space-between;
                gap: 30px;
                padding-top: 32px;
                padding-bottom: 32px;
                color: #796d70;
                font-size: 12px;
            }
            .footer .brand {
                font-size: 24px;
            }
            .menu {
                display: none;
            }
            @media (max-width: 800px) {
                .wrap {
                    padding-left: 24px;
                    padding-right: 24px;
                }
                .nav {
                    min-height: 78px;
                }
                .navlinks {
                    gap: 18px;
                }
                .navlinks > a:not(.btn) {
                    display: none;
                }
                .hero-grid {
                    grid-template-columns: 1fr;
                    gap: 32px;
                    padding-top: 38px;
                }
                .hero h1 {
                    font-size: 57px;
                }
                .hero-image {
                    height: 370px;
                    max-width: 520px;
                    width: 100%;
                    margin: auto;
                }
                .hero-image img {
                    border-radius: 120px 120px 4px 4px;
                }
                .band .wrap {
                    flex-wrap: wrap;
                    justify-content: center;
                    font-size: 12px;
                    gap: 10px 20px;
                }
                .intro,
                .practice {
                    grid-template-columns: 1fr;
                    gap: 25px;
                }
                .intro-text {
                    padding-top: 0;
                }
                .section {
                    padding: 57px 0;
                }
                .section h2 {
                    font-size: 36px;
                }
                .cards {
                    grid-template-columns: 1fr;
                }
                .section-head {
                    display: block;
                }
                .section-head p {
                    max-width: 100%;
                }
                .methods {
                    grid-template-columns: 1fr;
                }
                .soundbox {
                    padding: 28px;
                }
                .join h2 {
                    font-size: 36px;
                }
                .footer {
                    flex-direction: column;
                    gap: 15px;
                }
                .hero-note {
                    font-size: 12px;
                }
                .note {
                    font-size: 16px;
                }
                .brand {
                    font-size: 25px;
                }
                .nav .btn {
                    padding: 9px 13px;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                html {
                    scroll-behavior: auto;
                }
            }