/* Responsibility: the look of the JoVee home page. */
:root{
  --bg:#0e1013;--bg-2:#15181d;--card:#1a1e24;--line:#ffffff14;--line-2:#ffffff24;
  --ink:#f4f1ea;--ink-2:#b9bec7;--ink-3:#8a919c;
  --jovee:#D9412B;--rig:#1F8FE5;--studio:#1FA37A;--jam:#E89A12;--tone:#7C5CE0;--lut:#B8693A;--live:#E5484D;
  --r:12px;--wrap:1200px;--gut:24px;--f:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.top{position:sticky;top:0;z-index:5;background:#0e1013e6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;height:64px;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font:900 22px/1 var(--f);letter-spacing:-.02em}
.brand img{width:26px;height:28px}
.nav{display:flex;gap:24px;font:500 15px/1 var(--f);color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.top .btn{margin-left:auto}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:10px;font:600 15px/1 var(--f);cursor:pointer;transition:background .2s}
.btn-rig{background:var(--rig);color:#fff}
.btn-rig:hover{background:#3aa0ee}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px}
.btn svg{width:18px;height:18px}

.hero{padding:88px 0 72px;background:radial-gradient(1000px 500px at 80% 0%,#1F8FE522,transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--rig)}
.eyebrow img{width:22px;height:24px}
h1{margin:20px 0 20px;font:800 42px/1.14 var(--f);letter-spacing:-.02em}
.lede{margin:0 0 32px;font-size:19px;color:var(--ink-2);max-width:34em}
.meta{margin-top:14px;font-size:14px;color:var(--ink-3)}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px #000c,0 0 0 1px #000}

.sec{padding:88px 0;border-top:1px solid var(--line)}
.kick{font:600 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--rig);margin-bottom:14px}
.h2{margin:0 0 12px;font:800 32px/1.15 var(--f);letter-spacing:-.015em;max-width:24em}
.sub{margin:0 0 40px;font-size:18px;color:var(--ink-2);max-width:40em}

/* feature with shot */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.feat figure{margin:0 0 16px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.feat figure img{aspect-ratio:16/10;object-fit:cover;object-position:top left;width:100%}
.feat figure img.fit{object-fit:contain;object-position:center}
.feat b{display:block;margin-bottom:6px;font:700 18px/1.3 var(--f)}
.feat p{margin:0;font-size:15.5px;color:var(--ink-2)}

/* text-only feature list */
.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin-top:40px;border-top:1px solid var(--line)}
.list div{padding:20px 0;border-bottom:1px solid var(--line)}
.list b{display:block;margin-bottom:4px;font:700 16px/1.3 var(--f)}
.list p{margin:0;font-size:15px;color:var(--ink-2)}

.family{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.app{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.app .pk{width:36px;height:39px}
.app b{font:700 20px/1.2 var(--f)}
.app b span{font-weight:400;color:var(--c)}
.app p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2);flex:1}
.soon{align-self:flex-start;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);font:600 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.cta{text-align:center;padding:96px 0;border-top:1px solid var(--line);background:radial-gradient(700px 300px at 50% 100%,#1F8FE51f,transparent 70%)}
.cta .h2{margin:0 auto 24px}
.foot{padding:32px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.foot .wrap{display:flex;justify-content:space-between}
.foot .wrap{align-items:center;gap:16px}
.langs{display:flex;gap:4px}
.langs button{background:none;border:1px solid transparent;border-radius:8px;padding:6px 10px;color:var(--ink-3);font:500 14px/1 var(--f);cursor:pointer}
.langs button:hover{color:var(--ink)}
.langs button.on{color:var(--ink);border-color:var(--line-2)}
.meta a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.meta a:hover{color:var(--ink)}

@media (max-width:1080px){
  .family{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--gut:16px}
  .nav{display:none}
  .hero{padding:56px 0 48px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  h1{font-size:34px}
  .sec{padding:64px 0}
  .h2{font-size:26px}
  .sub{font-size:17px;margin-bottom:32px}
  .feats,.list{grid-template-columns:minmax(0,1fr)}
  .cta{padding:72px 0}
}
@media (max-width:560px){
  .family{grid-template-columns:minmax(0,1fr)}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}

/* edition tags */
.tag{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:6px;font:700 11px/1 var(--f);font-style:normal;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px;border:1px solid var(--line-2);color:var(--ink-2)}
.tag-standard{color:var(--rig);border-color:#1F8FE566}
.tag-pro{color:#fff;background:var(--tone);border-color:var(--tone)}
.kick .tag{vertical-align:0}
.launch{display:flex;align-items:center;gap:10px;margin-top:28px;padding:12px 14px;border-radius:10px;background:#7C5CE01f;border:1px solid #7C5CE055;font-size:15px;color:var(--ink)}
.launch .tag{margin:0;flex:none}
h1{margin-bottom:32px}

/* TONE3000 */
.sec-t3k{background:radial-gradient(900px 420px at 15% 0%,#7C5CE026,transparent 70%)}
.sec-t3k .kick{color:var(--tone)}

/* editions */
.eds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ed{display:flex;flex-direction:column;padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.ed-pro{border-color:var(--tone);box-shadow:0 0 0 1px var(--tone)}
.ed-name{font:800 22px/1 var(--f)}
.ed-pro .ed-name{color:#b9a6ff}
.price{margin-top:18px;font:800 36px/1 var(--f);letter-spacing:-.02em}
.per{margin-top:8px;min-height:2.6em;font-size:14px;color:var(--ink-3)}
.ed ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.ed li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-2)}
.ed li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--studio)}
.note{margin:24px 0 0;font-size:15px;color:var(--ink-3)}

/* downloads */
.dls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dl{display:flex;flex-direction:column;padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.dl b{font:700 20px/1.2 var(--f)}
.dl p{margin:6px 0 18px;font-size:14px;color:var(--ink-3);flex:1}
.files{display:flex;flex-wrap:wrap;gap:8px}
.files a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:8px;background:var(--rig);color:#fff;font:600 14px/1 var(--f)}
.files a:hover{background:#3aa0ee}
.files a+a{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.files a+a:hover{background:#ffffff0d}
.ver{color:var(--ink-3)}

/* family with image */
.app{padding:0;overflow:hidden}
.app figure{margin:0;border-bottom:1px solid var(--line);background:var(--bg-2)}
.app figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.app-body{display:flex;flex-direction:column;gap:14px;padding:24px;flex:1}

/* footer */
.yt{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.yt svg{width:22px;height:22px;color:#ff3b30}
.yt:hover{color:var(--ink)}
.langs{flex-wrap:wrap;justify-content:flex-end}

@media (max-width:1080px){
  .dls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .eds{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .dls{grid-template-columns:minmax(0,1fr)}
  .langs{justify-content:flex-start}
}