/* Ling Studio - the 2nd layer: jukebox backdrop, showcase shots, feature bands, nav menus, footer. Loaded after style.css.
   Everything here is progressive: without 3D transforms, mask-image or backdrop-filter the page is simply flat and still readable. */

:focus-visible{outline:2px solid var(--sel-hi);outline-offset:2px;border-radius:3px}
.btn,button.btn,.pill,.card,.chip{transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.4)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 3px rgba(11,127,176,.28)}
.btn.cta{background:linear-gradient(180deg,#0b8cc4,#006a93);color:#fff;font-weight:600;letter-spacing:.01em}
.btn.cta:hover{background:linear-gradient(180deg,#19a0dc,#0b7fb0);color:#fff}
.card:hover{transform:translateY(-2px)}
.skip{position:absolute;left:-999px;top:6px;background:var(--sel);color:#fff;padding:6px 12px;border-radius:3px;z-index:99}.skip:focus{left:8px}

/* ---------------- jukebox: tilted, glossy screenshots behind the whole site ---------------- */
.jb{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;perspective:1700px;perspective-origin:62% 38%;opacity:.17;transition:opacity .6s}
body.jb-strong .jb{opacity:.5}
.jb-plane{position:absolute;left:30%;top:-24%;width:2000px;height:1700px;transform-style:preserve-3d;transform:rotateY(-34deg) rotateX(12deg) rotateZ(6deg);animation:jbdrift 120s ease-in-out infinite alternate;will-change:transform}
.jb-p{position:absolute;margin:0;width:620px;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden;background:#07080a;
  box-shadow:0 40px 90px -30px var(--k,#0b7fb0),0 0 0 1px rgba(0,0,0,.6);-webkit-box-reflect:below 14px linear-gradient(transparent 66%,rgba(255,255,255,.2))}
.jb-p img{display:block;width:100%;height:100%;object-fit:cover}
.jb-p::after,.gloss::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.09) 30%,rgba(255,255,255,0) 31%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 18%);mix-blend-mode:screen}
@keyframes jbdrift{from{transform:rotateY(-34deg) rotateX(12deg) rotateZ(6deg) translate3d(0,0,0)}to{transform:rotateY(-30deg) rotateX(9deg) rotateZ(4deg) translate3d(-90px,110px,60px)}}
/* a veil keeps text readable: dark on the left (where text sits) and toward the bottom of the viewport */
.jb-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 90% at 78% 22%,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 62%,#000 100%),
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.72) 70%,#000)}
body.jb-strong .jb-veil{background:
  radial-gradient(110% 85% at 80% 18%,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 100%),
  linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55) 62%,#000 96%)}
@media (max-width:760px){.jb-plane{left:-30%;width:1500px;animation:none}.jb{opacity:.1}body.jb-strong .jb{opacity:.3}.jb-p{width:460px}}
@media (prefers-reduced-motion:reduce){.jb-plane{animation:none}.btn,.card{transition:none}}
@media print{.jb,.jb-veil{display:none}}

/* ---------------- header: nav toggle, user menu ---------------- */
.navt{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;cursor:pointer;padding:6px 9px;border:1px solid var(--line);border-radius:3px;line-height:1;color:var(--text)}
.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:2px;background:currentColor;content:"";position:relative}
.burger span::before{position:absolute;top:-5px}.burger span::after{position:absolute;top:5px}
.right .btn{white-space:nowrap}
.usermenu{position:relative}
.usermenu summary{list-style:none;display:flex;align-items:center;gap:7px;padding:3px 8px 3px 4px;border-radius:3px;cursor:pointer;color:var(--text);user-select:none;border:1px solid transparent}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover,.usermenu[open] summary{background:var(--hover-row);border-color:var(--line-soft);color:var(--strong)}
.usermenu summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.usermenu .drop{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--popup);border:1px solid var(--popup-line);border-radius:5px;padding:6px;z-index:30;box-shadow:0 14px 40px rgba(0,0,0,.65)}
.usermenu .drop a,.usermenu .drop button{display:flex;width:100%;align-items:center;gap:8px;padding:8px 10px;border-radius:3px;color:var(--text);background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.usermenu .drop a:hover,.usermenu .drop button:hover{background:var(--hover-row);color:var(--strong);text-decoration:none}
.usermenu .drop hr{border:0;border-top:1px solid var(--line-soft);margin:5px 2px}
.usermenu .drop .who{padding:6px 10px 8px;color:var(--dim);font-size:.82rem}
.usermenu .drop form{margin:0}
@media (max-width:900px){
  .burger{display:inline-block;order:2;margin-left:auto}
  .brand{order:1}.right{order:3;margin-left:0}.navsearch{order:5;flex-basis:100%}
  #top nav{display:none;order:6;flex-basis:100%;flex-direction:column;padding:4px 0}
  .navt:checked ~ nav{display:flex}
  #top nav a{padding:10px 12px}
  .right .navuser span,.usermenu summary span{display:none}
}

/* ---------------- home hero with a tilted showcase ---------------- */
.hero.v2{margin:0 -16px;padding:56px 16px 40px;border-bottom:0;background:none}
.hero.v2::before{display:none}
.hero-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:34px;align-items:center}
.hero.v2 h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.015em;margin:.25em 0 .35em}
.hero.v2 h1 em{font-style:normal;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow) 40%,var(--green) 62%,var(--blue) 82%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.v2 .lead{max-width:34em;opacity:.92}
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.platforms span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--dim);border:1px solid var(--line-soft);padding:2px 10px;border-radius:3px;background:rgba(10,10,10,.6)}
.platforms span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--blue))}
.show{perspective:1800px;perspective-origin:30% 50%;padding:10px 0 60px}
.show-in{position:relative;transform:rotateY(-17deg) rotateX(5deg) rotateZ(1.2deg);transform-origin:20% 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.show:hover .show-in{transform:rotateY(-8deg) rotateX(2deg) rotateZ(.4deg)}
.shotbox{position:relative;display:block;margin:0;border:1px solid rgba(255,255,255,.22);border-radius:6px;overflow:hidden;background:#05060a;
  box-shadow:0 50px 110px -35px rgba(11,127,176,.75),0 18px 40px rgba(0,0,0,.7);-webkit-box-reflect:below 12px linear-gradient(transparent 70%,rgba(255,255,255,.22))}
.shotbox img{display:block;width:100%;height:auto}
.gloss{position:relative;overflow:hidden}
.chipfloat{position:absolute;z-index:3;width:42%;border:1px solid rgba(255,255,255,.3);border-radius:5px;overflow:hidden;background:#05060a;box-shadow:0 24px 50px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6);transform:translateZ(70px);transition:transform .7s}
.chipfloat img{display:block;width:100%;height:auto}
.chipfloat.a{right:-3%;bottom:-8%}.chipfloat.b{left:-7%;top:-6%;width:30%}
.chipfloat figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 5px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--strong);background:linear-gradient(transparent,rgba(0,0,0,.85))}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.show{padding-bottom:20px}.show-in{transform:rotateY(-8deg) rotateX(3deg)}.chipfloat.b{display:none}}

/* trust strip */
.strip{max-width:1200px;margin:6px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.strip div{background:rgba(10,10,12,.82);padding:14px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.strip b{display:block;color:var(--strong);font-size:1.25rem;font-weight:600;line-height:1.2}.strip span{color:var(--dim);font-size:.82rem}
.strip div:nth-child(1) b{color:var(--red)}.strip div:nth-child(2) b{color:var(--yellow)}.strip div:nth-child(3) b{color:var(--green)}.strip div:nth-child(4) b{color:var(--blue)}.strip div:nth-child(5) b{color:var(--violet)}

/* ---------------- feature bands ---------------- */
.bands{display:flex;flex-direction:column;gap:56px;margin:56px 0 20px}
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:34px;align-items:center}
.band.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.band.flip .band-text{order:2}
.band-text .eyebrow{color:var(--k,var(--yellow))}
.band-text h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.2em 0 .45em;letter-spacing:-.01em}
.band-text p{color:var(--text);opacity:.9;max-width:34em}
.ticks{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:7px}
.ticks li{position:relative;padding-left:20px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border:2px solid var(--k,var(--blue));border-right:0;border-bottom:0;transform:rotate(135deg) scale(.9)}
.shot{position:relative;margin:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#05060a;cursor:zoom-in;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--k,var(--blue)) 70%,transparent),0 12px 30px rgba(0,0,0,.6)}
.shot img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.025)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 9px;font-size:.78rem;color:#dfe2ea;background:linear-gradient(transparent,rgba(0,0,0,.88));pointer-events:none}
.shot .tag{position:absolute;left:10px;top:10px;z-index:2;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--k,var(--yellow));padding:1px 8px;border-radius:2px;font-weight:700}
.tilt{perspective:1500px}.tilt .shot{transform:rotateY(-9deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.band.flip .tilt .shot{transform:rotateY(9deg) rotateX(3deg)}.tilt:hover .shot{transform:none}
@media (max-width:900px){.band,.band.flip{grid-template-columns:1fr}.band.flip .band-text{order:0}.tilt .shot,.band.flip .tilt .shot{transform:none}}

/* wide CTA band */
.cta-band{margin:50px 0 10px;padding:30px 28px;border:1px solid var(--line);outline:1px solid var(--line-soft);outline-offset:-6px;background:linear-gradient(120deg,rgba(0,92,128,.35),rgba(10,10,12,.85) 60%);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cta-band h2{margin:0 0 .25em;font-size:1.5rem}.cta-band p{margin:0;color:var(--text);opacity:.88}

/* ---------------- features page ---------------- */
.pagehead{max-width:820px;margin:28px 0 8px}
.pagehead h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.012em}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.jump a{padding:5px 12px;border:1px solid var(--line);border-radius:3px;background:rgba(10,10,12,.7);color:var(--text);font-size:.86rem}
.jump a:hover{border-color:var(--k,var(--blue));color:var(--strong);text-decoration:none}
.fgroup{scroll-margin-top:84px}
.zooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.zooms .shot:only-child{max-width:780px;margin:0 auto}
.k0{--k:var(--red)}.k1{--k:var(--orange)}.k2{--k:var(--yellow)}.k3{--k:var(--green)}.k4{--k:var(--blue)}.k5{--k:var(--indigo)}.k6{--k:var(--violet)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:3vmin;cursor:zoom-out;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lbin .18s}
.lb img{max-width:100%;max-height:100%;border:1px solid rgba(255,255,255,.25);border-radius:4px;box-shadow:0 30px 100px rgba(0,0,0,.8)}
.lb figcaption{position:absolute;left:0;right:0;bottom:2vmin;text-align:center;color:#cdd0d8;font-size:.9rem}
@keyframes lbin{from{opacity:0}to{opacity:1}}

/* ---------------- studio: continue card ---------------- */
.resume{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:16px;align-items:center;margin:14px 0}
.resume .cover{width:132px;height:132px;outline:1px solid var(--line);outline-offset:3px}
.resume h2{margin:0 0 .15em}.resume .muted{margin:.1em 0}
@media (max-width:640px){.resume{grid-template-columns:84px minmax(0,1fr)}.resume .cover{width:84px;height:84px}.resume .actions{grid-column:1/-1}}
td.act{white-space:nowrap;text-align:right}.btn.sm{padding:3px 10px;font-size:.84rem}

/* gate (not a subscriber): a preview, not a wall */
.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center;margin:26px 0}
@media (max-width:860px){.gate{grid-template-columns:1fr}}

/* ---------------- footer ---------------- */
footer{margin-top:30px;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.foot-inner.v2{display:grid;grid-template-columns:1.4fr repeat(3,minmax(120px,.7fr));gap:28px;padding:34px 16px 18px}
.foot-inner.v2 h4{margin:0 0 10px;color:var(--strong);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.foot-inner.v2 a{display:block;color:var(--dim);padding:3px 0}.foot-inner.v2 a:hover{color:var(--strong);text-decoration:none}
.foot-inner.v2 p{margin:.3em 0 .8em;color:var(--dim);font-size:.9rem;max-width:30em}
.footnews{display:flex;gap:6px;max-width:360px}.footnews input{flex:1;min-width:0}
.foot-base{max-width:1200px;margin:0 auto;padding:12px 16px 26px;border-top:1px solid var(--line-soft);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;color:#6d717a;font-size:.82rem}
@media (max-width:760px){.foot-inner.v2{grid-template-columns:1fr 1fr}.foot-inner.v2>div:first-child{grid-column:1/-1}}