/* MixtapeFactory growth features: share dialog, embed tab, follow, scheduled drops, marketing kit, hero titles.
   Dialog, share, embed, follow and drop styles follow the approved mockups (mockups-2026-v3/missing/mock.css). */

/* ---- hero titles: long names shrink and stop at 3 lines; the full name is in the title attribute ---- */
.slide h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;padding-bottom:.08em;overflow-wrap:anywhere}
.slide h1 a{color:inherit}.slide h1 a:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
/* five steps, same values as mockups-2026-v3/singles/app/singles.css */
.slide h1.tz-l{font-size:clamp(40px,5vw,72px)}
.slide h1.tz-m{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.045em;line-height:.98}
.slide h1.tz-s{font-size:clamp(28px,2.9vw,42px);letter-spacing:-.035em;line-height:1.04}
.slide h1.tz-xs{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em;line-height:1.1}
@media(max-width:820px){.slide h1.tz-xl{font-size:40px}.slide h1.tz-l{font-size:34px}.slide h1.tz-m{font-size:29px}.slide h1.tz-s{font-size:25px}.slide h1.tz-xs{font-size:21px}}

/* ---- dialog (share, embed) ---- */
.dlg{position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:24px;animation:dlgIn .18s ease-out}
@keyframes dlgIn{from{opacity:0}to{opacity:1}}
.dlg-in{width:min(560px,100%);max-height:calc(100vh - 80px);overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px 24px 24px;overscroll-behavior:contain}
.dlg-in.wide{width:min(760px,100%)}
.dlg-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}.dlg-h h2{font-size:22px;font-weight:800;letter-spacing:-.035em;flex:1}
.dlg-h .x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);color:var(--mut)}.dlg-h .x svg{width:16px;height:16px}
.dlg .lead{color:var(--mut);font-size:14.5px;margin-bottom:16px}
.mini{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:var(--bg2);margin:0 0 16px}.mini img{width:52px;height:52px;border-radius:10px;object-fit:cover}.mini b{display:block;font-size:15px}.mini small{color:var(--mut);font-size:13px}
.mini>div{min-width:0}.mini b,.mini small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlg-f{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:16px;flex-wrap:wrap}.dlg-f .sm2{margin-right:auto;color:var(--mut);font-size:13px;max-width:46ch}
.sharegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:4px 0 18px}
.sharegrid.n7{grid-template-columns:repeat(7,1fr)}
.sbtn{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--body);text-align:center}
.sbtn i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);font-style:normal;font-weight:800;font-size:17px}.sbtn i svg{width:22px;height:22px}
.sbtn i.acc{background:var(--acc);color:#fff}.sbtn:hover i{background:color-mix(in srgb,var(--fg) 15%,transparent)}.sbtn:hover i.acc{background:var(--acc2)}
.linkrow{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 14px;border-radius:14px;background:var(--bg2);margin-bottom:18px}.linkrow span{flex:1;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cards2{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
.cards2 h3{font-size:16px;font-weight:800;letter-spacing:-.02em}.cards2 p{color:var(--mut);font-size:13.5px;margin:4px 0 12px}
.storyimg{width:150px;aspect-ratio:9/16;border-radius:16px;object-fit:cover;background:var(--bg2);box-shadow:var(--card-shadow)}
.ogprev{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);margin-top:4px}.ogprev img{width:100%;aspect-ratio:1.91/1;object-fit:cover;background:#000}
.ogprev .cap{padding:8px 12px;font-size:12px;color:var(--mut);overflow-wrap:anywhere}.ogprev .cap b{display:block;color:var(--fg);font-size:13px}
.tabs2{display:flex;gap:6px;margin:0 0 16px}.tabs2 button{padding:7px 14px;border-radius:999px;background:var(--bg2);font-weight:700;font-size:13.5px;color:var(--body)}.tabs2 button.on{background:var(--fg);color:var(--bg)}
.codebox{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg2);border-radius:12px;padding:12px 14px;color:var(--body);word-break:break-all;margin-bottom:12px;user-select:all;-webkit-user-select:all}
.canvas{border-radius:20px;padding:30px;background:repeating-linear-gradient(45deg,var(--bg2),var(--bg2) 12px,var(--bg) 12px,var(--bg) 24px);border:1px solid var(--line)}
.canvas .lbl{font-size:13px;color:var(--mut);font-weight:700;margin:0 0 10px}.canvas iframe{display:block;width:100%;border:0;border-radius:16px;background:transparent}
.dlg .seg button{padding:8px 15px;border-radius:999px;background:var(--bg2);font-weight:600;font-size:14px;color:var(--body)}.dlg .seg button.on{background:var(--fg);color:var(--bg)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;background:var(--fg);color:var(--bg);border-radius:14px;padding:12px 16px;font-weight:600;font-size:14px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 24px);animation:dlgIn .2s}.toast svg{width:18px;height:18px;color:var(--acc);flex:none}
@media(max-width:820px){
 .dlg{place-items:end center;padding:0}
 .dlg-in,.dlg-in.wide{width:100%;border-radius:24px 24px 0 0;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding:18px 18px calc(22px + env(safe-area-inset-bottom));border-bottom:0;animation:sheetUp .28s cubic-bezier(.2,.8,.2,1)}
 @keyframes sheetUp{from{transform:translateY(40%)}to{transform:none}}
 .dlg-in:before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
 .sharegrid,.sharegrid.n7{display:flex;overflow-x:auto;gap:12px;scrollbar-width:none;margin:0 -18px 18px;padding:0 18px}.sharegrid::-webkit-scrollbar{display:none}.sbtn{flex:none;width:66px;font-size:12px}
 .cards2{grid-template-columns:110px 1fr;gap:14px}.storyimg{width:110px}
 .dlg-f .sm2{flex-basis:100%}.dlg-f .btn{flex:1;justify-content:center}
 .canvas{padding:16px}
 .toast{bottom:calc(140px + env(safe-area-inset-bottom))}
}

/* ---- follow ---- */
.btn.glass.ok{background:rgba(255,255,255,.92);color:#000;border-color:transparent}
.dj .btn.glass.ok{background:rgba(255,255,255,.92);color:#000}
.pop{position:absolute;z-index:85;width:330px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px;animation:dlgIn .18s}
.pop h3{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;gap:8px;align-items:center}.pop h3 svg{width:18px;height:18px;color:var(--acc);flex:none}
.pop p{color:var(--mut);font-size:13.5px;margin:4px 0 12px}
.tg{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;text-align:left}.tg small{display:block;color:var(--mut);font-size:12.5px}
.tg .sw{flex:none}
@media(max-width:820px){.pop{position:fixed;left:8px;right:8px;width:auto;bottom:calc(74px + env(safe-area-inset-bottom));top:auto!important}}
.newdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:6px;vertical-align:middle}
.fol-list{display:grid;gap:0;max-width:720px}.fol-list .tg:first-child{border-top:0}
.fol-list .tg b{font-weight:700}.fol-list .acts3{display:flex;gap:10px;align-items:center}

/* ---- scheduled drops ---- */
.cd{display:flex;gap:10px;margin-top:20px}.cd div{min-width:78px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:center}.cd b{display:block;font-size:34px;font-weight:900;letter-spacing:-.05em;line-height:1}.cd small{font-size:12px;opacity:.85}
.dropat{display:inline-flex;align-items:center;gap:8px;font-weight:700}.dropat svg{width:18px;height:18px}
.tr.lock{cursor:default}.tr.lock:hover{background:none}.tr.lock .t{color:var(--mut)}.tr.lock .d svg{width:16px;height:16px;color:var(--mut)}
.when{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;text-align:left}
.opt .rd{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);margin-top:1px;display:grid;place-items:center}
.opt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)}.opt.on .rd{border-color:var(--acc)}.opt.on .rd:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}
.opt b{display:block;font-size:14.5px}.opt small{display:block;color:var(--mut);font-size:13px;margin-top:1px}
.opt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.opt.ck .rd{border-radius:6px}.opt.ck.on .rd{background:var(--acc)}.opt.ck.on .rd:after{width:9px;height:5px;border-radius:0;background:none;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.whenbox .two2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slide .tag.soon{background:transparent}
@media(max-width:820px){.cd div{min-width:64px;padding:8px}.cd b{font-size:26px}.when{grid-template-columns:1fr}}

/* ---- marketing kit ---- */
.kit{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.kit .fcard{padding:22px}
.kit h2{font-size:20px;font-weight:800;letter-spacing:-.03em;display:flex;gap:10px;align-items:center}.kit h2 .sn{width:28px;height:28px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:14px;flex:none}
.kit .stp+.stp{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.kit .stp>p{color:var(--mut);font-size:14px;margin:4px 0 14px}
.ktr{display:grid;gap:4px;max-height:300px;overflow:auto;border-radius:12px}
.ktr button{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:10px 12px;border-radius:10px;text-align:left;font-weight:600}
.ktr button:hover{background:var(--bg2)}.ktr button span{color:var(--mut);font-weight:700}.ktr button.on{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--fg)}.ktr button.on span{color:var(--acc)}
.ktr button[disabled]{opacity:.45;cursor:default}
.wv{position:relative;height:96px;border-radius:12px;background:var(--bg2);overflow:hidden;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.wv canvas{position:absolute;inset:0;width:100%;height:100%}
.wv .win{position:absolute;top:0;bottom:0;border:2.5px solid var(--acc);border-radius:10px;background:color-mix(in srgb,var(--acc) 16%,transparent);cursor:grab;touch-action:none}
.wv .win:before,.wv .win:after{content:"";position:absolute;top:50%;width:6px;height:30px;margin-top:-15px;border-radius:3px;background:var(--acc)}.wv .win:before{left:-4px}.wv .win:after{right:-4px}
.wv .ph{position:absolute;top:0;bottom:0;width:2px;background:var(--fg);pointer-events:none;display:none}
.wv .ld{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13.5px}
.krow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.krow .tm{color:var(--mut);font-size:14px;font-variant-numeric:tabular-nums}
.kfmt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.kfmt button{padding:8px 13px;border-radius:999px;background:var(--bg2);font-weight:600;font-size:13.5px;color:var(--body)}.kfmt button.on{background:var(--fg);color:var(--bg)}
.kprev{display:grid;place-items:center;background:var(--bg2);border-radius:16px;padding:18px;min-height:240px}
.kprev img,.kprev video{max-width:100%;max-height:520px;border-radius:12px;box-shadow:var(--card-shadow);background:#000}
.kprev .r916{aspect-ratio:9/16;height:min(520px,70vh)}.kprev .r45{aspect-ratio:4/5;height:min(460px,60vh)}.kprev .r11{aspect-ratio:1;height:min(400px,60vh)}
.kfiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:16px}
.kfile{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.kfile.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.kfile .th{border-radius:10px;overflow:hidden;background:#000;display:grid;place-items:center;aspect-ratio:1}.kfile .th img,.kfile .th video{width:100%;height:100%;object-fit:contain}
.kfile b{font-size:14px}.kfile small{color:var(--mut);font-size:12.5px;margin-top:-6px}
.kfile .btn{justify-content:center}
.kbar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden;margin:12px 0 6px}.kbar i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .5s}
.kok{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--acc) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));margin-bottom:22px}
.kok img{width:56px;height:56px;border-radius:10px;object-fit:cover}.kok b{display:block;font-size:16px}.kok span{color:var(--mut);font-size:14px}.kok .sp{flex:1;min-width:0}
.kside .fcard+.fcard{margin-top:14px}.kside h3{font-size:17px;font-weight:800;letter-spacing:-.02em}.kside p{color:var(--mut);font-size:14px;margin:6px 0 14px}
.kclip{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border-radius:12px;background:var(--bg2);margin-top:8px}.kclip span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;font-weight:600}
@media(max-width:980px){.kit{grid-template-columns:1fr}.kprev .r916{height:min(480px,62vh)}}
@media(max-width:820px){.kfiles{grid-template-columns:1fr 1fr}.kit .fcard{padding:16px}}
.btn.on-own{background:var(--acc);color:#fff;border-color:var(--acc)}

/* phone hero: the fade into the page sits under the buttons only, so a light page never washes out the white title and buttons */
@media(max-width:820px){
 .hero:after{background:linear-gradient(0deg,var(--bg) 0,color-mix(in srgb,var(--bg) 0%,transparent) 34px),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42))}
 .slide .txt{z-index:2;text-shadow:0 1px 18px rgba(0,0,0,.35)}
 .slide .acts{flex-wrap:wrap}
}
@media(max-width:820px){.tp .hero{height:auto;min-height:0}}
@media(max-width:820px){.kok{flex-wrap:wrap}.kok .sp{flex:1 1 calc(100% - 80px)}.kok .btn{width:100%;justify-content:center}.ktr{max-height:250px}}
.kfile .th{aspect-ratio:4/5}