:root {
      --paper: #f6f7fb;
      --ink: #17233b;
      --muted: #68738a;
      --green: #6856d9;
      --green-dark: #17233b;
      --mint: #dff6ee;
      --coral: #ffe5dc;
      --yellow: #eeeaff;
      --blue: #e2efff;
      --line: rgba(24, 49, 45, .14);
      --white: #ffffff;
      --serif: Georgia, "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
    .topline { background: var(--green-dark); color: #f8f5e9; text-align: center; padding: 9px 16px; font-size: 12px; letter-spacing: .055em; }
    .topline span { color: var(--yellow); font-weight: 700; margin-right: 7px; }
    header { height: 82px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 750; letter-spacing: -.055em; }
    .brand-mark { position: relative; width: 31px; height: 31px; border-radius: 10px 10px 10px 3px; background: var(--coral); display: grid; place-items: center; color: var(--ink); font-family: var(--sans); font-size: 21px; line-height: 1; transform: rotate(-5deg); }
    .brand-mark::after { content: ""; width: 6px; height: 6px; position: absolute; right: 5px; bottom: 5px; border-radius: 50%; background: var(--yellow); }
    .navlinks { display: flex; gap: 32px; align-items: center; color: #68738a; font-size: 14px; }
    .navlinks a:hover, .text-link:hover { color: var(--green); }
    .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--green); color: white; font-weight: 650; font-size: 14px; padding: 13px 19px; transition: transform .2s ease, background .2s ease; }
    .nav-cta:hover, .button:hover { background: var(--green-dark); transform: translateY(-2px); }
    .menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 25px; cursor: pointer; }
    .hero { padding: 76px 0 68px; overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 60px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
    h1 { margin: 20px 0 22px; font-family: var(--sans); font-size: clamp(48px, 6.1vw, 78px); font-weight: 500; letter-spacing: -.055em; line-height: .99; max-width: 630px; }
    h1 em { color: var(--green); font-weight: 500; }
    .hero-copy { max-width: 515px; color: var(--muted); font-size: 17px; line-height: 1.7; }
    .hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 31px; }
    .text-link { font-weight: 650; font-size: 14px; color: var(--ink); }
    .arrow { display: inline-block; margin-left: 6px; transition: transform .2s; }
    .text-link:hover .arrow { transform: translateX(4px); }
    .microcopy { margin-top: 21px; color: #68738a; font-size: 12px; }
    .visual { position: relative; min-height: 460px; display: grid; place-items: center; }
    .visual-bg { position: absolute; width: min(440px, 90%); aspect-ratio: 1; border-radius: 46% 54% 57% 43% / 49% 42% 58% 51%; background: var(--mint); transform: rotate(-8deg); }
    .section { padding: 92px 0; }
    .section-head { max-width: 650px; margin-bottom: 38px; }
    .section-head.center { text-align: center; margin: 0 auto 43px; }
    h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -.045em; font-size: clamp(37px, 4.3vw, 54px); line-height: 1.04; margin: 15px 0; }
    .section-lede { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; }
    .feature-band { background: var(--green-dark); color: #f8f6eb; position: relative; overflow: hidden; }
    .feature-band::after { content: "♪"; position: absolute; right: -28px; bottom: -175px; font: 430px/1 var(--sans); color: rgba(242,204,103,.10); transform: rotate(-15deg); }
    .feature-band .eyebrow { color: var(--yellow); }
    .feature-band h2 { max-width: 660px; }
    .feature-band .section-lede { max-width: 600px; color: #dce0ed; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 43px; position: relative; z-index: 1; }
    .feature-card { min-height: 233px; padding: 25px 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(255,255,255,.055); }
    .feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--yellow); color: var(--ink); font-family: var(--sans); font-size: 21px; margin-bottom: 25px; }
    .feature-card:nth-child(2) .feature-icon { background: var(--coral); }
    .feature-card:nth-child(3) .feature-icon { background: var(--blue); }
    .feature-card h3 { margin: 0 0 9px; font-family: var(--sans); font-size: 23px; font-weight: 500; letter-spacing: -.025em; }
    .feature-card p { margin: 0; font-size: 14px; line-height: 1.65; color: #dce0ed; }
    .roles { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
    .role-list { border-top: 1px solid var(--line); }
    .role { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
    .role-num { color: var(--coral); font-family: var(--sans); font-size: 22px; }
    .role h3 { margin: 0 0 7px; font-size: 16px; }
    .role p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.6; }
    .quote-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 45px; background: #eeeaff; padding: 39px; border-radius: 15px; }
    .quote-panel h2 { font-size: 39px; }
    .quote-panel p { color: var(--muted); line-height: 1.7; }
    .quote-note { font-family: var(--sans); font-size: 32px; line-height: 1.25; color: var(--green-dark); padding-left: 27px; border-left: 2px solid var(--coral); }
    .closing { padding: 70px 0 90px; text-align: center; }
    .closing-inner { background: var(--yellow); border-radius: 17px; padding: 55px 28px; position: relative; overflow: hidden; }
    .closing-inner::before, .closing-inner::after { content: ""; position: absolute; border: 1px solid rgba(24,49,45,.18); border-radius: 50%; width: 190px; height: 190px; top: -105px; left: -35px; }
    .closing-inner::after { top: auto; left: auto; right: -36px; bottom: -126px; width: 235px; height: 235px; }
    .closing h2 { max-width: 610px; margin: 0 auto 17px; font-size: clamp(38px, 4.6vw, 57px); }
    .closing p { max-width: 540px; margin: 0 auto 25px; color: #68738a; line-height: 1.65; }
    .closing .button { background: var(--ink); }
    footer { padding: 24px 0 33px; border-top: 1px solid var(--line); color: #68738a; font-size: 12px; }
    .foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .foot .brand { color: var(--ink); font-size: 17px; }
    .foot .brand-mark { width: 25px; height: 25px; font-size: 16px; border-radius: 8px 8px 8px 3px; }
    .foot-right { display: flex; gap: 21px; align-items: center; }
    @media (max-width: 850px) {
      .hero-grid { gap: 20px; grid-template-columns: 1fr 1fr; }
      .visual { min-height: 390px; }
      .roles { gap: 42px; }
      .feature-card { padding: 20px; }
    }
    @media (max-width: 650px) {
      .wrap { width: min(100% - 36px, 540px); }
      header { height: 70px; }
      .menu-toggle { display: block; }
      .navlinks { display: none; position: absolute; z-index: 10; top: 70px; left: 0; right: 0; padding: 18px 24px 23px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 18px; }
      .navlinks.open { display: flex; }
      .navlinks .nav-cta { align-self: flex-start; }
      .hero { padding: 51px 0 48px; }
      .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
      h1 { font-size: clamp(47px, 14vw, 67px); }
      .hero-copy { font-size: 16px; }
      .visual { min-height: 360px; margin-top: 8px; }
      .visual-bg { width: 320px; }
      .section { padding: 68px 0; }
      .feature-grid { grid-template-columns: 1fr; margin-top: 30px; }
      .feature-card { min-height: auto; }
      .feature-icon { margin-bottom: 17px; }
      .roles { grid-template-columns: 1fr; gap: 22px; }
      .quote-panel { grid-template-columns: 1fr; gap: 17px; padding: 27px; }
      .quote-panel h2 { font-size: 35px; }
      .quote-note { font-size: 27px; }
      .closing { padding: 47px 0 60px; }
      .closing-inner { padding: 42px 22px; }
      .foot { align-items: flex-start; flex-direction: column; }
      .foot-right { flex-wrap: wrap; gap: 12px 18px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

    :root { --line:#e2e5ef; }
    header { position:relative; height:100px; background:white; }
    .brand { letter-spacing:-1.2px;font-size:29px;font-weight:800; }
    .brand-mark {width:43px;height:43px;background:var(--green);color:white;border-radius:13px;transform:none;font-family:var(--sans);font-size:26px;}
    .brand-mark::after{display:none}.brand-tag{display:block;font-size:8px;letter-spacing:1.35px;color:var(--muted);margin-top:3px;font-weight:700}
    h1{font-weight:650;letter-spacing:-4px;line-height:1.03}h1 em{font-style:normal}h2{font-weight:600;line-height:1.1}h3{font-weight:650!important}
    .hero{padding:85px 0 80px}.eyebrow{letter-spacing:.12em}.eyebrow::before{background:var(--green)}
    .navlinks{gap:24px}.nav-cta,.button{border-radius:12px;min-height:48px}.button:hover,.nav-cta:hover{background:#5442bf}
    .hero-actions{flex-wrap:wrap}.feature-card{border-radius:20px}.feature-icon{font-size:24px}.feature-band{background:var(--ink)}
    .role-num{color:var(--green)}.quote-panel{border-radius:24px}.quote-note{font-weight:550;letter-spacing:-1px;border-color:var(--green)}
    .closing-inner{border-radius:24px;background:var(--green);color:white}.closing .eyebrow,.closing p{color:white}.closing .eyebrow::before{background:white}.closing h2{margin-top:18px}.closing .button{background:white;color:var(--ink)}.closing .button:hover{background:var(--lavender,#eeeaff)}
    .email-note{font-size:12px;margin-top:20px!important;margin-bottom:0!important}.email-note a{text-decoration:underline;text-underline-offset:3px}
    .skip{position:fixed;top:-100px;left:16px;z-index:100;padding:12px;background:white}.skip:focus{top:12px}
    a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6856d9;outline-offset:5px}.closing a:focus-visible{outline-color:white}
    section[id]{scroll-margin-top:30px}.visual{min-height:470px;isolation:isolate}.visual-bg{background:#eeeaff;border-radius:50%;width:400px}.music-flow{position:absolute;width:110%;height:100%;z-index:1}.harmony-note{position:absolute;top:22px;right:80px;font-size:110px;color:var(--green);transform:rotate(10deg)}
    .idea{position:absolute;z-index:2;background:white;border:1px solid var(--line);border-radius:20px;padding:24px;width:245px;box-shadow:0 15px 40px #17233b0d}.idea span{font-size:9px;letter-spacing:1.4px;font-weight:750;color:var(--muted)}.idea strong{display:block;font-size:29px;letter-spacing:-1px;margin:8px 0}.idea p{margin:0;font-size:12px;color:var(--muted)}.idea-lessons{top:35px;left:0;border-top:5px solid #dff6ee;transform:rotate(-5deg)}.idea-classes{right:0;top:190px;border-top:5px solid #ffe5dc;transform:rotate(4deg)}.idea-growth{bottom:28px;left:10px;border-top:5px solid #e2efff;transform:rotate(-3deg)}.illustration-label{position:absolute;bottom:0;font-size:8px;letter-spacing:1.5px;color:var(--muted)}
    .faq{padding-top:20px}.faq .wrap{max-width:840px}.faq h2{margin-bottom:30px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{font-size:17px;font-weight:600;cursor:pointer}.faq details p{color:var(--muted);line-height:1.7;max-width:680px}.foot .brand-tag{display:none}
    @media(max-width:1000px){.navlinks{gap:15px}.navlinks a{font-size:12px}.hero-grid{gap:25px}.idea{width:210px}.harmony-note{right:30px}h1{letter-spacing:-3px}}
    @media(max-width:650px){header{height:85px}.navlinks{top:85px}.navlinks a{font-size:15px}.hero{padding-top:48px}.visual{margin-top:30px;min-height:460px}.visual-bg{width:min(340px,90%)}.idea{width:220px}.idea-lessons{left:5px}.idea-classes{right:3px}.idea-growth{left:12px}.brand{font-size:26px}.brand-tag{font-size:7px}.topline{font-size:10px}h1{letter-spacing:-2.5px}.quote-panel h2{font-size:32px}.closing h2{font-size:35px}.closing-inner{padding:40px 20px}.feature-card h3{font-size:22px}.closing .button{font-size:13px}}