/* musicstorage landing — tokens from the app (app/static/css/app.css) + modern landing layer */
:root {
  --paper:#F6F4ED; --surface:#FFFFFF; --surface-2:#FBFAF4;
  --ink:#1B1D24; --ink-soft:#3C404B; --muted:#74777F;
  --line:#E7E2D6; --line-strong:#D9D3C4;
  --navy:#1F2C49; --navy-700:#16203A;
  --brass:#A8791F; --brass-600:#8C6515; --brass-tint:#F2E9D2; --brass-lite:#E7C77E;
  --ok:#356B4F; --ok-bg:#E6F0EA; --danger:#A6362F; --danger-bg:#F5E4E1;
  --r-sm:7px; --r:11px; --r-lg:18px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(27,29,36,.05),0 1px 1px rgba(27,29,36,.04);
  --shadow-2:0 10px 30px -14px rgba(27,29,36,.24),0 3px 8px -3px rgba(27,29,36,.08);
  --shadow-3:0 30px 70px -30px rgba(11,16,30,.6);
  --font-display:"Fraunces",Georgia,serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --maxw:1140px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-ui); font-size:16px; line-height:1.6; color:var(--ink);
  background:radial-gradient(1200px 460px at 82% -160px,#FFFDF7 0%,rgba(255,253,247,0) 70%),var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--navy); text-decoration:none; }
a:hover { color:var(--brass-600); }
h1,h2,h3 { font-family:var(--font-display); font-weight:560; color:var(--ink);
  letter-spacing:-.015em; line-height:1.1; margin:0; font-optical-sizing:auto; }
img,svg { max-width:100%; }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:3px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.mono { font-family:var(--font-mono); }
.muted { color:var(--muted); }

/* eyebrow — pill badge on light, plain on dark */
.eyebrow { display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-600); background:var(--brass-tint);
  padding:5px 11px; border-radius:999px; }
.hero .eyebrow { background:rgba(231,199,126,.14); color:var(--brass-lite);
  border:1px solid rgba(231,199,126,.28); }

/* buttons */
.btn { --bg:var(--surface); --fg:var(--ink); --bd:var(--line-strong);
  display:inline-flex; align-items:center; gap:8px; justify-content:center; font:inherit;
  font-weight:560; font-size:14px; line-height:1; cursor:pointer; padding:10px 16px;
  border-radius:11px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  transition:transform .12s ease,box-shadow .18s,background .15s,border-color .15s; white-space:nowrap; }
.btn:hover { box-shadow:var(--shadow-1); color:var(--fg); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--brass { --bg:var(--brass); --fg:#fff; --bd:var(--brass);
  box-shadow:0 8px 20px -10px rgba(168,121,31,.7); }
.btn--brass:hover { --bg:var(--brass-600); color:#fff; box-shadow:0 12px 26px -10px rgba(168,121,31,.8); }
.btn--ghost { --bg:transparent; --fg:var(--ink-soft); --bd:var(--line-strong); }
.btn--ghost:hover { --bg:var(--surface); }
.btn--ondark { --fg:#EFEDE6; --bd:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
.btn--ondark:hover { background:rgba(255,255,255,.14); color:#fff; }
.btn--lg { padding:14px 22px; font-size:15px; border-radius:13px; }
.btn--block { width:100%; }
.btn[disabled] { opacity:.55; pointer-events:none; }

/* topbar — flows into the navy hero */
.topbar { background:rgba(22,32,58,.82); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar .wrap { display:flex; align-items:center; gap:18px; height:62px; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; font-family:var(--font-display);
  font-size:19px; font-weight:560; }
.brand .clef { width:26px; height:26px; display:grid; place-items:center; color:var(--brass-lite); }
.topnav { display:flex; gap:22px; margin-left:8px; }
.topnav a { color:#C9CEDA; font-size:14px; }
.topnav a:hover { color:#fff; }
.topbar .spacer { flex:1; }
@media (max-width:720px){ .topnav { display:none; } }

/* sections */
.section { padding:84px 0; }
.section--tint { background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head { max-width:660px; margin:0 0 40px; }
.section__head h2 { font-size:clamp(26px,3.4vw,38px); margin-top:14px; }
.section__head p { color:var(--muted); margin:14px 0 0; font-size:17px; }

/* hero — navy band, manuscript texture, floating art */
.hero { position:relative; overflow:hidden; color:#EDECE6; padding:104px 0 116px; margin-top:-1px;
  background:
    radial-gradient(820px 460px at 80% -6%, rgba(168,121,31,.22), transparent 62%),
    radial-gradient(700px 500px at 6% 108%, rgba(120,150,210,.14), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
  -webkit-mask:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 72%);
  mask:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 72%); }
.hero .wrap { position:relative; z-index:1; }
.hero__grid { display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
.hero h1 { color:#fff; font-size:clamp(40px,5.6vw,66px); letter-spacing:-.025em; margin:18px 0 0; }
.hero p.lead { font-size:clamp(17px,1.5vw,20px); color:rgba(237,236,230,.76); margin:22px 0 0; max-width:40ch; }
.hero__cta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero__trust { display:flex; gap:20px; margin-top:26px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:rgba(237,236,230,.62); }
.hero__trust span { display:inline-flex; align-items:center; gap:8px; }
.hero__trust span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-lite); }
.hero__art { background:var(--surface); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); padding:26px; transform:rotate(-1.4deg); transition:transform .35s ease; }
.hero__art:hover { transform:rotate(0deg); }

/* slur — a brass tie/slur hand-underlining one word */
.slur { position:relative; white-space:nowrap; color:#F4DCA0; }
.slur svg { position:absolute; left:-2%; width:104%; height:.42em; bottom:-.26em; overflow:visible; }

/* manuscript staff rule used as a section divider */
.staffbreak { height:56px; position:relative; }
.staffbreak::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1140px,92%); height:29px;
  background:repeating-linear-gradient(180deg, var(--line-strong) 0 1px, transparent 1px 7px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.staffbreak::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 5px var(--paper); }

@media (max-width:820px){
  .hero { padding:72px 0 84px; }
  .hero__grid { grid-template-columns:1fr; gap:34px; }
  .hero__art { transform:none; order:0; }
}

/* feature grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid { grid-template-columns:1fr; } }
.feature { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:26px 24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-lite));
  transform:scaleX(0); transform-origin:left; transition:transform .24s ease; }
.feature:hover { transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.feature:hover::before { transform:scaleX(1); }
.feature__ic { width:46px; height:46px; padding:11px; border-radius:13px; color:var(--brass-600);
  background:var(--brass-tint); margin-bottom:16px; }
.feature h3 { font-size:19px; }
.feature p { color:var(--muted); margin:9px 0 0; font-size:14.5px; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:820px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps { grid-template-columns:1fr; } }
.step { position:relative; padding:26px 24px 24px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-1); overflow:hidden; }
.step__n { font-family:var(--font-mono); font-size:11.5px; color:var(--brass-600); letter-spacing:.16em; }
.step h3 { font-size:18px; margin:10px 0 0; }
.step p { color:var(--muted); margin:7px 0 0; font-size:14px; }
.step::after { content:""; position:absolute; right:16px; top:14px; width:8px; height:8px; border-radius:50%;
  background:var(--brass-tint); }

/* support band */
.support { display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; }
@media (max-width:820px){ .support { grid-template-columns:1fr; } }
.support h2 { font-size:clamp(26px,3.4vw,38px); }
.support p { color:var(--ink-soft); margin:16px 0 0; font-size:17px; }
.badge48 { font-family:var(--font-display); font-size:58px; color:var(--brass); text-align:center; line-height:1;
  padding:34px 30px; border-radius:var(--r-xl); background:
    radial-gradient(120% 120% at 50% 0%, #FBF1D8, var(--brass-tint));
  border:1px solid #E9D6A6; box-shadow:var(--shadow-2); }
.badge48 span { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  color:var(--brass-600); text-transform:uppercase; margin-top:12px; }

/* contact */
.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
@media (max-width:820px){ .contact { grid-template-columns:1fr; } }
#contactForm { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--shadow-2); }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:560; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field textarea { width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s, background .15s; }
.field input:focus, .field textarea:focus { outline:none; background:var(--surface);
  border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-tint); }
.field textarea { min-height:130px; resize:vertical; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.check input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--brass); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote { font-size:13px; margin-top:14px; }
.formnote--ok { color:var(--ok); }
.formnote--err { color:var(--danger); }

/* footer */
.foot { border-top:1px solid var(--line); background:var(--surface-2); padding:38px 0; }
.foot .wrap { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.foot a { color:var(--ink-soft); font-size:14px; }
.foot .spacer { flex:1; }
.foot small { color:var(--muted); }

/* legal pages */
.legal { max-width:760px; margin:0 auto; padding:64px 22px 90px; }
.legal h1 { font-size:clamp(30px,4vw,40px); margin-bottom:8px; }
.legal h2 { font-size:20px; margin:34px 0 8px; }
.legal p, .legal li { color:var(--ink-soft); }
.legal .ph { background:var(--brass-tint); color:var(--brass-600); padding:0 4px; border-radius:4px;
  font-family:var(--font-mono); font-size:.9em; }
.legal .back { display:inline-block; margin-bottom:24px; font-size:14px; }

/* scroll-reveal (JS adds .reveal to below-fold blocks; .in when in view) */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.grid .feature:nth-child(3n+2){ transition-delay:.07s; }
.grid .feature:nth-child(3n+3){ transition-delay:.14s; }
.steps .step:nth-child(2){ transition-delay:.06s; }
.steps .step:nth-child(3){ transition-delay:.12s; }
.steps .step:nth-child(4){ transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .hero__art, .btn, .feature { transition:none; }
}