/* The Self-Taught Pianist Circle design system, v2 (2026-10-10) */
:root{
--forest:#1C2B1A;--green:#3D5A3E;--gold:#C4A46B;--umber:#6B5B4E;--parchment:#EDE8DF;--paper:#FBFAF7;--ink:#262626;--hairline:#DCD6CB;
--font-display:'Libre Caslon Display','Libre Caslon Text',Georgia,serif;
--font-serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
--font-body:'Atkinson Hyperlegible Next','Helvetica Neue',Arial,sans-serif;
--space-xs:4px;--space-s:8px;--space-m:16px;--space-l:24px;--space-xl:40px;--space-2xl:64px;
--measure:640px;
color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
a:hover{opacity:.82}
.band{background:var(--forest);padding:var(--space-2xl) var(--space-m) var(--space-xl)}
.band-inner,.main{max-width:var(--measure);margin:0 auto}
.band h1{font:400 48px/1.1 var(--font-display);color:var(--paper);text-wrap:balance}
.rule{height:2px;background:var(--gold);border:0}
.main{padding:var(--space-xl) var(--space-m) var(--space-2xl)}
.lead{font:400 20px/1.5 var(--font-serif)}
h2{font:400 26px/1.25 var(--font-serif);color:var(--forest);margin-top:var(--space-2xl);text-wrap:balance}
h2 + p{margin-top:var(--space-s)}
p{margin-top:var(--space-m)}
.secondary{color:var(--umber)}
.small{font-size:14px;line-height:1.5}
.button{display:inline-block;margin-top:var(--space-l);background:var(--forest);color:var(--paper);font:700 17px/1.2 var(--font-body);text-decoration:none;padding:16px 28px;border:0;border-radius:0;cursor:pointer;transition:opacity 120ms ease}
.button:hover{opacity:.82}
.button:active{background:#111a10}
.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
ol.steps{list-style:none;counter-reset:s;margin-top:var(--space-m);display:flex;flex-direction:column;gap:var(--space-m)}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr}
ol.steps li::before{content:counter(s) ".";color:var(--green);font-weight:700}
.video{margin-top:var(--space-m);aspect-ratio:16/9;max-width:100%;background:var(--parchment);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;color:var(--umber)}
.video iframe{width:100%;height:100%;border:0;display:block}
.callout{margin-top:var(--space-l);background:var(--parchment);border:1px solid var(--gold);border-radius:3px;padding:var(--space-l)}
.callout p:first-child{margin-top:0}
form{margin-top:var(--space-l);display:flex;flex-direction:column;gap:var(--space-l)}
.field{display:flex;flex-direction:column;gap:var(--space-s);border:0}
.field > label,.field legend{font-weight:700}
.field .hint{color:var(--umber);font-size:15px;margin-top:0}
input[type=text],input[type=email],input[type=tel],select,textarea{font:400 17px/1.4 var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--hairline);border-radius:0;padding:12px 14px;width:100%}
textarea{min-height:120px;resize:vertical}
.choice{display:flex;gap:var(--space-s);align-items:flex-start;margin-top:var(--space-s);font-weight:400}
.choice input{accent-color:var(--green);margin-top:5px;width:18px;height:18px;flex:none}
.hidden-field{position:absolute;left:-9999px}
footer{max-width:var(--measure);margin:0 auto;padding:0 var(--space-m) var(--space-xl);color:var(--umber);font-size:14px}
@media (max-width:600px){
.band{padding:var(--space-xl) var(--space-m) var(--space-l)}
.band h1{font-size:36px}
.lead{font-size:19px}
}