/* groovr.io: the look of the plugin itself (dark, one orange, each tool in its panel colour), set in Archivo for
   titles, Instrument Sans for reading, IBM Plex Mono for the plugin's readouts. One file for every page. */
:root {
  --bg: #121316; --panel: #1b1d22; --tile: #15171b; --chip: #24272e; --line: #2b2e36;
  --text: #ecedef; --soft: #c4c8d0; --muted: #a3a8b2; --faint: #8e94a0;
  --accent: #ff7a1a; --accent-ink: #121316;
  --groove: #ff7a3d; --chords: #8fbcff; --riff: #c792ea; --key: #f0b429; --arrange: #4ec07a;
  --display: "Archivo", "Helvetica Neue", sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--body); }
a { color: var(--accent); } a:hover { color: #ffa060; }
img, svg { display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* the sides only: sections keep their own spacing */
.kicker { font: 500 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--display); font-stretch: 112%; font-weight: 800; }
h1, h2 { font-family: var(--display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; }
h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; border-radius: 12px; padding: 14px 24px; text-align: center; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #ff9140; color: var(--accent-ink); }
.btn.quiet { background: #2a2d35; color: var(--text); }
.btn.quiet:hover { background: #343844; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; } /* a hidden button stays hidden whatever its own display says */

/* the bar at the top */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 800 22px var(--display); font-stretch: 112%; }
.brand:hover { color: var(--text); }
.brand .logo { width: 32px; height: 32px; flex: none; overflow: visible; }
.top nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.top nav a:not(.btn) { color: var(--muted); text-decoration: none; } .top nav a:not(.btn):hover { color: var(--text); }
.top nav .btn { padding: 10px 18px; border-radius: 10px; }

/* the opening: the line, and the plugin's window as it looks with a song in it */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 72px; }
.hero .text { flex: 1 1 440px; min-width: 0; }
.hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: .94; letter-spacing: -.01em; margin: 16px 0 24px; }
.hero p { color: var(--soft); font-size: 19px; margin: 0 0 28px; max-width: 520px; }
.cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta .note { color: var(--muted); font-size: 15px; }

.window { flex: 1 1 520px; min-width: 0; margin: 0; /* a figure's default side margins would squeeze it on a phone */ background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); font-size: 15px; }
.window .tabs { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.window .tabs b { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; margin-right: 6px; }
.window .tabs b .logo { width: 18px; height: 18px; flex: none; overflow: visible; }
.window .tabs > span { display: flex; align-items: center; gap: 5px; padding: 3px 0 5px; }
.window .tabs > span svg { width: 15px; height: 15px; flex: none; color: var(--c); }
.window .tabs > i { font-style: normal; color: var(--faint); font-size: 11px; }
.window .tabs .on { color: var(--text); box-shadow: inset 0 -2px 0 var(--key); }
.window .tabs .more { margin-left: auto; padding: 0; } .window .tabs .more svg { color: var(--muted); }
.apply { padding: 14px 18px 0; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.apply .pill { display: flex; align-items: center; gap: 6px; font-weight: 600; border: 1px solid var(--line); padding: 6px 11px; border-radius: 9px; margin-right: auto; white-space: nowrap; }
.apply .pill svg { width: 13px; height: 13px; color: var(--muted); }
.apply .copy { display: flex; align-items: center; gap: 6px; font-weight: 600; background: var(--key); color: #121316; padding: 6px 12px; border-radius: 9px; white-space: nowrap; }
.apply .copy svg { width: 13px; height: 13px; }
.apply .round { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.scenes { padding: 12px 18px 0; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.strip div { position: relative; height: 52px; border-radius: 5px 5px 2px 2px; background: #2a2f3d; border-bottom: 3px solid var(--faint); overflow: hidden; }
.strip div.on { background: #4a443a; border-bottom-color: var(--key); }
.strip span { position: absolute; left: 6px; bottom: 4px; right: 4px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.strip em { position: absolute; left: 5px; top: 4px; font: 600 9px var(--mono); font-style: normal; color: #121316; background: var(--key); padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.under { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 4px; font-size: 9.5px; color: var(--faint); }
.keys { padding: 12px 18px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.keytile { background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.keytile.picked { border-color: var(--key); }
.keytile .row { display: flex; justify-content: space-between; align-items: center; color: var(--key); font-size: 13px; }
.keytile .end { display: flex; align-items: center; gap: 8px; }
.keytile .heart { color: #4a4e59; font-size: 12px; }
.keytile .undo { font: 500 11px var(--mono); color: var(--key); }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.picked .led { background: var(--key); box-shadow: 0 0 8px var(--key); }
.keytile b { display: block; margin-top: 8px; font-weight: 600; }
.keytile .rel { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.keytile .takes { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 4px; }
.keytile .takes small { font: 500 9.5px var(--mono); color: var(--muted); }
.keytile .takes span { display: flex; gap: 4px; }
.keytile .takes i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.keytile .takes i.on { background: var(--key); }
.keytile p { color: var(--soft); font-size: 13px; line-height: 1.4; margin: 6px 0 0; }
.ask { margin: 0 18px 14px; display: flex; align-items: center; gap: 10px; background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: 7px 8px 7px 12px; color: var(--muted); font-size: 13px; }
.ask > svg { width: 15px; height: 15px; flex: none; }
.ask > span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask .deep { display: flex; align-items: center; gap: 4px; font-size: 12px; } .ask .deep svg { width: 13px; height: 13px; }
.ask .send { width: 26px; height: 26px; border-radius: 7px; background: #2a2d35; color: var(--text); display: grid; place-items: center; } .ask .send svg { width: 14px; height: 14px; }
.video { margin: 0 18px 18px; border: 1px dashed #3a3e48; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.video .play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }

/* the five tools, in the window's order */
section { padding-top: 40px; padding-bottom: 72px; }
section h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; margin: 10px 0 32px; max-width: 760px; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.tool .row { display: flex; align-items: center; justify-content: space-between; font: 500 13px var(--mono); color: var(--c); }
.tool .row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tool h3 { font-size: 23px; margin: 14px 0 8px; }
.tool p { color: #b8bcc5; margin: 0 0 14px; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; font: 500 12px var(--mono); color: var(--soft); }
.chips span { background: var(--chip); padding: 4px 8px; border-radius: 6px; }
.groove { --c: var(--groove); } .chords { --c: var(--chords); } .riff { --c: var(--riff); } .key { --c: var(--key); } .arrange { --c: var(--arrange); }

.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; padding-top: 8px; padding-bottom: 32px; }
.promises h3 { font-family: var(--body); font-weight: 600; font-size: 19px; margin: 10px 0 6px; }
.promises p { color: #b8bcc5; margin: 0; font-size: 16px; }

/* pricing */
.lede { color: #b8bcc5; margin: -20px 0 32px; max-width: 640px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.plan.main { border: 1.5px solid var(--accent); }
.plan .title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan h3 { font-size: 24px; margin: 0; }
.plan .tag { font: 500 12px var(--mono); color: var(--accent); }
.plan .price { font: 800 44px var(--display); font-stretch: 112%; }
.plan .price small { font: 400 17px var(--body); color: var(--muted); }
.plan p { color: var(--soft); margin: 0; font-size: 16px; }
.plan p.aside { color: var(--muted); font-size: 14px; }
.plan .btn { margin-top: auto; padding: 13px; border-radius: 11px; }

.closing { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 44px 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.closing div { flex: 1 1 420px; min-width: 0; }
.closing h2 { font-size: 34px; margin: 0 0 8px; }
.closing p { color: #b8bcc5; margin: 0; }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; color: var(--muted); font-size: 14px; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; } footer a { color: var(--muted); } footer a:hover { color: var(--text); }

@media (max-width: 600px) {
  .hero { padding-top: 24px; gap: 36px; }
  .keys { grid-template-columns: 1fr; }
  .strip span { font-size: 9px; }
  .apply .round { display: none; }
  .closing { padding: 32px 22px; }
}

/* the legal pages: one readable column */
.doc { max-width: 760px; margin: 0 auto; padding: 24px 24px 80px; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1; margin: 12px 0 8px; }
.doc .updated { color: var(--muted); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 22px; line-height: 1.2; margin: 40px 0 12px; text-transform: none; }
.doc p, .doc li { color: var(--soft); }
.doc ul { padding-left: 22px; } .doc li { margin: 6px 0; }
.doc strong { color: var(--text); }

/* the account page: the same column, its parts in cards */
.acct { max-width: 860px; }
.acct h1 { font-size: clamp(26px, 4.4vw, 44px); overflow-wrap: anywhere; text-transform: none; }
.acct .note { min-height: 1.5em; margin: 0 0 20px; color: var(--soft); }
.acct .bad { color: #f08a7a; }
.acct section { padding: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 0 0 16px; }
.card h2 { margin: 0 0 10px; }
/* the download page's install steps: a number each, the two DAWs side by side */
.step { display: flex; gap: 18px; align-items: flex-start; }
.step .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 800 16px var(--display); }
.step .body { flex: 1; min-width: 0; } .step .body > h3 { font-size: 20px; margin: 4px 0 10px; }
.card > h3 { font-size: 20px; margin: 0 0 10px; }
.daws { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.daw { background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.daw h3 { margin: 0 0 8px; font-size: 16px; }
.daw ol { margin: 0; padding-left: 20px; } .daw li { margin: 4px 0; }
.path { font: 500 14px var(--mono); color: var(--text); }
.card p { margin: 0 0 10px; }
.card label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.card input { width: 100%; max-width: 420px; display: block; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; outline: none; }
.card input:focus { border-color: var(--accent); }
.card input.code { font: 600 24px var(--mono); letter-spacing: 6px; max-width: 220px; }
.card button.btn { font: inherit; font-weight: 600; border: 0; cursor: pointer; padding: 12px 20px; }
.card button.btn:disabled { opacity: .6; cursor: progress; }
.card .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.small { color: var(--muted); font-size: 14px; }
.card .big { font: 800 40px var(--display); font-stretch: 112%; margin: 4px 0 8px; }
.card .big small { font: 400 16px var(--body); color: var(--muted); margin-left: 8px; }
.meter { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 12px 0 8px; max-width: 420px; }
.meter i { display: block; height: 100%; background: var(--arrange); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.offer { background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.offer.picked { border-color: var(--accent); }
.offer .price { font: 800 28px var(--display); font-stretch: 112%; }
.offer .price small { font: 400 14px var(--body); color: var(--muted); }
.offer p { font-size: 15px; margin: 0; }
.offer .btn { margin-top: auto; }
.acct .list { list-style: none; padding: 0; margin: 0 0 10px; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.list li:last-child { border-bottom: 0; }
.list li div { min-width: 0; } .list li b { display: block; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.list li .btn { flex: none; padding: 8px 14px; }
.out { text-align: right; }
button.link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
button.link:hover { color: var(--text); }

/* the top corner, every page (site.js): Sign in for a visitor, the person's picture and a menu once signed in */
.top nav a.signin { color: var(--text); font-weight: 600; }
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; color: var(--accent-ink); font: 700 14px var(--body); }
.me { position: relative; }
.me > button { display: flex; align-items: center; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.me > button:hover, .me > button[aria-expanded="true"] { border-color: var(--line); }
.me .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 10; min-width: 240px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.me .who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.me .who > div { min-width: 0; } .me .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who > div span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .me .menu a, .me .menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font: inherit; font-size: 15px; background: none; border: 0; cursor: pointer; }
.top .me .menu a:hover, .me .menu button:hover { background: var(--chip); color: var(--text); }
.profile { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.profile .pic { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile .fields { flex: 1 1 260px; min-width: 0; }
.card .inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.card .inline input { margin: 0; flex: 1 1 200px; }
#emailShown { overflow-wrap: anywhere; }
.card h3 { font-size: 18px; margin: 26px 0 8px; }
.btn.danger { background: #3a2023; color: #f3a99c; }
.btn.danger:hover:not(:disabled) { background: #4a2629; color: #ffc0b4; }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; }
#delLoses { padding-left: 20px; margin: 0 0 14px; }
.release { padding: 4px 0 8px; }
.release + .release { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.release .head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.release .head b { font-size: 19px; }
.release .head .btn { margin-left: auto; padding: 11px 20px; }
.release details { margin: 10px 0 4px; } .release summary { cursor: pointer; color: var(--soft); }
.release ul { padding-left: 20px; margin: 8px 0; } .release li { color: var(--soft); margin: 4px 0; }
.release .sha { font: 12px var(--mono); overflow-wrap: anywhere; margin: 6px 0 0; }
.acct ol { padding-left: 22px; } .acct ol li { margin: 8px 0; color: var(--soft); }
.acct code { font: 14px var(--mono); background: var(--tile); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }