/* Motion Audio website: light paper, graphite stage, brass. One family (Archivo): wide for headings, normal for text,
   narrow for small labels. Shared by the store (index.html) and the policy pages. */
@import url("fonts/fonts.css");
:root{
  --paper:#F4F5F6; --surface:#FFFFFF; --ink:#12161C; --ink-2:#434C59; --ink-3:#69717D; --line:#E1E4E8; --line-2:#CBD1D8;
  --brass:#A8823A; --brass-ink:#7E6026; --brass-hi:#E2C27E; --brass-wash:#F6F0E3;
  --stage:#15181D; --stage-2:#1D2128; --stage-3:#262B33; --stage-line:#343A44; --on-stage:#ECE7DD; --on-stage-2:#A2A9B3;
  --ok:#1E7A4C; --ok-wash:#E7F3EC; --bad:#B42318; --bad-wash:#FBECEA;
  --font:Archivo,"Helvetica Neue",Arial,system-ui,sans-serif;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --mono:var(--font); --accent:var(--brass-ink); /* (names the account screens use) */
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font);font-feature-settings:"tnum" 0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-weight:600;text-wrap:balance;margin:0;color:inherit}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.03;font-stretch:116%;letter-spacing:-.022em}
h2{font-size:clamp(1.65rem,3.2vw,2.45rem);line-height:1.1;font-stretch:113%;letter-spacing:-.016em}
h3{font-size:1.15rem;line-height:1.3;font-stretch:106%;letter-spacing:-.005em}
h4{font-size:1rem;font-stretch:104%}
p{margin:0}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
.muted{color:var(--ink-3)}
.label{font-size:.84rem;font-weight:500;font-stretch:90%;color:var(--ink-3);letter-spacing:.005em}
.num,.price,.big,.kcount b{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::selection{background:var(--brass-hi);color:var(--ink)}

/* buttons: ink is the primary action; ghost is secondary; brass only on the dark stage */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.62rem 1.15rem;border-radius:var(--r-sm);border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;font-stretch:104%;letter-spacing:.005em;text-decoration:none;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{background:#272D36;border-color:#272D36}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn.small{min-height:34px;padding:.35rem .8rem;font-size:.86rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.brass{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--stage)}
.btn.brass:hover{background:#EED39A;border-color:#EED39A}
.on-stage .btn.ghost{color:var(--on-stage);border-color:var(--stage-line)}
.on-stage .btn.ghost:hover{border-color:var(--on-stage);background:transparent}
.danger-btn{background:var(--bad)!important;border-color:var(--bad)!important;color:#fff!important}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:1.25rem;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:650;font-size:1.08rem;font-stretch:122%;letter-spacing:-.01em;white-space:nowrap}
.logo svg{width:30px;height:30px;flex:none}
nav{display:flex;align-items:center;gap:.25rem 1.3rem;margin-left:auto;flex-wrap:wrap;font-size:.95rem}
nav a{text-decoration:none;color:var(--ink-2);padding:.3rem 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cartbtn .count{display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:99px;background:var(--ink);color:#fff;font-size:.78rem;font-variant-numeric:tabular-nums}
.cartbtn.has .count{background:var(--brass);}
@media (max-width:760px){html{scroll-padding-top:150px}header.top .wrap{position:relative;padding-block:.55rem 0;gap:.2rem;min-height:0}.logo{min-height:44px}nav{margin:0;padding:0 0 .45rem;width:100%;flex-wrap:wrap;gap:0 1.1rem;font-size:.92rem}nav a{white-space:nowrap;padding:.45rem 0}nav .cartbtn{position:absolute;top:.55rem;right:max(20px,env(safe-area-inset-right,0px))}}

/* the stage: the hero, in the apps' own graphite */
.on-stage{background:var(--stage);color:var(--on-stage)}
.on-stage .muted{color:var(--on-stage-2)}
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 78% 0%,#232933 0%,var(--stage) 62%)}
.hero .wrap{padding-block:clamp(3rem,7vw,5.5rem) 0}
.hero h1{max-width:15ch}
.hero .lede{max-width:50ch;font-size:1.14rem;color:var(--on-stage-2);margin-top:1.3rem}
.hero .ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
canvas#wave{display:block;width:100%;height:clamp(150px,22vw,240px);margin-top:clamp(1.5rem,4vw,3rem)}
.system{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--stage-line);margin-top:-1px}
.system a{display:grid;grid-template-columns:44px 1fr;gap:.2rem .8rem;align-items:center;padding:1.25rem 1rem 1.6rem 0;text-decoration:none;border-right:1px solid var(--stage-line);padding-left:1rem}
.system a:first-child{padding-left:0}
.system a:last-child{border-right:0}
.system img{width:44px;height:44px;grid-row:span 2}
.system b{font-weight:600;font-size:.95rem;font-stretch:104%;line-height:1.2}
.system span{font-size:.85rem;color:var(--on-stage-2);line-height:1.3}
.system a:hover b{color:var(--brass-hi)}
@media (max-width:980px){.system{grid-template-columns:repeat(2,1fr)}.system a{border-right:0;border-bottom:1px solid var(--stage-line);padding-left:0}.system a:last-child{border-bottom:0}}
@media (max-width:520px){.system{grid-template-columns:1fr}}

/* sections */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1rem 3rem;align-items:end;margin-bottom:2.4rem}
.sec-head p{color:var(--ink-2);max-width:60ch}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.band{background:var(--surface);border-block:1px solid var(--line)}

/* store: the pedal */
.pedal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.pedal-row .art{background:radial-gradient(80% 90% at 50% 30%,#2A3039 0%,var(--stage) 75%);display:grid;place-items:center;min-height:300px;padding:2rem}
.pedal-row .art img{width:min(200px,55%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.pedal-row .body{padding:clamp(1.5rem,3.5vw,2.6rem);display:flex;flex-direction:column;gap:1rem}
.pedal-row ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;color:var(--ink-2)}
.pedal-row li,.tier li,.plan li{padding-left:1.25rem;position:relative}
.pedal-row li::before,.tier li::before,.plan li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--brass)}
.buyline{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:auto;padding-top:.6rem}
.price{font-weight:600;font-size:2.1rem;line-height:1;font-stretch:108%;letter-spacing:-.02em}
.price small{font-weight:400;font-size:.88rem;color:var(--ink-3);letter-spacing:0;font-stretch:100%;margin-left:.4rem}
@media (max-width:760px){.pedal-row{grid-template-columns:1fr}.pedal-row .art{min-height:200px}}

/* store: packs - one panel, a column each; inside, a spec sheet (the counts down the left) */
.packs-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin:3.5rem 0 1.1rem}
.packs-head p{color:var(--ink-2);max-width:56ch}
.packs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.tier{padding:clamp(1.3rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.9rem;border-right:1px solid var(--line);position:relative;min-width:0}
.tier:last-child{border-right:0}
.tier.feature{background:linear-gradient(var(--brass-wash),var(--surface) 70%)}
.tier.feature::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--brass)}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tier h3{font-size:1.45rem;font-stretch:114%;letter-spacing:-.015em}
.tier .pick{font-size:.78rem;font-weight:600;font-stretch:92%;color:var(--brass-ink);background:var(--surface);border:1px solid #E3CFA4;border-radius:99px;padding:.1rem .6rem;white-space:nowrap}
.tier .who{color:var(--ink-3);font-size:.9rem;margin-top:-.5rem;min-height:2.6em}
.tier .price{font-size:2.3rem}
.tier>.btn{align-self:stretch;margin-top:auto}
.spec{margin:0;display:grid;border-top:1px solid var(--line);flex:1;align-content:start}
.spec div{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.7rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:650;font-size:1.45rem;font-stretch:110%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;line-height:1}
.spec dd{margin:0;display:grid;line-height:1.3}
.spec dd b{font-weight:600;font-size:.93rem}
.spec dd span{font-size:.84rem;color:var(--ink-3)}
.tier.feature .spec dt{color:var(--brass-ink)}
.addon{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem .75rem;border:1px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper)}
.addon div{display:grid;line-height:1.3}.addon b{font-size:.9rem;font-weight:600}.addon span{font-size:.82rem;color:var(--ink-3)}
.addon s{color:var(--ink-3)}
@media (max-width:1100px){.packs{grid-template-columns:repeat(2,minmax(0,1fr))}.tier:nth-child(2n){border-right:0}.tier:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:620px){.packs{grid-template-columns:1fr}.tier{border-right:0;border-bottom:1px solid var(--line)}.tier:last-child{border-bottom:0}.tier .who{min-height:0}}
/* a sale: the old price struck through, the new one in brass */
.price s{font-size:.55em;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-right:.15rem;text-decoration-thickness:1.5px}
.price .now{color:var(--brass-ink)}
.salebar{background:var(--brass-hi);color:var(--stage);font-size:.93rem}
.salebar .wrap{display:flex;align-items:center;gap:.3rem 1rem;flex-wrap:wrap;min-height:46px;padding-block:.5rem}
.salebar b{font-weight:650;font-stretch:108%}
.salebar span{color:#4A3B1C}
.salebar .pv{border:1px solid var(--stage);color:var(--stage);border-radius:99px;padding:.05rem .55rem;font-size:.8rem}
.salebar a{margin-left:auto;color:var(--stage);font-weight:600;text-underline-offset:.2em}

/* store: how keys work */
.keydefs{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem 2rem;margin:1.6rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line)}
.keydefs div{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;align-content:start}
.keydefs dt{grid-row:span 2;font-weight:650;font-stretch:110%;font-size:1.05rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.keydefs dd{margin:0;font-size:.92rem;color:var(--ink-2)}
.keydefs dt{min-width:2.1rem;width:auto;padding:0 .45rem;justify-self:start}
.keydefs dd b{color:var(--ink);font-weight:600}
@media (max-width:1100px){.keydefs{grid-template-columns:repeat(2,1fr);gap:1.2rem 2.5rem}}
@media (max-width:620px){.keydefs{grid-template-columns:1fr;gap:1rem}}

/* store: price list - the apps one by one, and Central Services */
.pricelist{margin-top:3.5rem;border-top:1px solid var(--ink)}
.pl-row{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.5fr) 8.5rem 11.5rem;gap:1.2rem;align-items:center;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.pl-row img{width:52px;height:52px}
.pl-row .what{display:grid;gap:.1rem}
.pl-row .what .label{font-size:.8rem}
.pl-row .desc{font-size:.93rem;color:var(--ink-2)}
.pl-row .price{font-size:1.45rem;text-align:right;white-space:nowrap}
.pl-row .price small{display:block;margin:.3rem 0 0;font-size:.78rem}
.pl-row .btn{justify-self:end}
@media (max-width:860px){.pl-row{grid-template-columns:44px 1fr auto;gap:.5rem 1rem}.pl-row img{width:44px;height:44px}.pl-row .desc{grid-column:2/-1}.pl-row .btn{grid-column:2/-1;justify-self:start}.pl-row .price{grid-row:1;grid-column:3}}

/* store: sound plans (yearly, package keys) */
.plan-all{display:grid;grid-template-columns:minmax(0,1fr) auto 11.5rem;gap:1.2rem;align-items:center;margin-top:1rem;padding:1.1rem clamp(1.1rem,2.4vw,1.6rem);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--brass-wash),var(--surface) 70%);position:relative;overflow:hidden}
.plan-all::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brass)}
.plan-all>div:first-child{display:grid;gap:.15rem}.plan-all>div:first-child b{font-size:1.25rem;font-stretch:110%}.plan-all>div:first-child span{color:var(--ink-2);font-size:.92rem}
.plan-all .price{font-size:1.9rem;white-space:nowrap}.plan-all .price small{margin-left:.3rem;font-size:.78rem}
#planCards .who{flex:1;min-height:0}
.plan-all .btn{justify-self:end}
.bundles-head{margin:2.2rem 0 .4rem}.bundles-head h4{font-size:1.1rem}.bundles-head p{color:var(--ink-2);margin:.2rem 0 0;max-width:62ch}
.bundles{border-top:1px solid var(--ink)}
.bundle-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 13rem 11.5rem;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.bundle-row .price{font-size:1.25rem;white-space:nowrap;text-align:right}.bundle-row .price small{margin-left:.3rem;font-size:.75rem}.bundle-row .btn{justify-self:end}
@media (max-width:760px){.plan-all{grid-template-columns:1fr;gap:.7rem}.plan-all .btn{justify-self:start}.bundle-row{grid-template-columns:1fr auto;gap:.3rem 1rem}.bundle-row .muted{grid-row:2}.bundle-row .btn{grid-row:2;grid-column:2}}
.cart-plans{display:grid;gap:.6rem;padding-top:.6rem;border-top:1px solid var(--line)}
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.8rem}
.pkg{display:grid;gap:.35rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.pkg.ended{opacity:.75}
.pkg-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.pkg-top code{font-weight:600;letter-spacing:.02em;white-space:nowrap}
.demo-btn{margin-left:.4rem;padding:.1rem .5rem;font-size:.78rem;vertical-align:middle}

/* Your downloads (#downloads): a card per app, the pedal, the sound plans */
#downloads{padding-block:clamp(2rem,5vw,3.5rem)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;align-items:start;margin-bottom:1.2rem}
.dl-card{display:grid;gap:.8rem;padding:clamp(1rem,2.4vw,1.4rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);min-width:0}
.dl-head{display:flex;gap:.8rem;align-items:center}.dl-head img{width:48px;height:48px}.dl-head h3{font-size:1.25rem}.dl-head span{font-size:.88rem}
.dl-keys{display:grid;gap:.35rem}.dl-key{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.dl-key code{font-weight:600;font-size:1.02rem;letter-spacing:.04em;user-select:all}
.dl-card>.btn{justify-self:start}
.dl-card .steps{list-style:none;margin:.3rem 0 0;padding:0;counter-reset:s;display:grid;gap:.1rem}
.dl-card .steps>li{counter-increment:s;position:relative;padding:.4rem 0 .45rem 2.2rem;font-size:.93rem}
.dl-card .steps>li::before{content:counter(s);position:absolute;left:0;top:.35rem;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:600;font-size:.8rem}
.dl-card .cmd{display:flex;align-items:center;gap:.5rem;background:var(--stage);color:var(--on-stage);border-radius:var(--r-sm);padding:.5rem .55rem .5rem .8rem;margin-top:.3rem}
.dl-card .cmd code{flex:1;min-width:0;color:inherit;font-size:.82rem;word-break:break-all}
.dl-card .cmd .btn{background:var(--stage-3);color:var(--on-stage);border-color:var(--stage-line)}
.dl-card details summary{cursor:pointer;font-size:.92rem;color:var(--ink-2)}

/* Central Tracks */
.sub{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:2rem;align-items:start}
@media (max-width:900px){.sub{grid-template-columns:1fr}}
.plan{border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:1rem;position:sticky;top:88px}
@media (max-width:900px),(max-height:760px){.plan{position:static}}   /* (a card taller than the screen must scroll away, not stick) */
.plan .price{color:var(--on-stage)}
.plan .price small{color:var(--on-stage-2)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;color:var(--on-stage-2)}
.plan li::before{background:var(--brass-hi)}
.plan .status{font-size:.88rem;font-weight:500;color:var(--on-stage-2)}
.plan .status.on{color:#7FD3A6}
.flow{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.84rem;color:var(--on-stage-2);border-top:1px solid var(--stage-line);padding-top:1rem}
.flow span{border:1px solid var(--stage-line);border-radius:99px;padding:.15rem .6rem;color:var(--on-stage)}
.lib{min-width:0}
.lib .bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.lib .bar input{flex:1 1 220px}
input,select,textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.62rem .8rem;min-width:0;min-height:44px;font-size:.97rem;transition:border-color .15s,box-shadow .15s}
textarea{min-height:auto;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:#A9B1BB}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(18,22,28,.08)}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--ink);width:1.05rem;height:1.05rem;padding:0}
input[type=file]{padding:.5rem;background:var(--paper)}
input[disabled]{background:var(--paper);color:var(--ink-3)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th{text-align:left;font-weight:500;font-size:.8rem;font-stretch:90%;color:var(--ink-3);padding:.75rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper)}
td{padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFAFB}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.kind{font-size:.78rem;font-weight:500;padding:.12rem .5rem;border-radius:99px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.added{color:var(--ok);font-weight:500;font-size:.88rem;white-space:nowrap}
.stars{color:var(--brass);letter-spacing:1px;white-space:nowrap}
.stars .off{color:var(--line-2)}

/* publish */
.note{border-left:2px solid var(--brass);padding:.2rem 0 .2rem 1rem;color:var(--ink-2);max-width:70ch}
.desk{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem;margin-top:2rem}
@media (max-width:900px){.desk{grid-template-columns:1fr}}
form{display:grid;gap:1.05rem;min-width:0}
.desk form,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,2rem)}
form label{display:grid;gap:.35rem;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.grade{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:grid;gap:.6rem;background:var(--paper)}
.grade .stars{font-size:1.45rem}
.checks{display:grid;gap:.3rem;font-size:.88rem;color:var(--ink-2)}
.checks .bad{color:var(--bad)}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;text-align:center;font-size:.84rem;font-variant-numeric:tabular-nums}
.tiers div{border:1px solid var(--line);border-radius:var(--r-sm);padding:.45rem .2rem;background:var(--surface);color:var(--ink-3)}
.tiers div.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.chk{display:flex!important;gap:.6rem;align-items:flex-start;color:var(--ink-2)!important;font-weight:400!important}
.chk input{margin-top:.3rem;flex:none}
.payout{display:grid;gap:1px;align-content:start;align-self:start;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.meter{padding:1.25rem 1.4rem;background:var(--surface)}
.meter .big{font-weight:600;font-size:2rem;font-stretch:108%;letter-spacing:-.02em;line-height:1.15;margin-top:.15rem}
.meter input{min-height:40px;padding:.45rem .6rem}
.split{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:.8rem}
.split b{display:block;height:100%;width:75%;background:var(--brass)}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}

/* account */
.acct{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2.6vw,1.7rem);display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;align-content:start;min-width:0}
.card h3{font-size:1.12rem}
.card h3 .muted{font-weight:400}
.card form{gap:.85rem}
.card.confirm-card{border-color:var(--brass);background:linear-gradient(var(--brass-wash),var(--surface))}
.wide{grid-column:1/-1}
.keys{font-size:.9rem;display:grid;gap:.3rem;user-select:all;font-variant-numeric:tabular-nums}
.ktable{width:100%;border-collapse:collapse;font-size:.92rem}
.ktable td,.ktable th{padding:.55rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ktable th{background:none;padding-top:.2rem}
.ktable code{font:500 .9rem var(--font);font-variant-numeric:tabular-nums;letter-spacing:.03em;user-select:all}
.kcount{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kcount div{background:var(--surface);padding:.75rem .9rem;font-size:.88rem;color:var(--ink-3)}
.kcount b{font-weight:600;font-size:1.6rem;font-stretch:108%;display:block;color:var(--ink);line-height:1.2}
.choice{display:grid;gap:.45rem;margin:.2rem 0}.choice label{display:flex;gap:.55rem;align-items:center;font-size:.95rem;font-weight:400;color:var(--ink)}
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem}
.team{border:1px solid var(--line);border-radius:var(--r);padding:1rem;display:grid;gap:.55rem;align-content:start;background:var(--paper)}
.team h4 .muted{font-weight:400;font-size:.85rem}
.tm{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:.5rem 0}
.tacts{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.tacts select.tmove{width:auto;max-width:100%;font-size:.82rem;padding:.2rem .4rem;min-height:32px}
.tstat{font-size:.78rem;font-weight:500;padding:.1rem .55rem;border-radius:99px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.tstat.setup{color:var(--ok);border-color:#A9D8BF;background:var(--ok-wash)}
.tstat.joined{color:var(--brass-ink);border-color:#E3CFA4;background:var(--brass-wash)}
.trow{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:.45rem}@media (max-width:640px){.trow{grid-template-columns:1fr}}
.slots-big{display:grid;gap:.1rem}
.slots-big b{font-weight:650;font-size:2.2rem;font-stretch:110%;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.slots-big b small{font-size:.5em;font-weight:500;color:var(--ink-3);letter-spacing:0}
.slots-big span{font-size:.88rem;color:var(--ink-3)}
.meterbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.meterbar i{display:block;height:100%;background:var(--brass);border-radius:4px}
.meterbar.full i{background:var(--bad)}
.role-main{color:var(--brass-ink);font-weight:600;font-size:.92rem}
.sale-state{padding:.6rem .8rem;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);font-size:.92rem}
.sale-state.on{background:var(--brass-wash);border-color:#E3CFA4}
.sale-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;align-items:end}
.sale-form .wide2{grid-column:span 2}
.sale-btns{grid-column:1/-1;display:flex;gap:.45rem;flex-wrap:wrap}
@media (max-width:700px){.sale-form{grid-template-columns:1fr 1fr}.sale-form .wide2{grid-column:1/-1}}
.codeline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}
.codeline label{flex:1 1 150px;min-width:0;display:grid;gap:.3rem;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.codeline input{text-transform:uppercase}
.codeline input[type=number]{text-transform:none}
.ok-note{color:var(--ok);font-size:.9rem;min-height:1.2em}
details summary{cursor:pointer;font-weight:500}
details.danger summary{color:var(--bad)}
.signin{max-width:440px}

/* footer */
footer{background:var(--stage);color:var(--on-stage-2);padding-block:3rem calc(3rem + env(safe-area-inset-bottom,0px));font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:start}
footer .logo{color:var(--on-stage)}
footer .apps{margin-top:.8rem;max-width:44ch;line-height:1.5}
footer .links{display:flex;gap:.4rem 1.5rem;flex-wrap:wrap}
footer a{color:var(--on-stage);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fine{grid-column:1/-1;border-top:1px solid var(--stage-line);padding-top:1.2rem;font-size:.84rem}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}

/* dialogs and notes */
.modal-bg{position:fixed;inset:0;background:rgba(14,17,22,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;z-index:20;padding:16px;animation:fade .16s ease-out}
.modal{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.3rem,4vw,1.9rem);max-width:460px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:1rem;box-shadow:0 30px 80px -20px rgba(10,12,16,.45),0 0 0 1px rgba(10,12,16,.06);animation:rise .2s cubic-bezier(.2,.8,.2,1)}
.modal h3{font-size:1.3rem}
.modal .lines{display:grid;gap:.45rem;font-size:.96rem}
.modal .lines div{display:flex;justify-content:space-between;gap:1rem;font-variant-numeric:tabular-nums}
.modal .total{border-top:1px solid var(--ink);padding-top:.6rem;font-weight:600}
.modal .lines .saved{color:var(--brass-ink)}
.qty{display:inline-flex;align-items:center;gap:.35rem;margin-left:.4rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.qbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:inline-grid;place-items:center;line-height:1;font-size:.95rem;padding:0;color:var(--ink-2)}
.qbtn:hover{border-color:var(--ink);color:var(--ink)}
.modal.pay{max-width:560px}
.pay-head{display:grid;gap:.3rem}
#checkout-form{min-height:180px}
.pay-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.84rem;border-top:1px solid var(--line);padding-top:.8rem}
.modal form{background:none;border:0;padding:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:.7rem 1.15rem;border-radius:var(--r-sm);z-index:30;font-size:.93rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);animation:rise .2s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translate(var(--tx,0),8px)}}
.toast{--tx:-50%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* policy pages */
.doc{max-width:760px;padding-block:clamp(2.5rem,6vw,4.5rem)}
.doc h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6rem}
.doc h2{font-size:1.35rem;margin:2.4rem 0 .6rem;font-stretch:108%}
.doc p,.doc li{color:var(--ink-2)}
.doc p+p{margin-top:.9rem}
.doc ul{padding-left:1.2rem}
.doc li+li{margin-top:.35rem}
@media (max-width:700px){.card .ktable:not(.keytable){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.card table:not(.ktable){display:block;max-width:100%;overflow-x:auto}}

/* ---------------- added sections (edit mode adds them) ---------------- */
.xblock { padding-block: clamp(3rem, 7vw, 5rem); }
.xb-wrap { max-width: 900px; }
.xblock h2 { margin-bottom: 1rem; }
.xb-body { color: var(--ink-2); font-size: 1.05rem; max-width: 68ch; }
.xb-body p + p { margin-top: .8rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-stretch: 104%; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; color: var(--brass-ink); font-weight: 500; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .a { color: var(--ink-2); margin-top: .6rem; max-width: 68ch; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1rem 0; display: grid; gap: .4rem; }
.faq-item .q { font-weight: 600; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; }
.quote { margin: 0; padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: .8rem; align-content: start; }
.quote blockquote { margin: 0; font-size: 1.12rem; line-height: 1.5; font-stretch: 102%; }
.quote blockquote::before { content: "\201C"; display: block; font-size: 2.6rem; line-height: .6; color: var(--brass); margin-bottom: .2rem; }
.quote figcaption { color: var(--ink-3); font-size: .9rem; }
.xb-pic img { width: 100%; border-radius: var(--r-lg); display: block; margin-bottom: 1rem; }
.xb-empty { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 3rem; text-align: center; color: var(--ink-3); margin-bottom: 1rem; }

/* ---------------- edit mode ---------------- */
#editBtn { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); }
#editBar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem max(20px, env(safe-area-inset-left, 0px)); background: var(--stage); color: var(--on-stage); box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); font-size: .92rem; }
#editBar .muted { color: var(--on-stage-2); }
#editBar .eb-sp { flex: 1; }
#editBar .btn.ghost { color: var(--on-stage); border-color: var(--stage-line); }
#editBar .btn:not(.ghost) { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--stage); }
body.editing { padding-top: 56px; }
body.editing header.top { top: 56px; }
body.editing [contenteditable="true"] { outline: 1px dashed transparent; outline-offset: 3px; border-radius: 3px; cursor: text; transition: outline-color .12s; }
body.editing [contenteditable="true"]:hover { outline-color: var(--brass); }
body.editing [contenteditable="true"]:focus { outline: 2px solid var(--brass); background: color-mix(in srgb, var(--brass-wash), transparent 30%); }
body.editing .on-stage [contenteditable="true"]:focus { background: rgba(226,194,126,.12); }
body.editing [data-price][contenteditable="true"] { outline: 1px dashed var(--brass); }
body.editing .bad-price { outline-color: var(--bad) !important; }
.sec-tools { position: absolute; top: 12px; right: 16px; z-index: 6; display: none; gap: .4rem; }
body.editing .sec-tools { display: flex; opacity: .6; transition: opacity .12s; } body.editing [data-section]:hover > .sec-tools { opacity: 1; }
.sec-tools .btn { background: var(--surface); }
.on-stage .sec-tools .btn { background: var(--stage-2); color: var(--on-stage); border-color: var(--stage-line); }
[data-section].is-hidden { opacity: .38; }
.img-tools { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
body.editing .art:hover .img-tools, body.editing *:hover > .img-tools { display: inline-flex; }
.xb-tools { display: flex; gap: .4rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.danger-text { color: var(--bad) !important; }
.add-kinds { display: grid; gap: .5rem; }
.add-kinds .btn { display: grid; justify-items: start; text-align: left; white-space: normal; padding: .8rem 1rem; gap: .1rem; min-height: 0; }
.add-kinds small { font-weight: 400; color: var(--ink-3); }
.toast.bad { background: var(--bad); }
.codeline label:has(input[type=number]){flex:0 0 auto}
.modal .err:empty,.modal .ok-note:empty{display:none}

/* ---------------- layout clean-up (9.3.3) ---------------- */
/* the church's keys: the kind, the key, where it's used, its updates and Release line up row by row */
.keytable td{vertical-align:middle}
.keytable td.kk{white-space:nowrap;width:3.6rem}
.keytable td.kk b{font-weight:600}
.keytable td.kk input,.keytable .kcb{display:inline-block;width:1.05rem;height:1.05rem;margin:0 .55rem 0 0;vertical-align:-.15em}
.keytable td:last-child{text-align:right;white-space:nowrap;width:1%}
.keytable td:nth-child(4){white-space:nowrap}
.keytable .btn.small{min-height:32px}
@media (min-width:641px){.keytable tr:has(td){height:3.1rem}}
@media (max-width:640px){
  .keytable,.keytable tbody{display:block}
  .keytable tr:first-child:not(:has(td)){display:none}
  .keytable tr{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;column-gap:.6rem;row-gap:.1rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--line);height:auto}
  .keytable td{border:0;padding:0;height:auto}
  .keytable td.kk{grid-row:1/span 3;align-self:start;padding-top:.1rem;width:auto}
  .keytable td:nth-child(2){grid-column:2;font-size:.95rem}
  .keytable td:nth-child(3){grid-column:2;font-size:.88rem}
  .keytable td:nth-child(4){grid-column:2;font-size:.82rem}
  .keytable td:last-child{grid-column:3;grid-row:1/span 3;width:auto}
  .keytable td:last-child:empty{display:none}
  .kcount{grid-template-columns:1fr}
  .kcount div{display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:.6rem;align-items:center;padding:.6rem .9rem}
  .kcount div b{grid-column:1;grid-row:1/span 2;font-size:1.7rem;text-align:center}
  .kcount div span{grid-column:2}
}
/* People and Teams: who's on top, what you can do underneath */
.card .tm{align-items:center}
.card .tm>div:first-child{min-width:0;overflow-wrap:anywhere}
.team .tmem{display:grid;gap:.45rem;padding:.7rem 0}
.team .tmem:last-of-type{border-bottom:0}
.tmwho{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .6rem;align-items:start}
.tmwho .tstat{grid-column:2;grid-row:1;align-self:center}
.tmsub{grid-column:1/-1;font-size:.84rem;overflow-wrap:anywhere}
.tmsub code{font:500 .82rem var(--font);letter-spacing:.03em}
.team .tacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.4rem,1fr));gap:.4rem}
.team .tacts select.tmove{width:100%;max-width:none}
.team .tacts .btn{width:100%}
#ownForm label{flex:1 1 12rem}#ownForm input{width:100%}
.team h4{display:grid;gap:.1rem;font-size:1.02rem}
.team h4 .muted{font-size:.84rem}
@media (max-width:640px){.card .tm:not(.tmem){display:grid;gap:.5rem}.card .tm .tacts .btn,.card .tm .tacts select{min-height:40px}}
/* Central Tracks: the song gets the room; the price is on the Buy button */
table.tracks td:first-child{min-width:12rem}
table.tracks td.act{text-align:right;white-space:nowrap}
table.tracks .stars{font-size:.92rem;letter-spacing:0}
@media (max-width:640px){table.tracks td:first-child{min-width:10rem}}
/* the account's forms: labels and fields the same width, buttons on their own line on phones */
.card form>label>input:not([type=checkbox]):not([type=radio]),.card form>label>select{width:100%}
.codeline .btn{flex:none}
@media (max-width:480px){.codeline .btn{flex:1 1 100%}}
.modal .lines div>span:first-child{min-width:0}
@media (max-width:480px){.modal{padding:1.15rem}.modal .btn{flex:1 1 auto}}

.dl-h{margin:1.4rem 0 .6rem;font-size:1.05rem}

/* (10.0) the account icon and its menu; Purchases */
.acct-menu { position: relative; display: inline-flex; }
.acct-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #d6d9de); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.acct-icon svg { width: 20px; height: 20px; }
.acct-icon:hover, .acct-icon[aria-expanded="true"] { background: rgba(18,22,28,.06); }
.acct-icon:focus-visible { outline: 2px solid var(--brass, #b08d57); outline-offset: 2px; }
.acct-drop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: #fff; color: #12161C; border-radius: 8px; box-shadow: 0 8px 28px rgba(18,22,28,.18); padding: .35rem; display: grid; z-index: 50; }
.acct-drop[hidden] { display: none; }
.acct-drop a, .acct-drop button { display: block; text-align: left; padding: .55rem .75rem; border-radius: 6px; color: inherit; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.acct-drop a:hover, .acct-drop button:hover, .acct-drop a:focus-visible, .acct-drop button:focus-visible { background: rgba(18,22,28,.07); outline: none; }
.acct-who { padding: .45rem .75rem .5rem; font-size: .85rem; color: #5b6470; border-bottom: 1px solid rgba(18,22,28,.08); margin-bottom: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-list { display: grid; gap: 1rem; }
.pu-card { background: #fff; color: #12161C; border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 3px rgba(18,22,28,.1); display: grid; gap: .8rem; }
.pu-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.pu-head h3 { margin: 0; font-size: 1.1rem; }
.pu-meta { font-size: .9rem; color: #5b6470; }
.pu-part { border-top: 1px solid rgba(18,22,28,.08); padding-top: .8rem; display: grid; gap: .5rem; }
.pu-part h4 { margin: 0; font-size: .98rem; display: flex; align-items: center; gap: .1rem .5rem; flex-wrap: wrap; }
.pu-part h4 > span { flex-basis: 100%; padding-left: calc(26px + .5rem); }
.pu-part h4 img { width: 26px; height: 26px; }
.pu-key { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pu-key code { font: 600 1rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.pu-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.pu-status { font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: rgba(30,140,90,.12); color: #17633f; }
.pu-status.off { background: rgba(18,22,28,.08); color: #5b6470; }
/* setlists (10.0): the songs already in the setlist on "Add songs" */
.sl-songs{margin:0 0 1rem;padding-left:1.4rem;display:grid;gap:.35rem}
.sl-songs li{line-height:1.5}
.sl-songs .btn{margin-left:.5rem}

/* (10.2) Listen before you buy: the plan cards' previews */
.plan-listen{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.85rem}.plan-listen .pv-btn{min-width:0}.plan-listen a{font-size:.85rem}
.lib-card .pv-list{margin:.2rem 0}

/* ===================================================================================================================
   10.2: the redesign (docs/DESIGN-SYSTEM.md). Shared tokens come from central-tokens.css; this page keeps its light
   paper-and-ink palette for the public pages and uses the apps' graphite stage for the hero, footer and account.
   =================================================================================================================== */
/* header: six links, then sign in and the cart */
.nav-main{display:flex;align-items:center;gap:.25rem 1.3rem;flex-wrap:wrap}
@media (max-width:760px){.nav-main{gap:0 1.1rem;width:100%}}

/* the first screen: words on the left, the apps on the right */
.hero .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s6);align-items:center;padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem)}
.hero h1{max-width:14ch;font-size:clamp(2.3rem,4.6vw,3.7rem)}
.hero-note{margin-top:1.4rem;font-size:.92rem;color:var(--on-stage-2)}
.hero-shot{position:relative;margin:0;aspect-ratio:16/11;min-width:0}
.hero-shot img{position:absolute;display:block;border-radius:var(--r);border:1px solid var(--stage-line);box-shadow:0 30px 60px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03);background:var(--stage-2);object-fit:cover}
.hero-shot .shot-back{top:0;right:0;width:84%;height:auto;opacity:.92}
.hero-shot .shot-front{left:0;bottom:0;width:74%;height:auto}
.hero-shot .shot-side{right:2%;bottom:-4%;width:26%;aspect-ratio:9/16;height:auto;object-position:top left}
@media (max-width:900px){.hero .wrap.hero-grid{grid-template-columns:1fr}.hero-shot{max-width:640px;width:100%}}
@media (max-width:520px){.hero-shot .shot-side{display:none}.hero-shot{aspect-ratio:16/12}}
canvas#wave{display:none}
.system{grid-template-columns:repeat(6,1fr)}
@media (max-width:1180px){.system{grid-template-columns:repeat(3,1fr)}.system a:nth-child(3n){border-right:0}.system a{border-bottom:1px solid var(--stage-line);padding-left:1rem}.system a:nth-child(3n+1){padding-left:0}}
@media (max-width:640px){.system{grid-template-columns:1fr}.system a{border-right:0;padding-left:0}}

/* pricing: a short menu, church packs first, how keys work folded away */
.store-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin:-.6rem 0 1.6rem;position:sticky;top:72px;z-index:3;padding:.5rem 0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.store-nav a{text-decoration:none;font-size:.9rem;font-weight:500;padding:.4rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--ink-2);background:var(--surface)}
.store-nav a:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:760px){.store-nav{position:static;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}.store-nav::-webkit-scrollbar{display:none}.store-nav a{white-space:nowrap}}
#packsTop{margin-top:.5rem}
.keyhelp{margin:1.4rem 0 0;border-top:1px solid var(--line);padding-top:1rem}
.keyhelp summary{cursor:pointer;font-weight:600;color:var(--ink-2);list-style-position:outside}
.keyhelp[open] summary{margin-bottom:.4rem}
.keyhelp .keydefs{border-top:0;padding-top:.6rem;margin-top:0}
.store-sub{margin:3.5rem 0 1.1rem;display:grid;gap:.3rem}
.store-sub h3{font-size:1.5rem}
.store-sub p{max-width:56ch}

/* Central Tracks and publishing */
.lib-pub{margin:.9rem 0 0;font-size:.92rem}
.pub-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:-.8rem 0 1.2rem}
#pubForm.pub-closed{display:none}
#pubForm.pub-closed+.payout{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* #account, #purchases and #downloads read as pages of their own: the shop steps aside */
body.view-account:not(.editing) .hero,body.view-account:not(.editing) #store,body.view-account:not(.editing) #tracks,body.view-account:not(.editing) #publish{display:none}
body.view-account #account{border-top:0}

/* the account: a sidebar of sections, each with its cards */
.acct-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);align-items:start}
.acct-side{position:sticky;top:84px;display:grid;gap:2px;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.acct-side a{display:block;padding:.5rem .75rem;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:.92rem;font-weight:500}
.acct-side a:hover{background:var(--paper);color:var(--ink)}
.acct-side a.on{background:var(--brass-wash);color:var(--brass-ink);font-weight:600}
.acct-main{display:grid;gap:var(--s6);min-width:0}
.acct-sec{scroll-margin-top:90px;display:grid;gap:var(--s3)}
.acct-sec-h{font-size:.84rem;font-weight:600;font-stretch:var(--narrow);color:var(--ink-3);letter-spacing:.01em;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.acct-cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:start}
.acct-cards>.card.wide{grid-column:1/-1}
@media (max-width:900px){
  .acct-shell{grid-template-columns:1fr;gap:var(--s4)}
  .acct-side{top:auto;position:static;display:flex;overflow-x:auto;scrollbar-width:none;padding:var(--s1);gap:var(--s1)}
  .acct-side::-webkit-scrollbar{display:none}
  .acct-side a{white-space:nowrap;flex:none}
}
.acct-summary h3{font-size:1.35rem;font-stretch:var(--wide)}
.sum-row{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;color:var(--ink-2)}
.sum-links{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;font-size:.8rem;font-weight:500;padding:.15rem .6rem;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)}
.chip.on{border-color:var(--brass);color:var(--brass-ink);background:var(--brass-wash)}
.chip.off{color:var(--ink-3)}
.conns{display:grid;gap:.4rem}
.conn{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.conn:last-child{border-bottom:0}
.proj{display:grid;gap:2px}
.proj a{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem .2rem;text-decoration:none;border-bottom:1px solid var(--line)}
.proj a:hover b{text-decoration:underline}
/* (10.2) nav elements that aren't the header's own links */
.store-nav,.acct-side{margin-left:0}
@media (max-width:900px){.acct-side{flex-wrap:nowrap}}
/* phones: the six links scroll in one row; sign in / account sits next to the cart */
@media (max-width:760px){
  .nav-main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;width:calc(100% + 40px)}
  .nav-main::-webkit-scrollbar{display:none}
  .nav-main a{white-space:nowrap;flex:none}
  nav #acctLink,nav .acct-menu{position:absolute;top:.55rem;right:calc(max(20px,env(safe-area-inset-right,0px)) + 92px);min-height:40px;display:inline-flex;align-items:center}
  nav .acct-menu[hidden],nav #acctLink[hidden]{display:none}
}
/* (10.2) the same header on every page: the six links, then Account */
nav a.on{color:var(--ink);border-bottom-color:var(--ink)}
.nav-acct{font-weight:600;color:var(--ink)!important}
@media (max-width:760px){nav .nav-acct{position:absolute;top:.55rem;right:max(20px,env(safe-area-inset-right,0px));min-height:44px;display:inline-flex;align-items:center}}
.doc-links{font-size:.92rem;color:var(--ink-3);margin:0 0 1.6rem}
.doc-links b{color:var(--ink)}