/* Josh's web prototype stylesheet, verbatim (built by design/tools/build-kit.py). Do not edit: put new styles in kit/new.css. */

/* ClipMagic Business web app (desktop). Rebuilt 22 Oct 2026 on the V4 dashboard Josh picked (HQ /sites/dashboard-business/#frost).
   The concept: ClipMagic finds ideas, the owner clicks Make video / Make carousel / Make image; it's made in the background and lands in
   Ready to check, with 3 extra "made for you" posts a week. Nothing goes out until the owner approves it. Autopilot unlocks in week 2.
   Style: V4 Frost (dark violet app, #F4F5F8 window, sky header, Inter, gradient words, violet buttons, soft white cards). */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:none}
button,label{cursor:pointer}
[hidden]{display:none!important}
img,video,svg{display:block}
:root{
  --logo:url(https://clipmagic.tech/webapp/media/gails-mask.png);--logo-mono:url(https://clipmagic.tech/webapp/media/gails-mask.png);--lg-bg:#F7F0E6;--lg-ink:#C8102E;--lg-w:28px;--lg-h:8px;
  --app:linear-gradient(#0C0918 0%,#160F33 40%,#241654 75%,#33206F 100%);
  --win:#F4F5F8;--card:#fff;
  --ink:#0F1A33;--ink2:#3A4256;--muted:#6B7285;--faint:#A3A8B8;--hair:rgba(24,24,27,.07);--hair2:rgba(24,24,27,.12);
  --vio:#6D55FD;--vio-l:#EFEBFF;--ok:#15803D;--ok-l:#E3F6EA;--amber:#B45309;--amber-l:#FFF1DB;--red:#E11D48;
  --shadow:0 0 0 1px rgba(24,24,27,.04),0 1px 2px rgba(24,24,27,.04),0 10px 30px -10px rgba(24,24,27,.12),inset 0 1px 0 rgba(255,255,255,.9);
  --btn:linear-gradient(#7B61FF,#6249F8);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px rgba(109,85,253,.75);
  --words:linear-gradient(90deg,#6D55FD,#C04BFF 50%,#FF8A3D);
  --scoutw:linear-gradient(90deg,#C9BDFF,#FF9AD5 60%,#FFC08A);
  --edge:linear-gradient(120deg,#B9A8FF,#FF8FCB 52%,#FFB67A);
  --band:radial-gradient(60% 90% at 15% 10%,#9DC8FF 0%,transparent 60%),radial-gradient(55% 80% at 80% 0%,#C7B6FF 0%,transparent 62%),radial-gradient(70% 90% at 60% 100%,#EAF2FF 0%,transparent 70%),linear-gradient(#BFD8FF,#F3F5FF);
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.32,.72,0,1);
}
body{font-family:Inter,system-ui,sans-serif;font-size:14.5px;color:var(--ink);background:#0C0918;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;overflow:hidden}
.app{position:fixed;inset:0;display:grid;grid-template-columns:264px 1fr;background:var(--app)}

/* ---------- sidebar ---------- */
.side{display:flex;flex-direction:column;padding:16px 14px 16px 16px;color:#fff;min-height:0}
.dots{display:flex;gap:8px;padding:2px 4px 18px}.dots i{width:12px;height:12px;border-radius:50%}
.logo{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;letter-spacing:-.02em;padding:0 4px 18px}
.logo img{width:30px;height:30px}
.ws{display:flex;align-items:center;gap:11px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);margin-bottom:16px}
.ws .lg{width:36px;height:36px;border-radius:50%;background:var(--lg-bg);display:grid;place-items:center;flex:none}
.ws .lg i{width:var(--lg-w);height:var(--lg-h);background:var(--lg-ink);-webkit-mask:var(--logo-mono) center/contain no-repeat;mask:var(--logo-mono) center/contain no-repeat}
.ws b{display:block;font-size:14.5px;font-weight:600}
.ws small{display:block;font-size:12px;color:rgba(232,226,255,.6);margin-top:1px}
.nav{display:grid;gap:2px}
.ni{position:relative;display:flex;align-items:center;gap:12px;height:44px;padding:0 10px 0 12px;border-radius:13px;color:rgba(232,226,255,.78);font-size:14.5px;font-weight:500;text-align:left;width:100%;transition:background .15s,color .15s}
.ni:hover{background:rgba(255,255,255,.05);color:#fff}
.ni svg{width:20px;height:20px;flex:none}
.ni.on{color:#fff;background:rgba(255,255,255,.08)}
.ni.on::before{content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#B4A6FF,#7B61FF);box-shadow:0 0 10px rgba(139,120,255,.8)}
.ni.on svg{color:#fff;background:var(--btn);border-radius:9px;padding:5px;width:30px;height:30px;margin-left:-5px;margin-right:-5px}
.ni .bd{margin-left:auto;font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;background:rgba(255,255,255,.1);color:#E8E2FF}
.ni .bd.hot{background:#F0628E;color:#fff}
.sp{flex:1}
.side hr{border:0;height:1px;background:rgba(255,255,255,.08);margin:12px 4px}
.tellbtn{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);text-align:left}
.tellbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.tellbtn svg{width:20px;height:20px;color:#FFB3DC;flex:none}
.tellbtn b{display:block;font-size:14.5px;font-weight:600;background:var(--scoutw);-webkit-background-clip:text;background-clip:text;color:transparent}
.tellbtn small{display:block;font-size:12px;color:rgba(232,226,255,.6);margin-top:1px}
.me{display:flex;align-items:center;gap:10px;padding:12px 6px 0}
.me .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#FFB67A,#F0628E);display:grid;place-items:center;font-weight:700;font-size:13px}
.me b{display:block;font-size:13.5px;font-weight:600}.me small{display:block;font-size:12px;color:rgba(232,226,255,.55)}

/* ---------- window ---------- */
.win{position:relative;margin:12px 12px 12px 0;border-radius:26px;background:var(--win);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);overflow:hidden;min-width:0}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}
.view{display:none;min-height:100%;padding-bottom:60px}
.view.on{display:block;animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.band{position:absolute;left:0;right:0;top:0;height:330px;background:var(--band);-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent);pointer-events:none}
.col{position:relative;max-width:1180px;margin:0 auto;padding:0 44px}
.head{position:relative;display:flex;align-items:flex-start;gap:30px;padding:44px 0 26px}
.head .tx{flex:1;min-width:0}
.hello{font-size:15px;font-weight:500;color:var(--ink2)}
.h1{font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-.03em;margin-top:6px;max-width:720px}
.grad{background:var(--words);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:15.5px;color:var(--ink2);margin-top:8px;max-width:600px;line-height:1.5}
.scoutfloat{width:220px;height:220px;margin:-30px 10px -40px 0;flex:none;pointer-events:none}
.title{font-size:30px;font-weight:700;letter-spacing:-.03em;padding:40px 0 6px}
.titlesub{font-size:15px;color:var(--ink2);padding-bottom:22px}

/* ask bar */
.ask{position:relative;display:flex;align-items:center;gap:10px;height:62px;margin-top:22px;max-width:640px;padding:0 8px 0 18px;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 5px rgba(139,120,255,.12),0 20px 40px -20px rgba(60,50,160,.45)}
.ask input{flex:1;min-width:0;font-size:15.5px;color:var(--ink)}
.ask input::placeholder{color:var(--muted)}
.ask .mic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--vio);background:var(--vio-l)}
.ask .mic svg{width:20px;height:20px}
.ask .mic.rec{background:var(--red);color:#fff}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;color:var(--muted)}
.quick button{height:30px;padding:0 11px;border-radius:9px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);color:var(--ink2);font-weight:600;font-size:13px}
.quick button:hover{background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:13px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .15s var(--ease),filter .15s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px}
.btn.pri{background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.sec{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--hair2),0 1px 2px rgba(20,20,23,.05)}
.btn.sec:hover{box-shadow:0 0 0 1px rgba(109,85,253,.35),0 1px 2px rgba(20,20,23,.05)}
.btn.ghost{color:var(--muted);height:36px;padding:0 10px}
.btn.ghost:hover{color:var(--ink)}
.btn.sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:11px}
.btn.wide{width:100%}
.btn.ok{background:#22C55E;color:#fff;box-shadow:0 8px 20px -10px rgba(34,197,94,.8)}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--muted);box-shadow:0 0 0 1px var(--hair2)}
.icon-btn:hover{color:var(--ink)}
.icon-btn svg{width:18px;height:18px}

/* section heads */
.sh{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.sh .ic{width:40px;height:40px;border-radius:13px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:18px;flex:none}
.sh h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C}
.sh .sub{font-size:13.5px;color:var(--muted);font-weight:500}
.sh .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:700;background:#EEE5FC;color:#7C4FD6}
.badge.ok{background:var(--ok-l);color:var(--ok)}
.badge.amber{background:var(--amber-l);color:var(--amber)}
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow)}
/* ---------- check (modal) ---------- */
.veil{position:fixed;inset:0;z-index:50;background:rgba(10,6,24,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.veil.on{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:51;left:50%;top:50%;width:min(1040px,calc(100vw - 80px));height:min(700px,calc(100vh - 60px));transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;transition:transform .35s var(--spring),opacity .25s;border-radius:28px;background:var(--win);box-shadow:0 40px 100px -30px rgba(0,0,0,.7);display:grid;grid-template-columns:1fr 400px;overflow:hidden}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.stage{position:relative;background:radial-gradient(80% 60% at 50% 0%,#2B1D66,#120B28);display:grid;place-items:center;padding:28px}
.frame{position:relative;height:100%;max-height:560px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transition:aspect-ratio .35s var(--ease)}
.frame>img,.frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .poster{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.frame .poster .hook{font-size:7.5cqw}
.sizes{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.sizes button{height:32px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-size:12.5px;font-weight:600}
.sizes button.on{background:#fff;color:var(--ink)}
.navarr{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.navarr svg{width:20px;height:20px}.navarr.l{left:16px}.navarr.r{right:16px}
.navarr:disabled{opacity:.25;cursor:default}
.count{position:absolute;left:20px;top:18px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600}
.panel{display:flex;flex-direction:column;padding:24px 24px 0;overflow-y:auto}
.panel .x{position:absolute;right:18px;top:16px;z-index:2}
.panel h2{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.02em;padding-right:40px}
.panel .why{font-size:13.5px;color:var(--muted);margin-top:6px}
.lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
.cap{width:100%;min-height:76px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:14.5px;line-height:1.5;resize:vertical}
.cap:focus{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}
.when{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.when button{height:44px;min-width:0;padding:0 2px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2);display:grid;place-items:center;align-content:center;line-height:1.05}
.when button small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.when button b{font-size:15px}
.when button.on{background:var(--vio-l);box-shadow:inset 0 0 0 2px #8B7BFF;color:var(--vio)}
.when button.on small{color:var(--vio)}
.times{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.times button{height:34px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600}
.times button.on{background:var(--vio-l);box-shadow:inset 0 0 0 2px #8B7BFF;color:var(--vio)}
.where{display:flex;flex-wrap:wrap;gap:6px}
.where span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600}
/* official platform logos (brand-logos.js, 23 Oct) */
.blg{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;overflow:hidden;font-style:normal;vertical-align:middle}
.blg svg{display:block;width:100%;height:100%}
.blg.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.blg.fb{border-radius:50%;background:none}
.blg.gg{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.blg.gg svg{width:60%;height:60%}
.blg.tt{background:#000}
.blg.tt svg{width:58%;height:58%;filter:drop-shadow(-.8px -.6px 0 #25F4EE) drop-shadow(.8px .6px 0 #FE2C55)}
.blg.yt{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.blg.yt svg{width:72%;height:72%}
.blg.pfbig{width:34px;height:34px;border-radius:10px}.blg.pfbig.fb{border-radius:50%}
.blg.wpl{width:18px;height:18px;border-radius:5px}.blg.wpl.fb{border-radius:50%}
.pf{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.pf svg{width:13px;height:13px}
.note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.fixes{display:flex;flex-wrap:wrap;gap:6px}
.fixes button{height:34px;padding:0 12px;border-radius:10px;background:#F2F1F8;font-size:13px;font-weight:600;color:var(--ink2)}
.fixes button:hover{background:#E9E6F8}
.panel .go{position:sticky;bottom:0;margin-top:auto;padding:14px 0 16px;display:grid;gap:6px;background:linear-gradient(rgba(244,245,248,0),var(--win) 14px)}
.panel .go .btn.pri{height:48px;font-size:15px}
.panel .go .sub2{display:flex;justify-content:space-between}
.editor{font-size:13px;color:var(--muted);font-weight:600;text-decoration:none;align-self:center}
.editor:hover{color:var(--vio)}

/* ---------- results ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi{padding:20px 22px}
.kpi small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.kpi b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.kpi em{font-style:normal;font-size:13px;font-weight:700;color:var(--ok)}
.res2{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:16px}
.best{display:flex;gap:16px;padding:16px}
.best .vid{width:150px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;flex:none;background:#000}
.best .vid video{width:100%;height:100%;object-fit:cover}
.best h4{font-size:17px;font-weight:650;margin-top:4px}
.best p{font-size:14px;color:var(--ink2);margin-top:6px;line-height:1.5}
.learn{padding:18px 20px}
.learn h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C;margin-bottom:6px}
.learn li{list-style:none;display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--hair);font-size:14px;line-height:1.45}
.learn li:first-of-type{border-top:0}
.learn li span{font-size:18px}
.bars{display:flex;align-items:flex-end;gap:14px;height:120px;margin-top:14px}
.bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.bars i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(#B4A6FF,#7B61FF)}

/* ---------- brand kit ---------- */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kit .card{padding:18px}
.kit h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C;margin-bottom:12px}
.sw{display:flex;gap:8px}.sw i{width:52px;height:52px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fontdemo{font:700 30px Fraunces,serif;letter-spacing:-.01em}
.phgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.phgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prod{border-radius:14px;overflow:hidden;background:#F7F7FA}
.prod img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod div{padding:8px 10px;font-size:13px}.prod b{display:block;font-weight:600}.prod small{color:var(--muted)}
.synced{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ok);font-weight:600}

/* ---------- settings ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mode{position:relative;padding:18px;border-radius:22px;background:#fff;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:6px}
.mode.on{box-shadow:0 0 0 2px #8B7BFF,var(--shadow)}
.mode .tick{position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hair2);display:grid;place-items:center}
.mode.on .tick{background:var(--btn);box-shadow:none;color:#fff}
.mode .tick svg{width:14px;height:14px}
.mode .em{font-size:24px}
.mode b{font-size:16px;font-weight:650}
.mode p{font-size:13.5px;color:var(--ink2);line-height:1.5}
.mode .rec{align-self:flex-start;margin-top:4px}
.mode.locked{opacity:.75;cursor:default}
.mode .lockbar{margin-top:6px;font-size:12.5px;color:var(--muted)}
.mode .lockbar .pbar{width:100%;margin-top:6px}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:#fff;box-shadow:var(--shadow);gap:4px}
.seg button{height:38px;padding:0 18px;border-radius:10px;font-weight:600;color:var(--ink2)}
.seg button.on{background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
.rows{padding:6px 18px}
.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--hair)}
.row:first-child{border-top:0}
.row .t{flex:1}.row b{display:block;font-size:14.5px;font-weight:600}.row small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.tog{width:46px;height:28px;border-radius:14px;background:#D9D7E3;position:relative;transition:background .2s;flex:none}
.tog::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.tog.on{background:var(--vio)}.tog.on::after{transform:translateX(18px)}
.sizechips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sizechips span{font-size:12px;font-weight:700;padding:3px 8px;border-radius:7px;background:#F2F1F8;color:var(--ink2)}

/* toast + undo */
.toast{position:fixed;z-index:80;left:50%;bottom:28px;transform:translate(-50%,20px);display:flex;align-items:center;gap:14px;padding:11px 12px 11px 18px;border-radius:16px;background:#17151F;color:#fff;font-weight:600;font-size:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s,transform .4s var(--spring);overflow:hidden}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{height:34px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.12);color:#C9BEFF;font-weight:700}
.toast i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#8B7BFF,#F0628E);transform-origin:left}
.toast.on.undo i{animation:undobar 5s linear forwards}
@keyframes undobar{to{transform:scaleX(0)}}

/* the prototype's own controls */
.proto{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:12px;padding:6px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.proto span{width:100%;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:rgba(232,226,255,.45);padding:2px 8px 4px}
.proto button,.proto a{height:30px;padding:0 10px;border-radius:9px;color:rgba(232,226,255,.85);font-size:12.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.proto button:hover,.proto a:hover{background:rgba(255,255,255,.1);color:#fff}
/* ---------- polish (21 Oct): the earlier dashboard's sidebar magic ---------- */
@property --spkspin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spkspin{to{--spkspin:360deg}}
.spk{position:absolute;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:2;--dust:#fff;--dust-glow:rgba(196,180,255,.8)}
.spk .edge{position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:.6;background:conic-gradient(from var(--spkspin),transparent 0turn,transparent .7turn,rgba(214,204,255,.85) .84turn,rgba(255,255,255,.95) .87turn,transparent .97turn);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spkspin 6.5s linear infinite}
.spk u{position:absolute;opacity:0}
.spk .sk-st{left:var(--x);top:var(--y);width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);background:radial-gradient(circle,var(--dust) 0 14%,transparent 30%),linear-gradient(90deg,transparent,var(--dust) 50%,transparent) center/100% 1px no-repeat,linear-gradient(0deg,transparent,var(--dust) 50%,transparent) center/1px 100% no-repeat;filter:drop-shadow(0 0 3px var(--dust-glow));animation:spktwk var(--dur) ease-in-out var(--dl) infinite}
@keyframes spktwk{0%{opacity:0;transform:scale(0) rotate(0)}12%{opacity:1;transform:scale(1) rotate(25deg)}24%{opacity:.5;transform:scale(.6) rotate(50deg)}36%,100%{opacity:0;transform:scale(0) rotate(70deg)}}
.spk .sk-mo{bottom:3px;left:var(--x);width:var(--sz,2px);height:var(--sz,2px);border-radius:50%;background:var(--dust);box-shadow:0 0 5px 1px var(--dust-glow);animation:spkmote var(--dur) ease-in-out var(--dl) infinite}
@keyframes spkmote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.75}50%{transform:translate(var(--dx),-18px)}80%{opacity:.3}100%{opacity:0;transform:translate(0,-36px)}}
.ni>.spk{left:7px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:9px;display:none}
.ni.on>.spk{display:block}
.ni.on svg{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(109,85,253,.18),0 6px 14px rgba(109,85,253,.5)}
.ni .nl{--nl:#fff;display:inline-block}
.ni:hover .nl,.ni:focus-visible .nl{background:linear-gradient(90deg,var(--nl) 0 30%,#C9BDFF 40%,#FF9AD5 50%,#FFC08A 60%,var(--nl) 70% 100%);background-size:340% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nlsweep 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes nlsweep{to{background-position:0 0}}
.ni svg{transition:color .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.ni:not(.on):hover>svg{animation:nlicon 1.1s ease forwards}
@keyframes nlicon{30%{color:#FF9AD5;transform:scale(1.12) rotate(-6deg)}100%{transform:none}}
.tellbtn>.spk{inset:0}
.tellbtn:hover{background:rgba(255,255,255,.09)}
/* moving posts */
[data-post][draggable]{cursor:grab}[data-post].dragging{opacity:.35;cursor:grabbing}
.day.over{background:#F3EFFF!important;box-shadow:inset 0 0 0 2px #8B7BFF}
.calday.over{background:#F8F6FF;box-shadow:0 0 0 2px #8B7BFF,var(--shadow)}
.calday.over .cadd{background:#EFEBFF;color:#5B44EE}
/* the prototype's controls: small, at the very bottom */
.proto{margin:12px 0 0;padding:4px 6px;background:none;box-shadow:none;gap:0}
.proto span{width:auto;padding:0 6px 0 2px;font-size:10px}
.proto button,.proto a{height:26px;padding:0 7px;font-size:12px;color:rgba(232,226,255,.55)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ---------- chat with ClipMagic (back from V4's "Brief your Scout", 21 Oct) ---------- */
.chatgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.chatgrid>div{min-width:0}
.chathead{display:flex;align-items:flex-end;gap:16px;padding:40px 0 22px}
.chathead .tx{flex:1}
.chatcard{display:flex;flex-direction:column;height:calc(100vh - 196px);min-height:540px;overflow:hidden}
.chh{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--hair)}
.chh .av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#000;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #C9BDFF}
.chh .av video{width:100%;height:100%;object-fit:cover;transform:scale(1.32) translateY(4%)}
.chh b{display:block;font-size:15.5px;font-weight:650}
.chh small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.chh small i{width:7px;height:7px;border-radius:50%;background:#22C55E}
.clog{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.cm{max-width:80%;padding:12px 16px;border-radius:18px;font-size:14.5px;line-height:1.5;animation:fadein .3s var(--ease)}
.cm.me{align-self:flex-end;background:var(--btn);color:#fff;border-bottom-right-radius:6px}
.cm.sc{align-self:flex-start;background:#F3F2F8;color:var(--ink);border-bottom-left-radius:6px}
.cm .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cm .opts button{height:34px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-weight:600;font-size:13.5px;color:var(--vio)}
.cm .opts button:hover{box-shadow:0 0 0 1px #B9A8FF}
.cm .opts button.on{background:var(--vio);color:#fff;box-shadow:none}
.cm .opts.used button:not(.on){opacity:.45;pointer-events:none}
.cm .ok{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:var(--ok)}
.cm .ok svg{width:14px;height:14px}
.typing{display:flex;gap:4px;padding:4px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:#A7A3BC;animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{50%{opacity:.3;transform:translateY(-3px)}}
.cmedia{display:grid;gap:5px}
.cmedia>span{position:relative;width:76px;height:96px;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.2)}
.cmedia img,.cmedia video{width:100%;height:100%;object-fit:cover}
.cm.me:has(.cmedia){padding:6px;border-radius:16px;border-bottom-right-radius:6px}
.cidea{display:flex;gap:14px;align-items:flex-start;margin-top:10px;padding:10px;border-radius:16px;background:#fff;box-shadow:var(--shadow);max-width:430px}
.cidea .poster{width:108px;flex:none;border-radius:12px}
.cidea .poster .hook{font-size:9.6cqw}
.cidea .poster .type{font-size:10.5px;height:20px;padding:0 6px}
.cidea .poster .type svg{width:11px;height:11px}
.cidea .poster .wm{display:none}
.cidea .ct{flex:1;min-width:0;padding-top:2px}
.cidea b{display:block;font-size:15px;font-weight:650;line-height:1.3}
.cidea small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.cidea .cb{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cidea .kept{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:var(--ok)}
.cidea .kept svg{width:15px;height:15px}
.cidea .kept button{color:var(--vio);font-weight:600;font-size:13px;margin-left:4px}
.cchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 18px 0;font-size:13px;color:var(--muted)}
.cchips button{height:32px;padding:0 11px;border-radius:9px;background:#F5F4FA;color:var(--ink2);font-weight:600;font-size:13px}
.cchips button:hover{background:#EFEBFF;color:var(--vio)}
.composer{margin:10px 16px 16px;padding:10px 10px 10px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px #C9BDFF,0 0 0 5px rgba(139,120,255,.08)}
.composer textarea{display:block;width:100%;min-height:44px;max-height:130px;resize:none;font-size:15px;line-height:1.45;color:var(--ink)}
.composer textarea::placeholder{color:var(--muted)}
.ctools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.ctools button,.ctools label{height:32px;padding:0 10px;border-radius:9px;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;background:#fff}
.ctools button:hover,.ctools label:hover{color:var(--vio);box-shadow:0 0 0 1px #B9A8FF}
.ctools svg{width:15px;height:15px}
.ctools .rec{background:var(--red);color:#fff;box-shadow:none}
.ctools .send{margin-left:auto;width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
.ctools .send:hover{color:#fff;filter:brightness(1.06)}
.ctools .send svg{width:18px;height:18px}
.chats{display:grid;gap:2px}
.chats button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;text-align:left;font-size:14px;font-weight:600;color:var(--ink)}
.chats button:hover{background:#F7F6FB}
.chats button.on{background:#F3EFFF;color:var(--vio)}
.chats button svg{width:16px;height:16px;color:var(--faint);flex:none}
.chats button small{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
.chats button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.found button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 2px;border-top:1px solid var(--hair);text-align:left}
.found button:first-child{border-top:0}
.found .fi{width:40px;height:40px;border-radius:11px;overflow:hidden;display:grid;place-items:center;font-size:18px;background:#F5F4FA;flex:none}
.found .fi img{width:100%;height:100%;object-fit:cover}
.found .t{flex:1;min-width:0}
.found b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.found small{display:block;font-size:12.5px;color:var(--muted)}
.found svg{width:16px;height:16px;color:var(--faint);flex:none}
.side-card{padding:16px 18px;margin-top:16px}
.side-card h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C;margin-bottom:10px}
.side-card .note{margin-top:10px}

/* ---------- add your own photo or video to a day ---------- */
.mini{position:fixed;z-index:52;left:50%;top:50%;width:min(480px,calc(100vw - 40px));padding:24px;border-radius:26px;background:#fff;box-shadow:0 40px 100px -30px rgba(0,0,0,.7);transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;transition:transform .35s var(--spring),opacity .25s}
.mini.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.mini h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.mini p.sub{font-size:14px;color:var(--muted);margin-top:4px}
.addopt{display:flex;align-items:center;gap:14px;width:100%;margin-top:10px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -10px rgba(24,24,27,.18);text-align:left;cursor:pointer;transition:box-shadow .15s}
.addopt:hover{box-shadow:0 0 0 1.5px #B9A8FF,0 8px 20px -10px rgba(109,85,253,.35)}
.addopt .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none;background:#F6F4FF}
.addopt b{display:block;font-size:15.5px;font-weight:650}
.addopt small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.mini .cancel{display:block;width:100%;height:44px;margin-top:12px;border-radius:13px;font-weight:600;color:var(--muted)}
.mini .cancel:hover{background:#F4F4F7;color:var(--ink)}
.upframe>img,.upframe>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.upframe .brandmark{position:absolute;right:6%;top:4%;width:24%;height:6%;background:#fff;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));transition:opacity .2s}
.upframe.nobrand .brandmark{opacity:0}
.when.nine{grid-template-columns:repeat(9,minmax(0,1fr))}
.when .wk0{background:#FAFAFC}
.capbar{display:flex;justify-content:flex-end;margin-top:6px}
.capbar button{height:30px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--vio);background:var(--vio-l)}
.wherepick{display:flex;flex-wrap:wrap;gap:6px}
.wherepick button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px 0 6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600;opacity:.45}
.wherepick button.on{opacity:1;box-shadow:inset 0 0 0 2px #8B7BFF}
.brandrow{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:14px}
.brandrow .t{flex:1}.brandrow b{display:block;font-weight:600}.brandrow small{display:block;font-size:12.5px;color:var(--muted)}
.pill.up{background:#FFE7F0;color:#BE185D}
.wk .addown{margin-top:8px;color:var(--vio)}

/* ================= the V4 rebuild (22 Oct): Home · Ready to check · Calendar · Library ================= */
.btn.dark{background:#17151F;color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.btn.dark:hover{background:#26232F}
.btn.soft{background:var(--vio-l);color:var(--vio);box-shadow:inset 0 0 0 1px rgba(109,85,253,.18)}
.btn.soft:hover{background:#E6E0FF}
.btn.sec2{background:#F1F1F5;color:var(--ink)}
.btn.sec2:hover{background:#E9E8F0}
.btn.sec2.on{background:var(--vio-l);color:var(--vio)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.link{display:inline-flex;align-items:center;gap:4px;color:var(--vio);font-weight:600;font-size:14px;white-space:nowrap}
.link:hover{text-decoration:underline}
.lnk{color:var(--vio);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.seg.sm{padding:3px;border-radius:12px}
.seg.sm button{height:30px;padding:0 12px;font-size:13px;border-radius:9px}
.sh.mt{margin-top:36px}
.sh .sub{white-space:nowrap}
kbd{font:700 10.5px/1 Inter,sans-serif;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.22);color:inherit;margin-left:6px;opacity:.8}
.btn.sec2 kbd,.btn.sec kbd{background:rgba(24,24,27,.06);color:var(--muted)}
.spark{width:17px;height:17px;flex:none}
.spin2{width:15px;height:15px;border-radius:50%;border:2px solid rgba(109,85,253,.22);border-top-color:var(--vio);animation:spin .9s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* sidebar */
.ws{margin-bottom:14px}
.ws .chev{margin-left:auto;width:16px;height:16px;color:rgba(232,226,255,.45)}
.ni .nl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ni .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(232,226,255,.22);border-top-color:#C9BDFF;animation:spin .9s linear infinite;margin-left:auto;flex:none}
.ni .spin+.bd{margin-left:8px}
.ni .bd.ok{background:rgba(52,211,153,.16);color:#86EFAC}
.ni .bd.tick{background:rgba(255,255,255,.08);color:#C9BDFF;padding:2px 7px}
.side .nav+.sp{min-height:12px}

/* a cheap preview: photo + hook + logo */
.poster{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#ddd;container-type:inline-size}
.poster>img,.poster>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(20,8,8,.72))}
.poster .hook{position:absolute;left:8%;right:8%;bottom:10%;font:700 8.6cqw/1.08 Fraunces,Georgia,serif;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.poster .wm{position:absolute;right:7%;top:6%;width:22%;height:6%;background:#fff;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.poster .type{position:absolute;left:6%;top:5.5%;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;background:rgba(15,10,30,.55);color:#fff;font-size:12px;font-weight:700}
.poster .type svg{width:13px;height:13px}
.poster .dots{position:absolute;left:0;right:0;bottom:4%;display:flex;justify-content:center;gap:5px}
.poster .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.poster .dots i:first-child{background:#fff}
.poster .cnt{position:absolute;right:6%;top:13%;height:22px;padding:0 8px;border-radius:999px;background:rgba(15,10,30,.55);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center}

/* ---------- home: your week ---------- */
.head{padding-bottom:18px}
.ask{max-width:680px}
.ask .btn.pri{height:46px;border-radius:14px;padding:0 18px}
.quick label{height:30px;padding:0 11px;border-radius:9px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);color:var(--ink2);font-weight:600;font-size:13px;display:inline-flex;align-items:center;cursor:pointer}
.quick label:hover{background:#fff}
.wkcard{padding:14px}
.wkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wd{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 8px 12px;border-radius:18px;transition:background .2s,box-shadow .2s}
.wd.today{background:#F5F3FF;box-shadow:inset 0 0 0 1.5px #D9D0FF}
.wd.over{background:#EFEBFF;box-shadow:inset 0 0 0 2px #8B7BFF}
.wdh{display:flex;align-items:baseline;gap:6px;padding:0 3px;min-height:22px}
.wdh span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wdh b{font-size:17px;font-weight:700}
.wdh .bg{font-size:14px;line-height:1}
.wdh em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:var(--vio);padding:2px 6px;border-radius:6px;align-self:center}
.wd.past .wdh b{color:var(--faint)}
.wt{position:relative;display:block;width:100%;height:138px;border-radius:13px;overflow:hidden;background:#EEE;text-align:left;flex:none}
.wt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
button.wt:hover>img{transform:scale(1.04)}
.wt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(10,6,24,.45));pointer-events:none}
.wd.past .wt>img{filter:saturate(.75)}
.wchip{position:absolute;z-index:2;left:6px;bottom:6px;max-width:calc(100% - 12px);display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 8px;border-radius:8px;background:rgba(15,10,30,.66);color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.wchip svg{width:12px;height:12px;flex:none}
.st-posted .wchip{background:rgba(255,255,255,.94);color:var(--ok)}
.st-ok .wchip{background:rgba(98,73,248,.94)}
.st-ready .wchip{background:#FFB020;color:#3B2500}
.st-making .wchip{background:rgba(255,255,255,.94);color:var(--vio)}
.wt .for{position:absolute;z-index:2;left:6px;top:6px;height:21px;padding:0 7px;border-radius:7px;background:#fff;color:#A21CAF;font-size:10.5px;font-weight:800;display:flex;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.wt .for.own{color:#BE185D}
.wt .for.cut{color:#92400E}
.wt .more{position:absolute;z-index:2;right:6px;top:6px;height:21px;padding:0 7px;border-radius:7px;background:rgba(15,10,30,.66);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center}
.wt .mk{position:absolute;inset:0;z-index:1;background:rgba(30,18,70,.38)}
.wt .mk::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:250% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.wt .mk i{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#8B7BFF,#F0628E);transition:width .5s linear}
.wt.gap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:repeating-linear-gradient(135deg,#F7F5FF 0 8px,#FCFBFF 8px 16px);box-shadow:inset 0 0 0 1.5px #E4DEFF;color:var(--vio);font-weight:600;font-size:12.5px;transition:background .2s,box-shadow .2s}
.wt.gap::after{display:none}
.wt.gap i{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--vio);display:grid;place-items:center;font-style:normal;font-size:19px;font-weight:600;box-shadow:0 0 0 1px rgba(109,85,253,.22),0 2px 6px rgba(24,24,27,.06);transition:transform .25s var(--spring),background .2s,color .2s}
.wt.gap i svg,.pt.new i svg,.lup i svg{width:15px;height:15px}
.wt.gap:hover{background:#F3EFFF;box-shadow:inset 0 0 0 1.5px #B9A8FF}
.wt.gap:hover i{background:var(--btn);color:#fff;transform:scale(1.08)}
.wt.none{background:#F6F6F9}
.wt.none::after{display:none}
.wtt{font-size:12.5px;font-weight:600;line-height:1.3;padding:0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.wtt.muted{color:var(--faint);font-weight:500}
.wkfoot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:12px -14px -14px;padding:12px 16px;border-top:1px solid var(--hair)}
.rdy{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.rdy b{color:var(--ink)}
.rdy.ok{color:var(--muted)}
.rdy.ok svg{width:16px;height:16px;color:var(--ok)}
.dotp{width:9px;height:9px;border-radius:50%;background:#FFB020;box-shadow:0 0 0 4px rgba(255,176,32,.2);flex:none}
.fillq{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}

/* ---------- home: top ideas (V4 cards) ---------- */
.tis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ti{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:16px;border-radius:24px;background:#fff;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s,opacity .25s}
.ti:hover{transform:translateY(-2px)}
.ti.out{opacity:0;transform:scale(.96)}
.ti.first::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.ti.first{box-shadow:0 20px 40px -22px rgba(240,98,142,.55),var(--shadow)}
.ribbon{position:absolute;right:16px;top:-11px;height:22px;padding:0 10px;border-radius:8px;background:linear-gradient(90deg,#A97BFF,#FF7AA8);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.09em;display:flex;align-items:center;box-shadow:0 6px 14px -6px rgba(240,98,142,.7)}
.tirow{display:flex;gap:16px;align-items:flex-start}
.tth{position:relative;width:108px;height:108px;border-radius:16px;overflow:hidden;flex:none;background:#eee}
.tth img{width:100%;height:100%;object-fit:cover}
.tth .k{position:absolute;left:6px;bottom:6px;width:24px;height:24px;border-radius:8px;background:rgba(15,10,30,.6);color:#fff;display:grid;place-items:center}
.tth .k svg{width:13px;height:13px}
.ttx{min-width:0;flex:1}
.ttx b{font-size:18.5px;line-height:1.27;font-weight:700;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.twhy{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tacts{display:flex;gap:8px}
.tacts .btn.pri{flex:1;height:44px;font-size:14.5px}
.bm{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--hair2);color:var(--ink2);flex:none}
.bm svg{width:17px;height:17px}
.bm:hover{color:var(--vio);box-shadow:0 0 0 1px #B9A8FF}
.tstate{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:13px;background:#F5F3FF;color:var(--vio);font-weight:600;font-size:13.5px;white-space:nowrap}
.tstate .pbar{flex:1;width:auto;margin-right:8px}
.tstate.ready{background:var(--amber-l);color:var(--amber)}
.tstate.ready svg{width:16px;height:16px}
.tstate .btn{margin-left:auto}
.pbar{height:6px;border-radius:3px;background:#E7E3F7;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:inherit;background:var(--btn);transition:width .5s linear}
.tnone{grid-column:1/-1;padding:26px;text-align:center;color:var(--muted)}

/* ---------- home: make your own ---------- */
.myo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;padding:18px 20px;overflow:hidden}
.lbl2{font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:10px}
.prods2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pt{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#eee;text-align:left}
.pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pt:hover img{transform:scale(1.06)}
.pt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.68))}
.pt span{position:absolute;left:9px;right:8px;bottom:8px;z-index:1;color:#fff;font-size:12.5px;font-weight:700;line-height:1.2}
.pt small{display:block;font-weight:500;opacity:.88;font-size:11.5px;margin-top:1px}
.pt.new{background:#FBFAFF;box-shadow:inset 0 0 0 1.5px #E4DEFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.pt.new::after{display:none}
.pt.new i{width:30px;height:30px;border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px;box-shadow:var(--btn-sh)}
.pt.new b{font-size:12.5px;font-weight:650}.pt.new small{color:var(--muted);font-size:11px}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chips2 button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:13px;background:#F4F3F8;font-weight:600;font-size:14px;color:var(--ink);transition:background .15s,color .15s}
.chips2 button:hover{background:#EFEBFF;color:var(--vio)}
.clips{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:16px;margin:2px -20px -18px;padding:16px 20px;border-top:1px solid var(--hair);background:linear-gradient(90deg,#FFF6FA,#F6F3FF)}
.clips .ic{width:48px;height:48px;border-radius:15px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:22px;flex:none}
.clips .tx{flex:1;min-width:0}
.clips b{display:block;font-size:15px;font-weight:650}
.clips small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.clips .acts{display:flex;gap:8px;flex:none}
.clips.busy .acts{visibility:hidden}
.clips .prog{position:absolute;inset:0;display:none;align-items:center;gap:14px;padding:16px 20px;background:linear-gradient(90deg,#FFF6FA,#F6F3FF)}
.clips.busy .prog{display:flex}
.clips .prog i.ic2{width:48px;height:48px;border-radius:15px;background:#fff;display:grid;place-items:center;font-size:22px;flex:none;font-style:normal;animation:cutspin 1.2s ease-in-out infinite;box-shadow:var(--shadow)}
@keyframes cutspin{50%{transform:rotate(-12deg) scale(1.08)}}
.clips .prog .pbar{width:180px;margin-left:auto}
.clips .prog .pbar i{width:0;transition:width 2.6s linear}
.clips.busy .prog .pbar i{width:100%}
.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%,100%{box-shadow:none}25%,60%{box-shadow:inset 0 0 0 2px #8B7BFF}}

/* ---------- home: upcoming opportunities ---------- */
.opps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.opp{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:22px;background:var(--bg)}
.opp .dt{width:60px;height:66px;border-radius:14px;background:#fff;overflow:hidden;flex:none;box-shadow:0 8px 18px -10px rgba(24,24,27,.35),0 0 0 1px rgba(24,24,27,.04);text-align:center}
.opp .dt small{display:block;background:var(--c);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 0}
.opp .dt b{display:block;font-size:25px;font-weight:700;line-height:44px;letter-spacing:-.02em}
.opp .t{flex:1;min-width:0}
.opp .t b{display:block;font-size:16px;font-weight:650}
.opp .t small{display:block;font-size:13px;color:var(--ink2);opacity:.75;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp .go{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:13.5px;font-weight:700;color:var(--c)}
.opp .go svg{width:14px;height:14px}
.opp .go:hover{text-decoration:underline}
.opp .go.dim{opacity:.7}
.opp .cd2{flex:none;padding-left:14px;border-left:1px solid rgba(24,24,27,.08);text-align:center;color:var(--c);line-height:1}
.opp .cd2 b{display:block;font-size:24px;font-weight:700}
.opp .cd2 small{display:block;font-size:11px;font-weight:600;margin-top:4px;color:var(--ink2);opacity:.7}

/* ---------- ready to check ---------- */
.rkhead{position:relative;display:flex;align-items:flex-start;gap:10px;padding:40px 0 20px}
.rkhead .tx{flex:1;min-width:0}
.rkhead .titlesub b{color:var(--vio);font-weight:600}
.how{position:relative;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;margin-bottom:22px;border-radius:20px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px #fff,0 12px 30px -20px rgba(60,50,160,.4)}
.how .stp{display:flex;gap:10px;flex:1;min-width:0}
.how .stp i{width:26px;height:26px;border-radius:50%;background:var(--btn);color:#fff;font-style:normal;font-weight:700;font-size:13px;display:grid;place-items:center;flex:none;box-shadow:var(--btn-sh)}
.how b{display:block;font-size:14px;font-weight:650}
.how small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.how .ar{color:#B9A8FF;font-size:18px;flex:none}
.rk{position:relative;display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.rk>div{min-width:0}
.rkwk{padding:14px}
.rkwk .hd{display:block}
.rkwk .hd b{display:block;font-size:14.5px;font-weight:650}.rkwk .hd span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.rkdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:10px}
.rkd{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-radius:10px;font-size:11px;color:var(--muted);font-weight:600}
.rkd b{font-size:15px;color:var(--ink)}
.rkd s{text-decoration:none;width:20px;height:20px;border-radius:50%;margin-top:4px;display:grid;place-items:center;font-size:11px;font-weight:800}
.rkd.ok s{background:var(--btn);color:#fff}
.rkd.chk s{box-shadow:inset 0 0 0 2px #8B7BFF;background:radial-gradient(circle,#8B7BFF 0 4px,transparent 4.5px)}
.rkd.mk s{border:2px solid #DCD4FF;border-top-color:var(--vio);animation:spin 1s linear infinite}
.rkd.gap s{box-shadow:inset 0 0 0 1.5px var(--hair2);color:var(--faint)}
.rkd.gap{cursor:pointer}.rkd.gap:hover{background:#F5F3FF}
.rkd.on{background:#F3EFFF}
.rkfill{width:100%;height:38px;margin-top:10px;border-radius:12px;background:#F1EEFF;color:var(--vio);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.rkfill:hover{background:#E9E3FF}
.rkfull{font-size:12.5px;color:var(--ok);font-weight:600;margin-top:10px;text-align:center}
.rkl h4,.rkmk h4{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px 6px}
.rkl h4.mfy{color:#A21CAF}
.rki{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:16px;text-align:left;transition:background .15s,box-shadow .15s}
.rki:hover{background:rgba(255,255,255,.75)}
.rki.on{background:#fff;box-shadow:var(--shadow)}
.rki .th{position:relative;width:44px;height:56px;border-radius:10px;overflow:hidden;flex:none;background:#eee}
.rki .th img{width:100%;height:100%;object-fit:cover}
.rki b{display:block;font-size:14.5px;font-weight:650;line-height:1.25}
.rki small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rkmk{margin-top:18px;padding:4px 10px 10px;border-radius:20px;background:linear-gradient(#1D1636,#130E26);color:#fff}
.rkmk:empty{display:none}
.rkmk h4{color:#C9BDFF;margin:10px 0 6px 4px}
.rkmk h4 .spin2{width:13px;height:13px;border-color:rgba(201,189,255,.25);border-top-color:#C9BDFF}
.mrow{display:flex;gap:10px;align-items:center;padding:8px;border-radius:14px}
.mrow+.mrow{margin-top:2px}
.mrow:first-of-type{background:rgba(255,255,255,.07)}
.mrow .th{position:relative;width:42px;height:52px;border-radius:9px;overflow:hidden;flex:none;background:#333}
.mrow .th img{width:100%;height:100%;object-fit:cover;opacity:.7}
.mrow .tx{flex:1;min-width:0}
.mrow b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow small{display:block;font-size:12px;color:rgba(232,226,255,.62);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow small em{font-style:normal;color:#F9A8D4;font-weight:700}
.mbar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin-top:7px;overflow:hidden}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,#8B7BFF,#F0628E);transition:width .5s linear}
.rkv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;padding:22px;align-items:start}
.stage2{position:relative;width:320px;height:560px;border-radius:24px;background:radial-gradient(90% 60% at 50% 0%,#40308C,#1A1240 75%);display:grid;place-items:center;padding-bottom:30px;overflow:hidden}
.phone{position:relative;width:248px;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 0 6px #0D0A18,0 30px 60px -20px rgba(0,0,0,.85);transition:width .35s var(--ease)}
.phone>img,.phone>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone>.poster{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.phone .redo{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(20,10,48,.6);color:#fff;font-weight:700;font-size:14px;text-align:center}
.phone .redo::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);background-size:250% 100%;animation:shim 1.2s linear infinite}
.stage2 .sizes{bottom:14px;padding:0 10px;flex-wrap:wrap}
.stage2 .sizes button{height:30px;font-size:12px;padding:0 10px}
.rkd2{min-width:0;padding-top:6px}
.rk-n{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.rk-k{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 8px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px var(--hair2);color:var(--ink);font-size:12.5px;font-weight:700}
.rk-k svg{width:14px;height:14px;color:var(--vio)}
.rk-k i{font-style:normal;font-weight:600;color:var(--muted)}.rk-k i::before{content:"·";margin:0 5px 0 1px}
.rk-of{font-size:12.5px}
.srcl{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--vio)}
.srcl .si{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--vio);color:#fff;font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.srcl .si svg{width:13px;height:13px}
.srcl.mfy{color:#A21CAF}.srcl.mfy .si{background:linear-gradient(135deg,#D946EF,#A21CAF)}
.srcl.cut{color:#92400E}.srcl.cut .si{background:#D97706}
.rkd2 h2{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin-top:8px}
.posts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:14.5px;color:var(--ink2)}
.posts b{color:var(--ink);font-weight:650}
.chg{color:var(--vio);font-weight:600;font-size:13.5px;padding:2px 4px;border-radius:6px}
.chg:hover{background:var(--vio-l)}
.pps{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#F4F3F8;font-size:12.5px;font-weight:600;color:var(--ink)}
.pp i{width:8px;height:8px;border-radius:50%}
.whenbox{margin-top:12px;padding:12px;border-radius:16px;background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair)}
.whenbox .when{grid-template-columns:repeat(10,minmax(0,1fr))}
.whenbox .when button{height:46px}
.whybox{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;background:#FAF9FF;box-shadow:inset 0 0 0 1px #ECE8FF;font-size:14px;color:var(--ink2);line-height:1.45}
.whybox .spark{width:16px;height:16px;color:var(--vio);margin-top:2px}
.capt{margin-top:14px;font-size:14px;color:var(--ink2);line-height:1.5}
.capt b{color:var(--ink)}
.capt .cap{margin-top:6px;min-height:70px}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;max-width:380px}
.rbtns .btn{height:50px;font-size:15px;border-radius:15px}
.rbtns .btn svg{width:17px;height:17px}
.fixrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;max-width:520px}
.fixrow button{height:34px;padding:0 12px;border-radius:10px;background:#F2F1F8;font-size:13px;font-weight:600;color:var(--ink2)}
.fixrow button:hover{background:#E9E6F8;color:var(--vio)}
.fixrow .editor{margin-left:6px}
.rkv .note{margin-top:14px}
.rkdone{padding:64px 40px;text-align:center}
.rkdone .big{font-size:46px}
.rkdone h2{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-top:10px}
.rkdone p{font-size:15px;color:var(--ink2);margin:8px auto 0;max-width:440px;line-height:1.5}
.rkdone .row2{display:flex;justify-content:center;gap:10px;margin-top:22px}

/* ---------- calendar (month) ---------- */
.ccard{padding:18px 20px 20px}
.csug{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:16px;background:linear-gradient(90deg,#FBF2FF,#F3F0FF);box-shadow:inset 0 0 0 1px #EEE6FF;font-size:14.5px;color:var(--ink2);margin-bottom:16px;min-height:56px}
.csug b{color:var(--ink)}
.csug .btn{margin-left:auto}
.csug>svg{width:18px;height:18px;color:var(--ok);flex:none}
.csug .av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#000;flex:none}
.csug .av video{width:100%;height:100%;object-fit:cover;transform:scale(1.32) translateY(4%)}
.cmh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cmh h2{font-size:24px;font-weight:700;letter-spacing:-.02em;min-width:200px;text-align:center}
.circ{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--hair2);display:grid;place-items:center;color:var(--ink2)}
.circ svg{width:16px;height:16px}
.circ:disabled{opacity:.35;cursor:default}
.ckey{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.ckey span{display:inline-flex;align-items:center;gap:6px}
.ckey i{width:10px;height:10px;border-radius:3px}
.cwd{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:6px}
.cwd span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-left:8px}
.cdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cd{position:relative;min-height:106px;padding:8px;border-radius:14px;background:#F8F8FA;box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:4px;min-width:0}
.cd.out{opacity:.4}
.cd.past{background:#FBFBFC}
.cd.today{background:#fff;box-shadow:inset 0 0 0 2px #8B7BFF}
.cd .n{font-size:14px;font-weight:700;color:var(--ink2);margin-bottom:2px;height:24px;display:flex;align-items:center}
.cd.today .n{width:24px;justify-content:center;border-radius:50%;background:var(--vio);color:#fff;font-size:12.5px}
.cd.past .n{color:var(--faint)}
.cd.free{cursor:pointer;transition:background .15s,box-shadow .15s}
.cd.free:hover{background:#fff;box-shadow:inset 0 0 0 1.5px #C9BDFF}
.cd.free::after{content:"+ Add";position:absolute;right:9px;top:10px;font-size:11.5px;font-weight:700;color:var(--vio);opacity:0;transition:opacity .15s}
.cd.free:hover::after{opacity:1}
.cd.quiet{background:repeating-linear-gradient(135deg,#F4F1FF 0 8px,#FBFAFF 8px 16px);box-shadow:inset 0 0 0 1px #E6E0FF}
.cd.over{background:#F3EFFF;box-shadow:inset 0 0 0 2px #8B7BFF}
.cd .qd{margin-top:auto;font-size:11.5px;font-weight:700;color:var(--vio)}
.cc{display:flex;align-items:center;gap:5px;width:100%;height:24px;padding:0 6px 0 3px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:11.5px;font-weight:600;text-align:left;min-width:0;flex:none;color:var(--ink)}
.cc img{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:none}
.cc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cc:hover{box-shadow:0 0 0 1.5px #B9A8FF}
.cc.ok{box-shadow:0 0 0 1.5px #8B7BFF;color:#4B36D6}
.cc.ready{box-shadow:0 0 0 1.5px #FFB020;background:#FFF8EA;color:#8A4B00}
.cc.making{border:1.5px dashed #B9A8FF;box-shadow:none;background:#F7F5FF;color:var(--vio)}
.cc.posted::after{content:"";width:6px;height:6px;border-radius:50%;background:#22C55E;flex:none}
.cc.own{box-shadow:0 0 0 1.5px #F9A8D4;background:#FFF5FA;color:#9D174D}
.cc.big{background:#FFEFD6;box-shadow:none;color:#9A4A06;font-weight:700;padding-left:7px;cursor:default}
.cc.big:hover{box-shadow:none}
[data-post][draggable]{cursor:grab}[data-post].dragging{opacity:.35;cursor:grabbing}

/* ---------- library ---------- */
#libTabs{margin-bottom:20px}
.lsec{margin-bottom:28px}
.lsec>h3{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C;margin-bottom:12px}
.lsec>h3 span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:13.5px}
.lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.lt{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#eee;box-shadow:var(--shadow)}
.lt>img,.lt>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lt .tg{position:absolute;z-index:1;left:8px;top:8px;height:22px;padding:0 8px;border-radius:7px;background:rgba(15,10,30,.62);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px}
.lt .tg.new{background:#fff;color:#BE185D}
.lt .hov{position:absolute;z-index:2;left:8px;right:8px;bottom:8px;display:grid;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease)}
.lt:hover .hov,.lt:focus-within .hov{opacity:1;transform:none}
.lt .hov button{height:32px;border-radius:10px;background:#fff;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lt .hov button.p{background:var(--btn);color:#fff}
.lt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,6,24,.55));opacity:0;transition:opacity .2s;pointer-events:none}
.lt:hover::after{opacity:1}
.lt.made{cursor:pointer}
.lt.made .cap2{position:absolute;z-index:1;left:10px;right:10px;bottom:9px;color:#fff;font-size:12.5px;font-weight:650;line-height:1.25}
.lt.made::after{opacity:1}
.lt .stc{position:absolute;z-index:1;right:8px;top:8px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:700;display:flex;align-items:center;background:#fff;color:var(--ok)}
.lt .stc.ready{background:#FFB020;color:#3B2500}.lt .stc.ok{background:var(--vio);color:#fff}
.lup{aspect-ratio:4/5;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#FBFAFF;box-shadow:inset 0 0 0 1.5px #E4DEFF;color:var(--vio);font-weight:600;font-size:13px;padding:12px;cursor:pointer}
.lup i{width:34px;height:34px;border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center;font-style:normal;font-size:20px;box-shadow:var(--btn-sh)}
.lup small{color:var(--muted);font-weight:500;font-size:12px}
.lqr{aspect-ratio:4/5;overflow:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 12px;text-align:center;background:radial-gradient(90% 70% at 50% 0%,#F1ECFF,#FBFAFF 70%);box-shadow:inset 0 0 0 1.5px #E4DEFF}
.lqr-c{display:block;flex:none;width:96px;height:96px;margin-bottom:8px;padding:7px;border-radius:14px;background:#fff;box-shadow:0 10px 22px -14px rgba(60,40,140,.5),0 0 0 1px var(--hair2)}
.lqr-c .qr{display:block;width:100%!important;height:100%!important;margin:0!important;padding:0!important;box-shadow:none!important;position:static!important}
.lqr b{font-size:13px;color:var(--ink)}.lqr small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.lup.drag{background:#EFEBFF;box-shadow:inset 0 0 0 2px #8B7BFF}
.lsaved{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lempty{padding:24px;border-radius:18px;background:#fff;box-shadow:var(--shadow);color:var(--muted);font-size:14px;grid-column:1/-1}

/* ---------- brand kit: your business ---------- */
.bizc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.bizc .card{padding:18px}
.bizc h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2C333C;margin-bottom:12px}
.sel{width:100%;height:46px;padding:0 44px 0 14px;border-radius:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D55FD' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;box-shadow:0 0 0 1px var(--hair2);font-weight:600;font-size:14.5px;cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow .15s}
.sel:hover{box-shadow:0 0 0 1.5px #C9BDFF}
.sel:focus{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}
.bizc .goal{font-size:17px;font-weight:650}
.carefulrow{display:flex;align-items:center;gap:12px}
.carefulrow b{flex:1;font-size:17px;font-weight:650}
.carefulrow b em{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;background:var(--amber-l);color:var(--amber);margin-left:6px;vertical-align:2px}
.bizc .card.on{box-shadow:0 0 0 2px #FDBA74,var(--shadow)}

/* settings extras */
.mode .lockbar b{color:var(--ink)}
.setrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.setrow .note{margin:0}

/* one-time tick before the first clips, and their own Instagram videos */
.tickbox{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -10px rgba(24,24,27,.18);cursor:pointer}
.tickbox input{position:absolute;opacity:0;pointer-events:none}
.tickbox .bx{width:24px;height:24px;border-radius:8px;box-shadow:inset 0 0 0 2px #C9C5D6;flex:none;display:grid;place-items:center;color:#fff;transition:background .15s,box-shadow .15s}
.tickbox .bx svg{width:15px;height:15px;opacity:0}
.tickbox input:checked+.bx{background:var(--btn);box-shadow:none}
.tickbox input:checked+.bx svg{opacity:1}
.tickbox b{display:block;font-size:15px;font-weight:650}
.tickbox small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.mini .btn.pri.wide{margin-top:16px;height:46px}
.igrow{display:flex;align-items:center;gap:14px;width:100%;margin-top:10px;padding:10px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -10px rgba(24,24,27,.18);text-align:left}
.igrow:hover{box-shadow:0 0 0 1.5px #B9A8FF,0 8px 20px -10px rgba(109,85,253,.35)}
.igrow img{width:52px;height:68px;border-radius:10px;object-fit:cover;flex:none}
.igrow b{display:block;font-size:14.5px;font-weight:650}
.igrow small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.igrow .go2{margin-left:auto;color:var(--vio);font-weight:700;font-size:13px;white-space:nowrap}
/* planning a sale day: ask first, never make up an offer (Josh, 22 Oct) */
.pback{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 11px 0 6px;border-radius:10px;background:#F4F4F7;font-size:13.5px;font-weight:700;margin-bottom:10px}
.pback svg{width:16px;height:16px}
.addopt .why{display:block;font-size:12.5px;color:var(--vio);font-weight:600;margin-top:3px}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pchips button{height:40px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-weight:600;font-size:14px}
.pchips button:hover{box-shadow:0 0 0 1.5px #B9A8FF;color:var(--vio)}
.pin{display:flex;gap:8px;margin-top:12px}
.pin input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:13px;box-shadow:0 0 0 1px var(--hair2);font-size:14.5px}
.pin input:focus{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}
.ppct{display:flex;gap:6px;margin-top:8px}
.ppct button{flex:1;height:36px;border-radius:11px;box-shadow:0 0 0 1px var(--hair2);font-weight:700;font-size:13px}
.ppct button:hover{background:var(--vio-l);color:var(--vio)}
/* when each post goes out, on the When step (23 Oct, Josh) */
.pgo{padding:2px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -10px rgba(24,24,27,.18)}
.pgo-i{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.pgo-i:first-child{border-top:0}
.pgo-i>i{width:34px;height:34px;border-radius:10px;background:#F6F4FF;display:grid;place-items:center;font-style:normal;font-size:16px;flex:none}
.pgo-tx{flex:1;min-width:0;text-align:left}
.pgo-tx b{display:block;font-size:14.5px;font-weight:650}
.pgo-tx small{display:block;font-size:13px;color:var(--muted)}
.pgo-t{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 11px;border-radius:11px;background:#F4F2FB;font-size:14px;font-weight:700;color:var(--ink);flex:none}
.pgo-t svg{width:14px;height:14px;color:var(--muted)}
.pgo-t svg:last-child{width:12px;height:12px;transition:transform .2s}
.pgo-i.open .pgo-t{background:var(--vio-l);color:var(--vio)}
.pgo-i.open .pgo-t svg{color:var(--vio)}
.pgo-i.open .pgo-t svg:last-child{transform:rotate(180deg)}
.pgo-pick{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 12px 46px}
.pgo-pick button{height:32px;padding:0 9px;border-radius:10px;background:#F4F2FB;font-size:13px;font-weight:600;color:var(--ink2)}
.pgo-pick button.on{background:var(--vio);color:#fff}
.pgo-n{display:flex;align-items:flex-start;gap:7px;margin-top:9px;font-size:13px;color:var(--muted);line-height:1.45;text-align:left}
.pgo-n svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--vio)}
/* the plan rows: date + time buttons, leave one out (23 Oct, Josh) */
.pgo-i{align-items:flex-start}
.pgo-i>i{margin-top:2px}
.pgo-bs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pgo .pgo-t{height:30px;padding:0 9px 0 10px;border-radius:10px;font-size:13.5px;gap:5px}
.pgo .pgo-t svg{width:13px;height:13px}
.pgo .pgo-t.open{background:var(--vio-l);color:var(--vio)}
.pgo .pgo-t.open svg{color:var(--vio)}
.pgo .pgo-t.open svg:last-child{transform:rotate(180deg)}
.pgo-x{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.pgo-x:hover{background:#F4F2FB;color:#B4371A}
.pgo-x svg{width:14px;height:14px}
.pgo-i.off>i{opacity:.45;filter:grayscale(1)}
.pgo-i.off b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.pgo-i.off small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.pgo-back{flex:none;height:32px;padding:0 12px;border-radius:10px;background:var(--vio-l);color:var(--vio);font-size:13px;font-weight:700}
/* Ideas Lab (23 Oct, Josh) */
/* Director heroes A–D, welcome walkthrough, co-directors (23 Oct) */
.dr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dr-sub{margin-top:5px;font-size:15px;color:var(--muted)}
.dr-right{display:flex;align-items:center;gap:12px}
.dr-crew{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 8px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 8px 18px -14px rgba(40,20,100,.35)}
.dr-avs{display:flex;align-items:center}
.dr-av{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;line-height:1;background:linear-gradient(135deg,#2A1B5C,#6D55FD);color:#fff;font-size:14px;font-weight:800;box-shadow:0 0 0 2.5px #fff}
.dr-av+.dr-av{margin-left:-10px}
.dr-av{position:relative}.dr-av:nth-child(1){z-index:3}.dr-av:nth-child(2){z-index:2}.dr-av:nth-child(3){z-index:1}
.dr-names{display:flex;flex-direction:column;line-height:1.15}
.dr-names b{font-size:14px;font-weight:700;color:var(--ink)}
.dr-names small{font-size:11.5px;color:var(--muted)}
.dr-av img{width:100%;height:100%;object-fit:cover}
.dr-av.inv{background:#F4F2FB;color:var(--muted);opacity:.8}
.dr-addco{height:36px;padding:0 14px;border-radius:18px;background:var(--vio-l);color:var(--vio);font-size:13.5px;font-weight:700}
.dr-addco:hover{background:#E4DEFF}
.dr-how{height:44px;padding:0 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:14px;font-weight:700}
.hr{position:relative;margin-top:18px;border-radius:30px;overflow:hidden}
.hr .eye{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hr h3{letter-spacing:-.035em;line-height:1.02}
.hr-act{display:flex;align-items:center;gap:16px;margin-top:20px}
.hr-act .fm-go{margin:0;height:50px;padding:0 24px;border-radius:15px;font-size:16px}
.hr-qr{display:flex;align-items:center;gap:10px}
.hr-qr .qr{width:66px;height:66px;padding:5px;border-radius:10px}
.hr-qr small{max-width:110px;font-size:12px;line-height:1.35;color:var(--muted)}
.hr-qr.w small{color:rgba(255,255,255,.75)}
/* A: the slate */
.hr-a{display:grid;grid-template-columns:300px minmax(0,1fr) 230px;gap:32px;align-items:center;padding:34px 36px;color:#fff;background:radial-gradient(60% 80% at 50% 0%,rgba(255,214,140,.16),transparent 70%),#121016}
.hra-sp{position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.14) 14px 26px);background-size:26px 8px;background-repeat:repeat-x;background-position:0 3px}
.hra-sp.t{top:6px}.hra-sp.b{bottom:6px}
.hra-slate{transform:rotate(-4deg);border-radius:12px;overflow:hidden;background:#1E1C22;box-shadow:0 30px 50px -20px rgba(0,0,0,.8),inset 0 0 0 2px #2E2B33}
.hra-clap{height:36px;background:repeating-linear-gradient(135deg,#F5F3EE 0 22px,#18161B 22px 44px);transform-origin:0 100%;transform:rotate(-8deg);box-shadow:0 4px 0 #0E0D10}
.hra-bd{padding:14px 16px 18px;font-family:'Courier New',monospace}
.hra-bd span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hra-bd b{display:block;margin-top:2px;font-size:17px;line-height:1.25;color:#F5F3EE}
.hra-bd .r{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hra-bd .r:last-child{border:0}
.hra-bd .r3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.14)}
.hra-bd .r3 div{padding:10px 0}.hra-bd .r3 div+div{padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.hra-bd .r3 b{font-size:22px}
.hra-bd .ch{font-family:Caveat,'Bradley Hand',cursive;font-size:26px;color:#FFE08A}
.hra-tx .eye{color:#FFC98A}
.hra-tx h3{margin-top:10px;font-size:46px}
.hra-tx>p:not(.eye){margin-top:10px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.75)}
.hra-tx .fm-dots{margin-top:14px}
.hr-a .hr-qr small{color:rgba(255,255,255,.7)}
.hra-ph{height:300px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 6px #fff,0 30px 50px -20px rgba(0,0,0,.8);transform:rotate(3deg)}
.hra-ph img{width:100%;height:100%;object-fit:cover}
/* B: the viewfinder */
.hr-b{height:420px;color:#fff}
.hrb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hrb-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,20,.88) 0%,rgba(10,6,20,.6) 45%,rgba(10,6,20,.1) 80%)}
.hrb-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.16) calc(33.3% - .5px),rgba(255,255,255,.16) calc(33.3% + .5px),transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.16) calc(66.6% - .5px),rgba(255,255,255,.16) calc(66.6% + .5px),transparent calc(66.6% + .5px)),linear-gradient(transparent calc(33.3% - .5px),rgba(255,255,255,.16) calc(33.3% - .5px),rgba(255,255,255,.16) calc(33.3% + .5px),transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.16) calc(66.6% - .5px),rgba(255,255,255,.16) calc(66.6% + .5px),transparent calc(66.6% + .5px))}
.hrb-rec{position:absolute;right:26px;top:22px;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:15px;background:rgba(0,0,0,.45);font-size:13px;font-weight:800;letter-spacing:.1em}
.hrb-rec i{width:10px;height:10px;border-radius:50%;background:#FF3B30;animation:hrblink 1.2s steps(2) infinite}
@keyframes hrblink{50%{opacity:.2}}
.hrb-tc{position:absolute;right:26px;bottom:22px;font:700 13px/1 'Courier New',monospace;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.hrb-fl{position:absolute;right:26px;top:66px;display:flex;flex-direction:column;gap:8px}
.hrb-fl img{width:64px;height:84px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 12px 24px -10px rgba(0,0,0,.7)}
.hrb-tx{position:absolute;left:40px;top:50%;transform:translateY(-50%);max-width:560px}
.hrb-tx .eye{color:#FFC7DA}
.hrb-tx h3{margin-top:10px;font-size:58px}
.hrb-tx>p:not(.eye){margin-top:12px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.82)}
/* C: the storyboard */
.hr-c{padding:26px 28px 28px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 24px 48px -30px rgba(40,20,100,.45)}
.hrc-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hrc-h .eye{color:var(--vio)}
.hrc-h h3{margin-top:8px;font-size:34px}
.hrc-h .hr-act{margin-top:0}
.hrc-board{display:flex;align-items:flex-start;gap:8px;margin-top:22px}
.hrc-board .hc-pn{flex:1;min-width:0}
.hrc-board .hc-fr{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#F4F2FB;box-shadow:inset 0 0 0 1px var(--hair2)}
.hrc-board .hc-fr img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.hrc-board .hc-n{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:12.5px;font-weight:800;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.hrc-board .hc-who{position:absolute;left:8px;bottom:8px;height:22px;padding:0 8px;border-radius:11px;display:inline-flex;align-items:center;background:rgba(15,12,30,.66);color:#fff;font-size:11px;font-weight:700}
.hrc-board .hc-pn b{display:block;margin-top:9px;font-size:14.5px;line-height:1.3}
.hrc-board .hc-pn small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.hrc-board .hc-ar{align-self:center;margin-top:-50px;font-style:normal;font-size:24px;font-weight:300;color:var(--muted)}
.hrc-board .edit .hc-fr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(160deg,#2A1B5C,#4A2370)}
.hrc-board .edit .hc-big{font-size:40px}
.hrc-board .hc-wave{display:flex;align-items:center;gap:3px;height:30px}.hrc-board .hc-wave i{width:3px;border-radius:2px;background:rgba(255,255,255,.7)}
.hrc-board .post .hc-fr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(160deg,#FFF1F6,#F5F2FF)}
.hrc-board .post .hc-lg{display:flex;gap:6px}.hrc-board .post .hc-lg .blg{width:34px;height:34px;border-radius:10px}.hrc-board .post .hc-lg .blg.fb{border-radius:50%}
.hrc-board .post .hc-when{font-size:13px;font-weight:800;color:var(--ink2)}
.hrc-board .edit .hc-who,.hrc-board .post .hc-who{background:var(--vio)}
/* D: the phone, animated (23 Oct, Josh: "messy", "next-level, actual animations") */
.hr-d{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:center;padding:40px 44px;color:#fff;background:radial-gradient(60% 90% at 88% 0%,rgba(240,98,142,.38),transparent 70%),radial-gradient(50% 80% at 0% 100%,rgba(98,198,255,.18),transparent 70%),linear-gradient(135deg,#1B1438 0%,#2A1B5C 55%,#43206B 100%)}
.hd-tx .eye{color:#FFC7DA}
.hd-tx h3{margin-top:12px;font-size:46px}
.hd-scene{margin-top:10px;font-size:15.5px;color:rgba(255,255,255,.75)}.hd-scene b{color:#fff}
.hd-steps{display:flex;align-items:stretch;gap:12px;margin-top:24px}
.hd-st{position:relative;flex:1;min-width:0;padding:14px 14px 16px;border-radius:16px;overflow:hidden;transition:background .4s,box-shadow .4s,opacity .4s;opacity:.55}
.hd-st b{display:block;font-size:15px}
.hd-st small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.7)}
.hd-st.you{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);padding-top:22px}
.hd-we{position:relative;flex:2;display:flex;gap:8px;padding:22px 8px 8px;border-radius:20px;background:rgba(167,139,250,.14);box-shadow:inset 0 0 0 1.5px rgba(196,181,253,.45)}
.hd-we .hd-st{background:rgba(255,255,255,.05)}
.hd-tg{position:absolute;left:14px;top:-1px;height:20px;padding:0 8px;border-radius:0 0 8px 8px;display:inline-flex;align-items:center;background:#fff;color:#1B1438;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.hd-tg.we{left:16px;background:linear-gradient(90deg,#7B61FF,#B14FD6);color:#fff}
.hd-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff}
.hd-we .hd-bar{background:#C4B5FD}
.hr-d[data-sc="0"] .hd-st[data-i="0"],.hr-d[data-sc="1"] .hd-st[data-i="1"],.hr-d[data-sc="2"] .hd-st[data-i="2"]{opacity:1}
.hr-d[data-sc="0"] .hd-st[data-i="0"]{background:#fff}.hr-d[data-sc="0"] .hd-st[data-i="0"] b{color:#1B1438}.hr-d[data-sc="0"] .hd-st[data-i="0"] small{color:#555}.hr-d[data-sc="0"] .hd-st[data-i="0"] .hd-bar{background:#FF3B30}
.hr-d[data-sc="1"] .hd-st[data-i="1"],.hr-d[data-sc="2"] .hd-st[data-i="2"]{background:linear-gradient(135deg,#7B61FF,#B14FD6)}
.hr-d[data-sc="0"] .hd-st[data-i="0"] .hd-bar,.hr-d[data-sc="1"] .hd-st[data-i="1"] .hd-bar,.hr-d[data-sc="2"] .hd-st[data-i="2"] .hd-bar{animation:hdbar 3.4s linear forwards}
@keyframes hdbar{to{width:100%}}
.hd-stage{display:grid;place-items:center}
.hd-ph{position:relative;width:236px;height:470px;border-radius:40px;background:#0F0C1D;overflow:hidden;box-shadow:0 0 0 8px #241D3D,0 0 0 9px rgba(255,255,255,.16),0 50px 70px -24px rgba(0,0,0,.7)}
.hd-scr{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .55s ease,transform .7s cubic-bezier(.32,.72,0,1)}
.hr-d[data-sc="0"] .hd-s0,.hr-d[data-sc="1"] .hd-s1,.hr-d[data-sc="2"] .hd-s2{opacity:1;transform:none}
/* scene 1: you shoot */
.hd-kb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-d[data-sc="0"] .hd-kb{animation:hdkb 3.4s ease-out both}
@keyframes hdkb{from{transform:scale(1.12)}to{transform:scale(1)}}
.hd-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),transparent 25%,transparent 60%,rgba(0,0,0,.7))}
.hd-top{position:absolute;left:14px;right:14px;top:18px;display:flex;justify-content:space-between}
.hd-rec{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;background:rgba(0,0,0,.5);font-size:11px;font-weight:800;letter-spacing:.08em}
.hd-rec i{width:7px;height:7px;border-radius:50%;background:#FF3B30;animation:hrblink 1s steps(2) infinite}
.hd-take{height:24px;padding:0 9px;border-radius:12px;display:inline-flex;align-items:center;background:rgba(0,0,0,.5);font-size:11px;font-weight:700}
.hd-cd{position:absolute;left:0;right:0;top:40%;height:90px;display:grid;place-items:center}
.hd-cd span{grid-area:1/1;font-size:84px;font-weight:900;line-height:1;opacity:0;text-shadow:0 8px 30px rgba(0,0,0,.5)}
.hd-cd span.ok{font-size:64px;color:#4ADE80}
.hr-d[data-sc="0"] .hd-cd span:nth-child(1){animation:hdcd .8s .2s both}
.hr-d[data-sc="0"] .hd-cd span:nth-child(2){animation:hdcd .8s 1s both}
.hr-d[data-sc="0"] .hd-cd span:nth-child(3){animation:hdcd .8s 1.8s both}
.hr-d[data-sc="0"] .hd-cd span.ok{animation:hdok .5s 2.6s both}
@keyframes hdcd{0%{opacity:0;transform:scale(1.6)}25%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
@keyframes hdok{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.hd-what{position:absolute;left:0;right:0;bottom:84px;text-align:center;font-size:14px;font-weight:800}
.hd-rb{position:absolute;left:50%;bottom:22px;width:52px;height:52px;margin-left:-26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 3px #fff}
.hd-rb i{width:22px;height:22px;border-radius:6px;background:#FF3B30}
.hd-rb svg{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg)}
.hd-rb circle{fill:none;stroke:#FF3B30;stroke-width:6;stroke-dasharray:289;stroke-dashoffset:289}
.hr-d[data-sc="0"] .hd-rb circle{animation:hdring 2.4s .2s linear forwards}
@keyframes hdring{to{stroke-dashoffset:0}}
/* scene 2: we edit */
.hd-s1{padding:16px 12px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(#1A1530,#120E24)}
.hd-pv{position:relative;height:210px;border-radius:16px;overflow:hidden}
.hd-pv img{width:100%;height:100%;object-fit:cover}
.hd-cap{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:8px;background:#FDE047;color:#1B1438;font-size:15px;font-weight:900;opacity:0}
.hd-lg{position:absolute;right:10px;top:10px;font-size:10px;font-weight:900;letter-spacing:.08em;opacity:0}
.hr-d[data-sc="1"] .hd-cap{animation:hdpop .5s 1.1s both}
.hr-d[data-sc="1"] .hd-lg{animation:hdfade .6s 1.6s both}
@keyframes hdpop{0%{opacity:0;transform:scale(.6) rotate(-6deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@keyframes hdfade{to{opacity:1}}
.hd-tl{display:flex;gap:4px}
.hd-tl img{flex:1;min-width:0;height:44px;border-radius:7px;object-fit:cover;opacity:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.2)}
.hr-d[data-sc="1"] .hd-tl img:nth-child(1){animation:hdin .4s .2s both}
.hr-d[data-sc="1"] .hd-tl img:nth-child(2){animation:hdin .4s .45s both}
.hr-d[data-sc="1"] .hd-tl img:nth-child(3){animation:hdin .4s .7s both}
@keyframes hdin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.hd-wv{display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
.hd-wv i{flex:1;height:var(--h);border-radius:1px;background:#A78BFA;transform-origin:center}
.hr-d[data-sc="1"] .hd-wv i{animation:hdwv .7s var(--d) ease-in-out infinite alternate}
@keyframes hdwv{to{transform:scaleY(.35)}}
.hd-tg2{display:flex;gap:5px}
.hd-tg2 span{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.08);font-size:11px;font-weight:700}
.hd-tg2 i{font-style:normal;color:#4ADE80;opacity:0}
.hr-d[data-sc="1"] .hd-tg2 span:nth-child(1) i{animation:hdfade .3s 1.2s both}
.hr-d[data-sc="1"] .hd-tg2 span:nth-child(2) i{animation:hdfade .3s 1.6s both}
.hr-d[data-sc="1"] .hd-tg2 span:nth-child(3) i{animation:hdfade .3s 2s both}
.hd-ed{margin-top:auto;text-align:center;font-size:12px;font-weight:700;color:#C4B5FD}
/* scene 3: we post */
.hd-s2{background:#F3F2F8;display:flex;flex-direction:column;justify-content:center;padding:14px 10px}
.hd-post{border-radius:16px;background:#fff;color:#111;overflow:hidden;box-shadow:0 18px 30px -18px rgba(20,10,60,.4)}
.hr-d[data-sc="2"] .hd-post{animation:hdup .6s cubic-bezier(.32,.72,0,1) both}
@keyframes hdup{from{opacity:0;transform:translateY(40px)}}
.hd-ph2{display:flex;align-items:center;gap:7px;padding:9px 10px}
.hd-ph2 .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);box-shadow:inset 0 0 0 2px #fff}
.hd-ph2 b{flex:1;font-size:12.5px}.hd-ph2 .blg{width:18px;height:18px;border-radius:6px}
.hd-im{position:relative;height:230px}.hd-im img{width:100%;height:100%;object-fit:cover}
.hd-heart{position:absolute;left:50%;top:50%;margin:-40px 0 0 -36px;font-size:80px;line-height:1;color:#fff;opacity:0;text-shadow:0 8px 30px rgba(0,0,0,.4)}
.hr-d[data-sc="2"] .hd-heart{animation:hdheart 1s .8s both}
@keyframes hdheart{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}55%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.hd-acts{padding:8px 10px 2px;font-size:12px;color:#444}.hd-acts b{color:#111}
.hd-cp{padding:0 10px 10px;font-size:12px;color:#333}
.hd-toast{align-self:center;margin-top:12px;height:32px;padding:0 13px;border-radius:16px;display:inline-flex;align-items:center;background:#16A34A;color:#fff;font-size:12.5px;font-weight:800;opacity:0}
.hr-d[data-sc="2"] .hd-toast{animation:hdin2 .5s 1.4s both}
@keyframes hdin2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* E: Premiere — the slate, animated (23 Oct, Josh: "another version of this style, even better") */
.hr-e{position:relative;display:grid;grid-template-columns:330px minmax(0,1fr) 200px;gap:36px;align-items:center;min-height:430px;padding:34px 0 34px 40px;color:#fff;background:#0C0A0F;isolation:isolate}
.he-beam{position:absolute;z-index:-1;left:-10%;top:-30%;width:80%;height:160%;background:conic-gradient(from 115deg at 0% 0%,transparent 0deg,rgba(255,220,160,.16) 12deg,rgba(255,220,160,.05) 30deg,transparent 42deg);filter:blur(6px);animation:heflick 4s steps(1) infinite}
@keyframes heflick{0%,100%{opacity:1}47%{opacity:.82}49%{opacity:1}73%{opacity:.9}}
.he-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:hegrain .6s steps(3) infinite}
@keyframes hegrain{0%{background-position:0 0}33%{background-position:-40px 20px}66%{background-position:30px -30px}}
.he-vig{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}
/* the slate */
.he-slate{position:relative;transform:rotate(-3deg);filter:drop-shadow(0 34px 40px rgba(0,0,0,.7))}
.he-stick{position:relative;z-index:2;height:42px;border-radius:8px 8px 2px 2px;background:repeating-linear-gradient(118deg,#F4F1EA 0 26px,#141216 26px 52px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);transform-origin:10px 100%;animation:heclap 6s cubic-bezier(.6,0,.4,1) infinite}
.he-stick i{position:absolute;left:4px;bottom:-9px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ddd,#777);box-shadow:0 1px 2px rgba(0,0,0,.5)}
@keyframes heclap{0%{transform:rotate(-24deg)}9%{transform:rotate(-24deg)}13%{transform:rotate(0)}14%{transform:rotate(1.5deg)}16%{transform:rotate(0)}82%{transform:rotate(0)}100%{transform:rotate(-24deg)}}
.he-base{height:14px;margin-top:2px;background:repeating-linear-gradient(118deg,#141216 0 26px,#F4F1EA 26px 52px);border-radius:2px}
.he-board{padding:12px 16px 16px;border-radius:0 0 12px 12px;background:radial-gradient(120% 100% at 30% 0%,#2A302E,#171B1A 70%);box-shadow:inset 0 0 0 2px #2F3533,inset 0 0 40px rgba(255,255,255,.04)}
.he-row{display:grid;border-bottom:1.5px solid rgba(240,240,230,.28)}
.he-row:last-child{border:0}
.he-row.two{grid-template-columns:1.6fr 1fr}.he-row.three{grid-template-columns:repeat(3,1fr)}
.he-row>div{padding:9px 0 8px}.he-row>div+div{padding-left:12px;border-left:1.5px solid rgba(240,240,230,.28)}
.he-row span{display:block;font:700 9.5px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,240,230,.55)}
.he-row b{display:block;margin-top:4px;font:600 24px/1.1 Caveat,'Bradley Hand',cursive;color:#F2F0E6;text-shadow:0 0 1px rgba(255,255,255,.5)}
.he-row b.big{font-size:28px;line-height:1.05}
.he-row b.sig{font-size:30px;color:#FFE08A}
.he-flash{position:absolute;z-index:5;inset:-30px;border-radius:30px;background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent);opacity:0;pointer-events:none;animation:heflash 6s infinite}
@keyframes heflash{0%,12.5%{opacity:0}13.5%{opacity:.85}22%{opacity:0}100%{opacity:0}}
.he-action{position:absolute;z-index:6;right:-26px;top:-24px;padding:6px 14px;border-radius:10px;background:#FF3B30;color:#fff;font:900 20px/1 Inter,sans-serif;letter-spacing:.06em;transform:rotate(8deg) scale(0);box-shadow:0 12px 24px -8px rgba(255,59,48,.7);animation:heact 6s infinite}
@keyframes heact{0%,12.5%{transform:rotate(8deg) scale(0);opacity:0}15%{transform:rotate(8deg) scale(1.2);opacity:1}18%{transform:rotate(8deg) scale(1)}55%{transform:rotate(8deg) scale(1);opacity:1}62%,100%{transform:rotate(8deg) scale(.9);opacity:0}}
/* words land with the clap */
.he-tx .eye{color:#FFC98A}
.he-tx h3{margin-top:12px;font-size:56px;line-height:1;letter-spacing:-.04em}
.he-tx h3 span{display:inline-block;animation:heword 6s infinite both}
.he-tx h3 span:nth-of-type(2){animation-delay:.18s}.he-tx h3 span:nth-of-type(3){animation-delay:.36s;background:linear-gradient(90deg,#fff,#FFC98A);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes heword{0%,12%{opacity:.25;transform:translateY(8px)}16%{opacity:1;transform:none}90%{opacity:1;transform:none}100%{opacity:.25;transform:translateY(8px)}}
.he-sub{margin-top:12px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.72);max-width:470px}
.he-tx .yw{margin-top:22px}
/* the reel */
.he-reel{position:relative;align-self:stretch;margin:-34px 0;overflow:hidden;background:#151217;box-shadow:inset 12px 0 18px -10px rgba(0,0,0,.8)}
.he-reel::before,.he-reel::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:18px;background:repeating-linear-gradient(#151217 0 10px,transparent 10px 22px),#151217;-webkit-mask:repeating-linear-gradient(#000 0 6px,transparent 6px 22px);mask:repeating-linear-gradient(#000 0 6px,transparent 6px 22px)}
.he-reel::before{left:0;background:repeating-linear-gradient(transparent 0 6px,#E9E4D8 6px 14px,transparent 14px 22px);-webkit-mask:none;mask:none;opacity:.85;width:10px;left:5px}
.he-reel::after{right:0;background:repeating-linear-gradient(transparent 0 6px,#E9E4D8 6px 14px,transparent 14px 22px);-webkit-mask:none;mask:none;opacity:.85;width:10px;right:5px}
.he-strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:8px;padding:8px 24px;animation:hereel 26s linear infinite}
.he-strip span{display:block;height:200px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.he-strip img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
@keyframes hereel{to{transform:translateY(-50%)}}
.he-reel{-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
@media (prefers-reduced-motion:reduce){.he-stick,.he-flash,.he-action,.he-tx h3 span,.he-strip,.he-grain,.he-beam{animation:none}.he-stick{transform:none}}
@media (max-width:1150px){.hr-e{grid-template-columns:300px minmax(0,1fr);padding-right:36px}.he-reel{display:none}}
/* B2 · calm viewfinder */
.hr-b2{height:400px;color:#fff}
.b2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b2-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,22,.82) 0%,rgba(12,8,22,.45) 50%,rgba(12,8,22,0) 85%)}
.b2-rec{position:absolute;right:26px;top:24px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.9)}
.b2-rec i{width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:hrblink 1.4s steps(2) infinite}
.b2-tx{position:absolute;left:48px;bottom:46px;max-width:560px}
.b2-tx .eye{color:rgba(255,255,255,.7)}
.b2-tx h3{margin-top:10px;font-size:60px}
.b2-p{margin-top:10px;font-size:17px;color:rgba(255,255,255,.82)}
.b2-act{display:flex;align-items:center;gap:20px;margin-top:24px}
.b2-act .fm-go{margin:0;height:50px;padding:0 24px;border-radius:15px;font-size:16px}
.b2-ph{position:relative;font-size:14.5px;font-weight:700;color:rgba(255,255,255,.88);cursor:default}
.b2-pop{position:absolute;left:50%;bottom:calc(100% + 12px);width:170px;margin-left:-85px;padding:12px;border-radius:16px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s}
.b2-pop .qr{width:120px;height:120px;margin:0 auto 6px;padding:4px;box-shadow:none}
.b2-pop small{font-size:11.5px;color:var(--muted)}
.b2-ph:hover .b2-pop{opacity:1;transform:none}
/* B3 · live viewfinder */
.hr-b3{height:430px;color:#fff}
.b3-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:b3kb 22s ease-in-out infinite alternate}
@keyframes b3kb{from{transform:scale(1)}to{transform:scale(1.1) translate(-2%,-1%)}}
.b3-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,20,.86) 0%,rgba(10,6,20,.5) 48%,rgba(10,6,20,.1) 85%)}
.b3-top{position:absolute;left:44px;right:28px;top:24px;display:flex;justify-content:space-between;align-items:center}
.b3-rec{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:.12em}
.b3-rec i{width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:hrblink 1s steps(2) infinite}
.b3-tc{font:700 13px/1 'Courier New',monospace;letter-spacing:.08em;color:rgba(255,255,255,.9)}
.b3-tx{position:absolute;left:44px;top:50%;transform:translateY(-44%);max-width:560px}
.b3-tx .eye{color:#FFC7DA}
.b3-tx h3{margin-top:10px;font-size:56px}
.b3-p{margin-top:10px;font-size:16.5px;color:rgba(255,255,255,.82)}.b3-p b{color:#fff}
.b3-tx .yw{margin-top:14px}
.b3-shots{position:absolute;right:28px;bottom:36px;display:flex;gap:10px}
.b3-shots span{position:relative;width:86px;height:112px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 14px 28px -10px rgba(0,0,0,.7);opacity:0;transform:translateY(14px);animation:b3in .6s var(--d) cubic-bezier(.32,.72,0,1) forwards}
.b3-shots img{width:100%;height:100%;object-fit:cover}
.b3-shots i{position:absolute;left:6px;bottom:6px;height:20px;padding:0 7px;border-radius:10px;display:inline-flex;align-items:center;background:rgba(22,163,74,.92);font-style:normal;font-size:10.5px;font-weight:800}
.b3-shots i::before{content:"✓ ";margin-right:2px}
@keyframes b3in{to{opacity:1;transform:none}}
.b3-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#FF3B30,#FF8A65);transform-origin:0 50%;animation:b3bar 8s linear infinite}
@keyframes b3bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* B4 · split, with an animated iPhone camera (23 Oct) */
.hr-b4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center;padding:62px 44px 62px 56px;min-height:520px;color:#fff;background:radial-gradient(60% 90% at 100% 0%,rgba(240,98,142,.22),transparent 70%),linear-gradient(135deg,#17112A,#221A40)}
/* the navy box: a faint iPhone thirds grid with focus marks, fading out at the edges (23 Oct, Josh) */
.hr-b4::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.075) calc(33.333% - .5px),rgba(255,255,255,.075) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.075) calc(66.666% - .5px),rgba(255,255,255,.075) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(transparent calc(33.333% - .5px),rgba(255,255,255,.075) calc(33.333% - .5px),rgba(255,255,255,.075) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.075) calc(66.666% - .5px),rgba(255,255,255,.075) calc(66.666% + .5px),transparent calc(66.666% + .5px));-webkit-mask:radial-gradient(90% 85% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(90% 85% at 50% 50%,#000 40%,transparent 100%)}
.hr-b4::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(circle,transparent 0,transparent 0) 0 0/0 0,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(33.333% - 6px) calc(33.333% - .75px)/12px 1.5px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(33.333% - .75px) calc(33.333% - 6px)/1.5px 12px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(66.666% - 6px) calc(33.333% - .75px)/12px 1.5px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(66.666% - .75px) calc(33.333% - 6px)/1.5px 12px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(33.333% - 6px) calc(66.666% - .75px)/12px 1.5px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(33.333% - .75px) calc(66.666% - 6px)/1.5px 12px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(66.666% - 6px) calc(66.666% - .75px)/12px 1.5px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) calc(66.666% - .75px) calc(66.666% - 6px)/1.5px 12px no-repeat}
.b4-tx,.b4-cam{position:relative;z-index:1}
.b4-tx .eye{color:#FFC7DA}
.b4-tx h3{margin-top:12px;font-size:54px}
.b4-p{margin-top:12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.78)}.b4-p b{color:#fff}
.b4-steps{display:flex;gap:8px;margin-top:22px}
.b4-st{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:.5;transition:opacity .4s,background .4s}
.b4-st i{font-style:normal;font-size:19px}
.b4-st b{display:block;font-size:14px}.b4-st small{display:block;font-size:11.5px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b4-pg{position:absolute;left:0;bottom:0;height:3px;width:0}
.b4-st.you .b4-pg{background:#FF3B30}.b4-st.we .b4-pg{background:#E9D5FF}
.hr-b4[data-sc="0"] .b4-st[data-i="0"],.hr-b4[data-sc="1"] .b4-st[data-i="1"],.hr-b4[data-sc="2"] .b4-st[data-i="2"]{opacity:1}
.hr-b4[data-sc="0"] .b4-st[data-i="0"]{background:#fff}.hr-b4[data-sc="0"] .b4-st[data-i="0"] b{color:#1B1438}.hr-b4[data-sc="0"] .b4-st[data-i="0"] small{color:#666}
.hr-b4[data-sc="1"] .b4-st[data-i="1"],.hr-b4[data-sc="2"] .b4-st[data-i="2"]{background:linear-gradient(135deg,#7B61FF,#B14FD6)}.hr-b4[data-sc="1"] .b4-st[data-i="1"] small,.hr-b4[data-sc="2"] .b4-st[data-i="2"] small{color:rgba(255,255,255,.85)}
.hr-b4[data-sc="0"] .b4-st[data-i="0"] .b4-pg,.hr-b4[data-sc="1"] .b4-st[data-i="1"] .b4-pg,.hr-b4[data-sc="2"] .b4-st[data-i="2"] .b4-pg{animation:hdbar 3.4s linear forwards}
.b4-tx .hr-act{margin-top:22px}
.b4-cam{position:relative;height:400px;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.18),0 30px 60px -24px rgba(0,0,0,.7)}
.b4-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:b3kb 24s ease-in-out infinite alternate}
.b4-grid{position:absolute;inset:0;transition:opacity .5s;background:linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.3) calc(33.3% - .5px),rgba(255,255,255,.3) calc(33.3% + .5px),transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.3) calc(66.6% - .5px),rgba(255,255,255,.3) calc(66.6% + .5px),transparent calc(66.6% + .5px)),linear-gradient(transparent calc(33.3% - .5px),rgba(255,255,255,.3) calc(33.3% - .5px),rgba(255,255,255,.3) calc(33.3% + .5px),transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.3) calc(66.6% - .5px),rgba(255,255,255,.3) calc(66.6% + .5px),transparent calc(66.6% + .5px))}
.hr-b4:not([data-sc="0"]) .b4-grid{opacity:0}
.b4-sc{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.hr-b4[data-sc="0"] .b4-s0,.hr-b4[data-sc="1"] .b4-s1,.hr-b4[data-sc="2"] .b4-s2{opacity:1}
/* 1: the camera */
.b4-tcp{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;background:#FF3B30;font:700 13px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.b4-tcp i{width:7px;height:7px;border-radius:50%;background:#fff;animation:hrblink 1s steps(2) infinite}
.b4-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.hr-b4[data-sc="0"] .b4-flash{animation:b4flash .5s 2.7s both}
@keyframes b4flash{0%{opacity:0}20%{opacity:.75}100%{opacity:0}}
.b4-bar{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72) 45%)}
.b4-modes{display:flex;justify-content:center;gap:18px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.b4-modes .on{color:#FFD60A}
.b4-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.b4-thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;background:#222;box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.b4-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.4)}
.hr-b4[data-sc="0"] .b4-thumb img{animation:b4thumb .45s 2.9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes b4thumb{to{opacity:1;transform:none}}
.b4-shut{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 4px #fff}
.b4-shut i{width:46px;height:46px;border-radius:50%;background:#FF3B30;transition:all .3s}
.hr-b4[data-sc="0"] .b4-shut i{animation:b4rec 3.4s both}
@keyframes b4rec{0%,8%{width:46px;height:46px;border-radius:50%}14%,78%{width:22px;height:22px;border-radius:6px}86%,100%{width:46px;height:46px;border-radius:50%}}
.b4-flip{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}.b4-flip svg{width:20px;height:20px}
/* 2: sent, then edited */
.b4-s1{background:linear-gradient(rgba(0,0,0,.1),transparent 30%,transparent 60%,rgba(0,0,0,.55))}
.b4-sent{position:absolute;left:50%;top:14px;height:30px;padding:0 13px;border-radius:15px;display:inline-flex;align-items:center;background:#16A34A;font-size:13px;font-weight:800;transform:translate(-50%,-50px)}
.hr-b4[data-sc="1"] .b4-sent{animation:b4sent 3.4s both}
@keyframes b4sent{0%{transform:translate(-50%,-50px)}10%,32%{transform:translate(-50%,0)}42%,100%{transform:translate(-50%,-50px)}}
.b4-cap{position:absolute;left:20px;bottom:70px;padding:6px 11px;border-radius:9px;background:#FDE047;color:#1B1438;font-size:20px;font-weight:900;opacity:0}
.hr-b4[data-sc="1"] .b4-cap{animation:hdpop .5s 1.2s both}
.b4-lg{position:absolute;right:18px;top:18px;font-size:11px;font-weight:900;letter-spacing:.08em;opacity:0}
.hr-b4[data-sc="1"] .b4-lg{animation:hdfade .6s 1.7s both}
.b4-ed{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;background:rgba(20,14,40,.75)}
.b4-wv{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.b4-wv i{flex:1;height:var(--h);border-radius:1px;background:#C4B5FD}
.hr-b4[data-sc="1"] .b4-wv i{animation:hdwv .7s var(--d) ease-in-out infinite alternate}
.b4-ed span{flex:none;font-size:12.5px;font-weight:700;color:#E9D5FF}
/* 3: posted */
.b4-ig{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;color:#111}
.b4-ig .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);box-shadow:inset 0 0 0 2px #fff}
.b4-ig b{flex:1;font-size:13px}.b4-ig .blg{width:20px;height:20px;border-radius:6px}
.hr-b4[data-sc="2"] .b4-ig{animation:b4ig .5s cubic-bezier(.32,.72,0,1) both}
@keyframes b4ig{from{transform:translateY(-100%)}}
.b4-heart{position:absolute;left:50%;top:50%;margin:-44px 0 0 -40px;font-size:88px;line-height:1;color:#fff;opacity:0;text-shadow:0 8px 30px rgba(0,0,0,.4)}
.hr-b4[data-sc="2"] .b4-heart{animation:hdheart 1s .7s both}
.b4-ready{position:absolute;left:50%;bottom:18px;height:34px;padding:0 15px;border-radius:17px;display:inline-flex;align-items:center;background:#16A34A;font-size:13.5px;font-weight:800;transform:translate(-50%,70px)}
.hr-b4[data-sc="2"] .b4-ready{animation:b4ready .5s 1.2s cubic-bezier(.32,.72,0,1) both}
@keyframes b4ready{to{transform:translate(-50%,0)}}
@media (max-width:1150px){.hr-b4{grid-template-columns:1fr}.b4-cam{display:none}}
/* the review-only switch */
.hr-sw{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:8px}
.hr-sw span{margin-right:4px;font-size:12px;font-weight:700;color:var(--muted)}
.hr-sw button{width:30px;height:28px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:12.5px;font-weight:800;color:var(--ink2)}
.hr-sw button.on{background:var(--ink);color:#fff}
/* welcome walkthrough */
#dirWelcome{width:min(720px,calc(100vw - 40px));padding:30px 34px 24px;text-align:center}
.dw-x{position:absolute;right:16px;top:16px}
.dw-s h2{margin-top:22px;font-size:30px;letter-spacing:-.03em}
.dw-s>p{margin:8px auto 0;max-width:520px;font-size:16px;line-height:1.5;color:var(--ink2)}
.dw-art{min-height:220px;display:flex;align-items:center;justify-content:center}
.dw-art.pics{position:relative}
.dw-art.pics span{width:150px;height:200px;margin:0 -14px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 5px #fff,0 24px 40px -18px rgba(40,20,100,.5);transform:rotate(var(--r))}
.dw-art.pics span:nth-child(2){z-index:1;transform:translateY(-8px)}
.dw-art.pics img{width:100%;height:100%;object-fit:cover}
.dw-rec{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:#111;color:#fff;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.1em}
.dw-rec i{width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:hrblink 1.2s steps(2) infinite}
.dw-art.flow{gap:10px;align-items:stretch}
.dw-art.flow>div{flex:1;padding:18px 14px;border-radius:20px;background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair2)}
.dw-art.flow span{font-size:34px}.dw-art.flow b{display:block;margin-top:8px;font-size:17px}.dw-art.flow small{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:var(--muted)}
.dw-art.flow>i{align-self:center;font-style:normal;font-size:24px;color:var(--muted)}
.dw-art.why{flex-direction:column;gap:10px;align-items:stretch;text-align:left}
.dw-art.why div{padding:14px 18px;border-radius:16px;background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair2)}
.dw-art.why b{display:block;font-size:16px}.dw-art.why small{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.dw-art.co{gap:14px}
.dw-art.co span{width:150px;padding:16px 10px;border-radius:20px;background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair2)}
.dw-art.co img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--vio-l)}
.dw-art.co b{display:block;margin-top:10px;font-size:15.5px}.dw-art.co small{display:block;font-size:12.5px;color:var(--muted)}
.dw-f{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid var(--hair)}
.dw-f .pback2{margin:0}
.dw-dots{display:flex;gap:6px;margin-right:auto}.dw-dots i{width:8px;height:8px;border-radius:50%;background:#DDD9EC}.dw-dots i.on{width:22px;border-radius:4px;background:var(--vio)}
.dw-f .btn{height:46px;padding:0 20px;border-radius:14px;gap:7px}.dw-f .btn svg{width:17px;height:17px}
/* welcome walkthrough, round 2 (23 Oct, Josh: "design could be better"): a cinematic picture band on every slide */
#dirWelcome{width:min(860px,calc(100vw - 40px));padding:0;overflow:hidden;text-align:center}
.dw-x2{position:absolute;z-index:3;right:16px;top:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.dw-x2 svg{width:16px;height:16px}
.dw-s.in .dwb>*:not(.dwb-glow){animation:dwin .6s var(--spring) both}
.dw-s.in .dw-t{animation:dwin .5s var(--spring) .08s both}
@keyframes dwin{from{opacity:0;transform:translateY(14px)}}
.dwb{position:relative;height:330px;display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;overflow:hidden;background:radial-gradient(55% 90% at 85% 0%,rgba(240,98,142,.42),transparent 70%),radial-gradient(45% 80% at 0% 100%,rgba(98,198,255,.2),transparent 70%),linear-gradient(135deg,#17112F 0%,#2A1B5C 55%,#43206B 100%)}
.dwb-glow{position:absolute;left:50%;top:55%;width:520px;height:260px;margin:-130px 0 0 -260px;background:radial-gradient(closest-side,rgba(255,206,130,.16),transparent);pointer-events:none}
.dw-t{padding:24px 44px 4px}
.dw-n{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vio)}
.dw-t h2{margin-top:6px;font-size:32px;letter-spacing:-.035em;line-height:1.1}
.dw-t>p:last-child{margin:8px auto 0;max-width:560px;font-size:16px;line-height:1.5;color:var(--ink2)}
.dw-f{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:18px 28px 0;padding:16px 0 22px;border-top:1px solid var(--hair)}
.dw-skip{height:40px;padding:0 10px;font-size:14px;font-weight:600;color:var(--muted)}
/* 1: the photo fan */
.dwb-fan{display:flex;align-items:center}
.dwb-fan span{width:168px;height:224px;margin:0 -16px;border-radius:20px;overflow:hidden;box-shadow:0 0 0 5px rgba(255,255,255,.95),0 30px 50px -20px rgba(0,0,0,.7);transform:translateY(var(--y)) rotate(var(--r))}
.dwb-fan span:nth-child(2){z-index:1}
.dwb-fan img{width:100%;height:100%;object-fit:cover;display:block}
.dwb-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:#fff;color:#1B1438;font-size:13.5px;font-weight:800;box-shadow:0 16px 30px -12px rgba(0,0,0,.6);white-space:nowrap}
.dwb-chip i{width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:hrblink 1.2s steps(2) infinite}
.dwb-chip.c1{left:calc(50% - 170px);top:42px;transform:rotate(-5deg)}
.dwb-chip.c2{right:calc(50% - 210px);top:96px;transform:rotate(4deg)}
.dwb-chip.c3{left:calc(50% - 60px);bottom:26px;transform:rotate(-2deg)}
/* 2: three little screens */
.dwb.steps{gap:12px;padding:0 30px}
.dws{display:flex;flex-direction:column;align-items:center;gap:12px}
.dws>p{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:800}
.dws>p em{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2A1B5C;font-style:normal;font-size:12px}
.dws-ar{font-style:normal;font-size:30px;font-weight:300;color:rgba(255,255,255,.5);margin-top:-30px}
.dws-v{width:200px;height:244px;border-radius:22px;overflow:hidden;box-shadow:0 26px 44px -20px rgba(0,0,0,.7)}
.dws-v.ph{padding:10px 9px 12px;background:#0F0C1D;box-shadow:0 0 0 5px #241D3D,0 0 0 6px rgba(255,255,255,.14),0 26px 44px -20px rgba(0,0,0,.7);border-radius:28px;width:150px;display:flex;flex-direction:column;align-items:center}
.dws-v.ph .bars{display:flex;gap:3px;width:100%;margin-bottom:8px}.dws-v.ph .bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}.dws-v.ph .bars i.on{background:#4ADE80}.dws-v.ph .bars i.cur{background:#fff}
.dws-v.ph .fr{position:relative;width:100%;flex:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px #FF3B30}
.dws-v.ph .fr img{width:100%;height:100%;object-fit:cover}
.dws-v.ph .cd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;font-weight:900;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.dws-v.ph .rb{display:grid;place-items:center;width:34px;height:34px;margin-top:9px;border-radius:50%;box-shadow:inset 0 0 0 2.5px #fff}.dws-v.ph .rb i{width:14px;height:14px;border-radius:4px;background:#FF3B30}
.dws-v.ed{display:flex;flex-direction:column;gap:7px;padding:10px;background:#1A1530;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 26px 44px -20px rgba(0,0,0,.7)}
.dws-v.ed .pv{position:relative;height:112px;border-radius:12px;overflow:hidden}
.dws-v.ed .pv img{width:100%;height:100%;object-fit:cover}
.dws-v.ed .cap{position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:#FDE047;color:#1B1438;font-size:11.5px;font-weight:900}
.dws-v.ed .lg{position:absolute;right:7px;top:7px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff;opacity:.9}
.dws-v.ed .tl{display:flex;gap:3px}.dws-v.ed .tl img{flex:1;min-width:0;height:30px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
.dws-v.ed .tl img:first-child{box-shadow:0 0 0 2px #A78BFA}
.dws-v.ed .wv{display:flex;align-items:center;gap:2px;height:18px;padding:0 2px}.dws-v.ed .wv i{flex:1;border-radius:1px;background:#A78BFA}
.dws-v.ed .tg{display:flex;flex-wrap:wrap;gap:4px}.dws-v.ed .tg span{height:20px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:rgba(255,255,255,.1);font-size:10px;font-weight:700}
.dws-v.po{display:flex;flex-direction:column;background:#fff;color:#111;text-align:left}
.dws-v.po .hd{display:flex;align-items:center;gap:6px;padding:8px 9px}
.dws-v.po .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);box-shadow:inset 0 0 0 2px #fff}
.dws-v.po .hd b{flex:1;font-size:11.5px}
.dws-v.po .lgs{display:flex;gap:3px}.dws-v.po .lgs .blg{width:16px;height:16px;border-radius:5px}.dws-v.po .lgs .blg.fb{border-radius:50%}
.dws-v.po>img{width:100%;height:130px;object-fit:cover}
.dws-v.po .ac{padding:7px 9px 0;font-size:11.5px;color:#444}.dws-v.po .ac b{color:#111;margin-right:6px}
.dws-v.po .ok{margin:auto 9px 9px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#DCFCE7;color:#15803D;font-size:11.5px;font-weight:800}
/* 3: three big statements */
.dwb.why{gap:14px;padding:0 34px}
.dwy{flex:1;max-width:230px;padding:24px 20px;border-radius:22px;text-align:left;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dwy b{display:block;font-size:46px;font-weight:900;letter-spacing:-.04em;line-height:1;background:linear-gradient(90deg,#fff,#FFC7DA);-webkit-background-clip:text;background-clip:text;color:transparent}
.dwy small{display:block;margin-top:10px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.78)}
/* 4: the crew */
.dwb.co{flex-direction:column;gap:20px}
.dwc-av{display:flex;gap:22px}
.dwc-av span{display:flex;flex-direction:column;align-items:center;gap:3px}
.dwc-av img{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.dwc-av span.on img{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(167,139,250,.6)}
.dwc-av b{margin-top:6px;font-size:15px}.dwc-av small{font-size:12px;color:rgba(255,255,255,.6)}
.dwc-av em{height:20px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;background:#A78BFA;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.dwc-note{display:flex;align-items:center;gap:10px;width:380px;padding:10px 12px;border-radius:16px;background:#fff;color:#111;text-align:left;box-shadow:0 20px 36px -16px rgba(0,0,0,.6)}
.dwc-note img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.dwc-note span{flex:1;min-width:0}.dwc-note b{display:block;font-size:14px}.dwc-note small{display:block;font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwc-note em{height:30px;padding:0 12px;border-radius:9px;display:inline-flex;align-items:center;background:var(--vio);color:#fff;font-style:normal;font-size:12.5px;font-weight:800}
/* welcome walkthrough, round 3 (23 Oct, Josh: "next-level premium… still calm") */
#dirWelcome{width:min(900px,calc(100vw - 40px));border-radius:30px}
.dw3-b{position:relative;height:350px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;background:linear-gradient(135deg,#130E29 0%,#22184A 55%,#341B5C 100%)}
.dw3-au{position:absolute;inset:0;pointer-events:none}
.dw3-au i{position:absolute;border-radius:50%;filter:blur(60px);animation:dw3Drift 20s ease-in-out infinite alternate;animation-delay:calc(var(--t,0) * -1s)}
.dw3-au i:nth-child(1){left:-8%;top:-30%;width:420px;height:320px;background:rgba(123,97,255,.55)}
.dw3-au i:nth-child(2){right:-10%;top:-38%;width:380px;height:300px;background:rgba(240,98,142,.36);animation-duration:24s}
.dw3-au i:nth-child(3){left:22%;bottom:-48%;width:460px;height:260px;background:rgba(98,198,255,.2);animation-duration:28s}
@keyframes dw3Drift{50%{transform:translate(46px,22px) scale(1.08)}100%{transform:translate(-34px,30px) scale(.94)}}
.dw3-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.07) calc(33.333% - .5px),rgba(255,255,255,.07) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.07) calc(66.666% - .5px),rgba(255,255,255,.07) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(transparent calc(33.333% - .5px),rgba(255,255,255,.07) calc(33.333% - .5px),rgba(255,255,255,.07) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.07) calc(66.666% - .5px),rgba(255,255,255,.07) calc(66.666% + .5px),transparent calc(66.666% + .5px));-webkit-mask:radial-gradient(85% 80% at 50% 50%,#000 35%,transparent 100%);mask:radial-gradient(85% 80% at 50% 50%,#000 35%,transparent 100%)}
.dw3-vf i{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.32);pointer-events:none}
.dw3-vf i:nth-child(1){left:20px;top:20px;border-top-width:2px;border-left-width:2px;border-top-left-radius:7px}
.dw3-vf i:nth-child(2){right:20px;top:20px;border-top-width:2px;border-right-width:2px;border-top-right-radius:7px;opacity:0}
.dw3-vf i:nth-child(3){left:20px;bottom:20px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:7px}
.dw3-vf i:nth-child(4){right:20px;bottom:20px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:7px}
.dp{translate:calc(var(--mx,0) * var(--dp,0) * 1px) calc(var(--my,0) * var(--dp,0) * 1px);transition:translate .6s var(--ease)}
@keyframes dw3Pop{from{opacity:0;transform:scale(.6)}}
@keyframes dw3Rise{from{opacity:0;transform:translateY(22px)}}
@keyframes dw3In{from{opacity:0}to{opacity:1}}
/* 2: a live loop, you shoot → we edit → we post */
.dw3-flow{position:relative;z-index:2;display:flex;align-items:center;gap:14px}
.dw3-stg{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.42;transform:scale(.95);filter:saturate(.6);transition:opacity .5s var(--ease),transform .7s var(--spring),filter .5s}
.s1[data-st="0"] .dw3-stg[data-i="0"],.s1[data-st="1"] .dw3-stg[data-i="1"],.s1[data-st="2"] .dw3-stg[data-i="2"]{opacity:1;transform:scale(1);filter:none}
.dw3-lb{height:32px;padding:0 13px;border-radius:16px;display:inline-flex;align-items:center;font-size:14px;font-weight:800;white-space:nowrap}
.dw3-lb.you{background:#fff;color:#141026}
.dw3-lb.we{background:linear-gradient(135deg,#8B6CFF,#6D55FD);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dw3-line{position:relative;width:40px;height:2px;margin-bottom:44px;border-radius:2px;background:rgba(255,255,255,.16)}
.dw3-line i{position:absolute;left:0;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#EDE9FE;box-shadow:0 0 14px 4px rgba(167,139,250,.85);opacity:0}
.s1[data-st="1"] .dw3-line:nth-of-type(1) i,.s1[data-st="2"] .dw3-line:nth-of-type(2) i{animation:dw3Go .8s var(--ease) both}
@keyframes dw3Go{0%{left:0;opacity:0}20%{opacity:1}100%{left:100%;opacity:0}}
.dw3-ph{width:148px;height:252px;padding:9px 8px 10px;border-radius:28px;display:flex;flex-direction:column;align-items:center;background:#0E0B1C;box-shadow:0 0 0 4px #251E40,0 0 0 5px rgba(255,255,255,.14),0 30px 50px -22px rgba(0,0,0,.8)}
.dw3-fr{position:relative;width:100%;flex:1;border-radius:20px;overflow:hidden}
.dw3-fr img{width:100%;height:100%;object-fit:cover;display:block}
.dw3-fr::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #FF3B30;opacity:0}
.dw3-cd{position:absolute;inset:0;display:grid;place-items:center}
.dw3-cd b{grid-area:1/1;font-size:54px;font-weight:900;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.5);opacity:0}
.s1[data-st="0"] .dw3-cd b{animation:dw3Cd .5s var(--ease) both}
.s1[data-st="0"] .dw3-cd b:nth-child(2){animation-delay:.5s}.s1[data-st="0"] .dw3-cd b:nth-child(3){animation-delay:1s}
@keyframes dw3Cd{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.8)}}
.dw3-recb{position:absolute;left:8px;top:8px;height:20px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;background:#FF3B30;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;opacity:0}
.dw3-recb i{width:5px;height:5px;border-radius:50%;background:#fff}
.s1[data-st="0"] .dw3-recb,.s1[data-st="0"] .dw3-fr::after{animation:dw3In .3s ease 1.5s both}
.dw3-shut{position:relative;width:38px;height:38px;margin-top:9px;border-radius:50%;box-shadow:inset 0 0 0 3px #fff}
.dw3-shut i{position:absolute;inset:6px;border-radius:50%;background:#FF3B30}
.s1[data-st="0"] .dw3-shut i{animation:dw3Rec .35s var(--ease) 1.5s both}
@keyframes dw3Rec{to{inset:11px;border-radius:5px}}
.dw3-ed{width:200px;height:252px;padding:10px;border-radius:22px;display:flex;flex-direction:column;gap:8px;background:#1A1532;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 50px -22px rgba(0,0,0,.8)}
.dw3-pv{position:relative;height:118px;border-radius:13px;overflow:hidden}
.dw3-pv img{width:100%;height:100%;object-fit:cover;display:block}
.dw3-cap{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:#FDE047;color:#1B1405;font-size:12px;font-weight:900;transform-origin:left center}
.s1[data-st="1"] .dw3-cap{animation:dw3Pop .5s var(--spring) .9s backwards}
.dw3-lg{position:absolute;right:8px;top:8px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff}
.dw3-tl{position:relative;display:flex;gap:3px}
.dw3-tl img{flex:1;min-width:0;height:30px;border-radius:5px;object-fit:cover}
.dw3-ph2{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;border-radius:1px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.s1[data-st="1"] .dw3-ph2{animation:dw3Play 2.5s linear both}
@keyframes dw3Play{to{left:100%}}
.dw3-wv{display:flex;align-items:center;gap:2px;height:20px}
.dw3-wv i{flex:1;height:var(--h);border-radius:2px;background:#A78BFA;opacity:.85}
.s1[data-st="1"] .dw3-wv i{animation:dw3Wv .7s ease-in-out var(--d) infinite alternate}
@keyframes dw3Wv{to{transform:scaleY(.35)}}
.dw3-tg{display:flex;flex-wrap:wrap;gap:4px}
.dw3-tg span{height:22px;padding:0 7px;border-radius:7px;display:inline-flex;align-items:center;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-size:10.5px;font-weight:700}
.s1[data-st="1"] .dw3-tg span{animation:dw3Tg .35s var(--ease) both}
.s1[data-st="1"] .dw3-tg span:nth-child(1){animation-delay:.6s}.s1[data-st="1"] .dw3-tg span:nth-child(2){animation-delay:1.1s}.s1[data-st="1"] .dw3-tg span:nth-child(3){animation-delay:1.6s}
@keyframes dw3Tg{to{background:rgba(167,139,250,.38);color:#fff}}
.dw3-po{width:186px;height:252px;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;background:#fff;color:#111;text-align:left;box-shadow:0 30px 50px -22px rgba(0,0,0,.8)}
.dw3-poh{display:flex;align-items:center;gap:5px;padding:9px 10px}
.dw3-poh .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.dw3-poh b{flex:1;font-size:12px}
.dw3-poh .blg{width:17px;height:17px;border-radius:5px}.dw3-poh .blg.fb{border-radius:50%}
.dw3-poi{position:relative;flex:1;min-height:0}
.dw3-poi img{width:100%;height:100%;object-fit:cover;display:block}
.dw3-heart{position:absolute;left:50%;top:50%;font-size:58px;line-height:1;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-50%)}
.s1[data-st="2"] .dw3-heart{animation:dw3Heart 1.1s var(--spring) .2s both}
@keyframes dw3Heart{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}60%{transform:translate(-50%,-50%) scale(.95)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.dw3-pac{padding:8px 10px 0;font-size:12px;color:#555}.dw3-pac b{color:#111}
.dw3-ok{margin:8px 10px 10px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#DCFCE7;color:#15803D;font-size:11.5px;font-weight:800;opacity:.4}
.s1[data-st="2"] .dw3-ok{animation:dw3Ok .5s var(--spring) 1.1s both}
@keyframes dw3Ok{from{opacity:.4;transform:scale(.92)}to{opacity:1;transform:none}}
/* 3: three glass cards, lit where you point */
.dw3-why{position:relative;z-index:2;display:flex;justify-content:center;gap:14px;width:100%;padding:0 44px}
.dw3-y{position:relative;flex:1;max-width:236px;padding:22px 20px;border-radius:22px;text-align:left;overflow:hidden;background:rgba(26,18,56,.6);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -24px rgba(0,0,0,.7);animation:dw3Rise .8s var(--spring) var(--d) backwards;transition:transform .45s var(--spring),box-shadow .3s}
.dw3-y::before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--px,50%) var(--py,0%),rgba(196,181,253,.24),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.dw3-y:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(196,181,253,.45),0 26px 40px -22px rgba(0,0,0,.7)}
.dw3-y:hover::before{opacity:1}
.dw3-y .ic{position:relative;width:40px;height:40px;margin-bottom:16px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#DDD6FE}
.dw3-y .ic svg{width:21px;height:21px}
/* 4: a ring draws around your co-director, then their clips arrive */
.dw3-b.s3{flex-direction:column;gap:24px}
.dw3-crew{position:relative;z-index:2;display:flex;gap:28px}
.dw3-p{display:flex;flex-direction:column;align-items:center;gap:3px;animation:dw3Rise .8s var(--spring) var(--d) backwards}
.dw3-p .im{position:relative;width:86px;height:86px;transition:transform .4s var(--spring)}
.dw3-p:hover .im{transform:translateY(-4px)}
.dw3-p img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.dw3-p .ring{position:absolute;left:-8px;top:-8px;width:102px;height:102px;transform:rotate(-90deg)}
.dw3-p .ring circle{fill:none;stroke:#C4B5FD;stroke-width:3;stroke-linecap:round;stroke-dasharray:296;stroke-dashoffset:296;animation:dw3Ring 1s var(--ease) .7s forwards}
@keyframes dw3Ring{to{stroke-dashoffset:0}}
.dw3-p b{margin-top:9px;font-size:15px}
.dw3-p small{font-size:12px;color:rgba(255,255,255,.6)}
.dw3-p em{height:20px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;background:#A78BFA;color:#fff;font-style:normal;font-size:11px;font-weight:800;animation:dw3Pop .5s var(--spring) 1.4s backwards}
.dw3-note{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:390px;padding:10px 12px;border-radius:16px;background:#fff;color:#111;text-align:left;box-shadow:0 24px 40px -16px rgba(0,0,0,.6);animation:dw3Note .7s var(--spring) 1.7s backwards,dw3Buzz .5s ease 2.5s}
@keyframes dw3Note{from{opacity:0;transform:translateY(28px) scale(.96)}}
@keyframes dw3Buzz{25%{transform:translateX(-3px) rotate(-1deg)}50%{transform:translateX(3px) rotate(1deg)}75%{transform:translateX(-2px)}}
.dw3-note img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.dw3-note span{flex:1;min-width:0}.dw3-note b{display:block;font-size:14px}.dw3-note small{display:block;font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw3-note em{height:30px;padding:0 12px;border-radius:9px;display:inline-flex;align-items:center;background:linear-gradient(110deg,#6D55FD 40%,#A594FF 50%,#6D55FD 60%) 120% 0/250% 100%;color:#fff;font-style:normal;font-size:12.5px;font-weight:800;animation:dw3Shim 2.6s ease 2.8s infinite}
@keyframes dw3Shim{to{background-position:-120% 0}}
/* 3, round 2: frosted cards so the grid doesn't show through, a clear headline and a small picture each */
.dw3-y h4{position:relative;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff}
.dw3-y p{position:relative;margin-top:5px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.74)}
.dwy3{position:relative;z-index:2;display:flex;justify-content:center;gap:14px;width:100%;padding:0 40px}
.dwy3 .dw3-y{max-width:252px;padding:12px 12px 18px}
.dwy3 .dw3-y h4,.dwy3 .dw3-y p{padding:0 6px}
.dwy3 .xq-vis{position:relative;height:122px;margin-bottom:14px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.dwy3 .xq-stk,.dwy3 .xq-rl{position:absolute;top:15px;width:82px;height:92px;border-radius:10px;overflow:hidden}
.dwy3 .xq-stk{left:26px;rotate:-7deg;opacity:.55}
.dwy3 .xq-stk::after{content:"STOCK";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-28deg);font-size:15px;font-weight:900;letter-spacing:.18em;color:rgba(255,255,255,.75)}
.dwy3 .xq-rl{right:26px;rotate:5deg;box-shadow:0 0 0 2.5px #fff,0 14px 24px -10px rgba(0,0,0,.6);animation:dw3Pop .6s var(--spring) .7s backwards}
.dwy3 .xq-stk img,.dwy3 .xq-rl img{width:100%;height:100%;object-fit:cover;display:block}
.dwy3 .xq-stk em,.dwy3 .xq-rl em{position:absolute;left:5px;bottom:5px;height:18px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:9.5px;font-weight:800}
.dwy3 .xq-rl em{background:#fff;color:#141026}
.dwy3 .xq-rl i{position:absolute;right:5px;top:5px;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-style:normal;font-size:9.5px;font-weight:800}
.dwy3 .xq-ring{position:relative;width:92px;height:92px;display:grid;place-items:center}
.dwy3 .xq-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dwy3 .xq-ring circle{fill:none;stroke-width:7}
.dwy3 .xq-ring .xq-bgc{stroke:rgba(255,255,255,.12)}
.dwy3 .xq-ring .xq-fgc{stroke:#C4B5FD;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;animation:dwyRing 1.6s var(--ease) .5s forwards}
@keyframes dwyRing{to{stroke-dashoffset:0}}
.dwy3 .xq-ring b{position:relative;font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.dwy3 .xq-was{position:absolute;right:12px;top:10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);text-decoration:line-through;text-decoration-thickness:1.5px}
.dwy3 .xq-ap{display:flex;align-items:center;gap:8px;width:200px;padding:8px;border-radius:12px;background:#fff;color:#141026;text-align:left;box-shadow:0 14px 24px -12px rgba(0,0,0,.6)}
.dwy3 .xq-ap img{flex:none;width:32px;height:40px;border-radius:7px;object-fit:cover}
.dwy3 .xq-ap .xq-t{flex:1;min-width:0}.dwy3 .xq-ap .xq-t1{display:block;font-size:11.5px;font-weight:800}.dwy3 .xq-ap .xq-t2{display:block;font-size:10.5px;color:#777}
.dwy3 .xq-ap .xq-go{position:relative;flex:none;width:78px;height:26px;border-radius:8px;background:#6D55FD;color:#fff;font-size:10.5px;font-weight:800;animation:dwyGo .45s var(--ease) 1.8s forwards}
.dwy3 .xq-ap .xq-go i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.dwy3 .xq-ap .xq-go .xq-b{opacity:0;animation:dw3In .3s ease 1.85s forwards}.dwy3 .xq-ap .xq-go .xq-a{animation:dwyOut .2s ease 1.8s forwards}
@keyframes dwyGo{40%{transform:scale(.92)}100%{background:#16A34A;transform:none}}
@keyframes dwyOut{to{opacity:0}}
.dw3-b.s2 .dw3-grid{opacity:.4}
/* 1, "you're the director": your film's opening credits */
.dwx-w{position:absolute;inset:0}
.dwx{position:absolute;inset:0;overflow:hidden}
.dw3-b.v-cr .dw3-vf,.dw3-b.v-cr .dw3-grid{display:none}
.dwx-cr .xq-ph{position:absolute;inset:0}
.dwx-cr .xq-ph img{width:100%;height:100%;object-fit:cover;display:block;animation:dwxKb 16s ease-out both}
@keyframes dwxKb{from{transform:scale(1.14)}}
.dwx-cr .xq-sh{position:absolute;inset:0;background:radial-gradient(60% 75% at 50% 52%,rgba(14,9,32,.62),rgba(14,9,32,.9))}
.dwx-cr .xq-bar{position:absolute;z-index:2;left:0;right:0;height:0;background:#07050F;animation:dwxBar 1s var(--ease) .1s forwards}
.dwx-cr .xq-bar.xq-t{top:0}.dwx-cr .xq-bar.xq-b{bottom:0}
@keyframes dwxBar{to{height:34px}}
.dwx-cr .xq-cn{position:absolute;z-index:3;bottom:11px;font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.55);opacity:0;animation:dw3In .6s ease 1s forwards}
.dwx-cr .xq-cn.xq-l{left:22px}.dwx-cr .xq-cn.xq-r{right:22px;display:flex;align-items:center;gap:6px}
.dwx-cr .xq-cn.xq-r i{width:7px;height:7px;border-radius:50%;background:#FF3B30;animation:hrblink 1.2s steps(2) infinite}
.dwx-cr .xq-tt{position:absolute;inset:34px 20px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.dwx-cr .xq-k1{font-size:12px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.72);animation:dwxTrack 1.6s var(--ease) .35s backwards}
@keyframes dwxTrack{from{opacity:0;letter-spacing:.9em;filter:blur(6px)}}
.dwx-cr .xq-by{margin-top:20px;font-size:15px;font-weight:500;color:rgba(255,255,255,.72);animation:dw3Blur .8s var(--ease) 1.1s backwards}
.dwx-cr .xq-nm{display:block;margin-top:2px;padding:0 6px;font-size:76px;font-weight:800;letter-spacing:-.045em;line-height:1.02;background:linear-gradient(100deg,#fff 0%,#fff 42%,#FFD3E4 50%,#fff 58%,#fff 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dw3Blur .9s var(--ease) 1.3s backwards,dwxSweep 2.4s var(--ease) 2.3s both}
@keyframes dwxSweep{from{background-position:130% 0}to{background-position:-30% 0}}
.dwx-cr .xq-st{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.78);animation:dw3Blur .8s var(--ease) 2s backwards}
.dwx-cr .xq-st .xq-avs{display:flex;padding-left:6px}
.dwx-cr .xq-st .xq-avs img{width:24px;height:24px;margin-left:-6px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1A1234}
.dwx-cr .xq-st b{color:#fff;font-weight:700}
/* the words come into focus; the footer's progress fills */
.dw3-t{padding:26px 48px 4px}
.dw3-t>*{animation:dw3Blur .7s var(--ease) backwards}
.dw3-t .dw3-n{animation-delay:.04s;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vio)}
.dw3-t h2{margin-top:6px;font-size:34px;letter-spacing:-.035em;line-height:1.1;animation-delay:.1s}
.dw3-t .dw3-p{margin:10px auto 0;max-width:580px;font-size:16px;line-height:1.55;color:var(--ink2);animation-delay:.18s}
@keyframes dw3Blur{from{opacity:0;filter:blur(8px);transform:translate(var(--sx,0),6px)}}
.dw3.fw{--sx:24px}.dw3.bk{--sx:-24px}
.dw3-seg{display:flex;gap:6px;margin-right:auto}
.dw3-seg button{position:relative;width:30px;height:18px;padding:0;display:flex;align-items:center}
.dw3-seg button::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:2px;background:#E6E3F0;transition:background .2s}
.dw3-seg button:hover::before{background:#D3CDE8}
.dw3-seg i{position:relative;width:0;height:4px;border-radius:2px;background:var(--vio)}
.dw3-seg .done i{width:100%}
.dw3-seg .on i{width:100%;animation:dw3Fill .8s var(--ease) both}
@keyframes dw3Fill{from{width:0}}
.dw3-go svg{transition:transform .3s var(--spring)}.dw3-go:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){#dirWelcome *{animation:none!important;transition:none!important}}
.sl-act{display:flex;align-items:center;gap:8px}
.sl-act .fm-go{margin:0;height:40px;padding:0 16px;border-radius:12px;background:var(--vio-l);color:var(--vio);box-shadow:none;white-space:nowrap}
.sl-act .fm-go:hover{background:var(--vio);color:#fff}
.sl-act .fm-rem{margin:0;height:40px;border-radius:12px}
.sl-act .lab-ok{margin:0;white-space:nowrap}
/* More to shoot: headlines that open (23 Oct, Josh picked it from five looks: "full width rows, a 10px gap, the main thing is the headline").
   .sl-act is the Remind me + Shoot it pair; the frames (.sbd-*) are the shots, then what we make */
.lh-list{display:grid;gap:10px;margin:14px 0 40px}
/* the rows */
.lo-r{border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 10px 24px -22px rgba(15,26,51,.35);transition:box-shadow .2s,transform .2s}
.lo-r:hover{box-shadow:0 0 0 1px rgba(109,85,253,.16),0 16px 30px -22px rgba(15,26,51,.4)}
.lo-r.open{box-shadow:0 0 0 1px rgba(109,85,253,.22),0 18px 34px -24px rgba(15,26,51,.4)}
.lo-hd{width:100%;display:flex;align-items:center;gap:16px;padding:20px 20px 20px 24px;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.lo-hd b{flex:1;min-width:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lo-m{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.lo-ch{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#F4F2FB;color:var(--ink2);transition:transform .3s var(--ease),background .2s,color .2s}
.lo-ch svg{width:16px;height:16px}
.lo-r.open .lo-ch{transform:rotate(180deg);background:var(--vio-l);color:var(--vio)}
.lo-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.lo-r.open .lo-bd{grid-template-rows:1fr}
.lo-bd>div{overflow:hidden;min-height:0}
.lo-in{display:flex;align-items:flex-end;gap:24px;padding:0 20px 20px 24px}
.lo-in .sbd-strip{flex:1;padding:6px 6px 2px}   /* room for the violet ring: the strip scrolls sideways, so it clips (23 Oct) */
.lo-why{margin:0 0 6px 24px;padding-right:20px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.lo-r.open .lo-hd{padding-bottom:10px}
.lo-r .sbd-f{width:104px}.lo-r .sbd-im{height:130px}.lo-r .sbd-arr{margin:56px 4px 0}.lo-r .sbd-more{height:130px}.lo-r .sbd-strip{gap:12px}
.sbd-strip{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none}
.sbd-strip::-webkit-scrollbar{display:none}
.sbd-f{flex:none;width:86px}
.sbd-im{position:relative;display:block;height:114px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--hair2)}
.sbd-im img{width:100%;height:100%;object-fit:cover;display:block}
.sbd-im em{position:absolute;left:6px;bottom:6px;height:18px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:rgba(10,8,25,.58);color:#fff;font-style:normal;font-size:10.5px;font-weight:700}
.sbd-f small{display:flex;gap:5px;margin-top:7px;font-size:12px;line-height:1.3;font-weight:600;color:var(--ink2)}
.sbd-f small i{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#F1EFF8;font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink)}
.sbd-more{flex:none;width:44px;height:114px;border-radius:12px;display:grid;place-items:center;background:#F4F2FB;font-size:12px;font-weight:800;color:var(--muted)}
.sbd-arr{flex:none;margin:44px 2px 0;color:var(--vio);font-size:18px;font-weight:700}
.sbd-f.out{margin-left:2px}
.sbd-f.out .sbd-im{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vio),0 10px 20px -10px rgba(109,85,253,.6)}
.sbd-f.out small{color:var(--vio);font-weight:800}
/* the review queue (23 Oct, Josh) */
body.calm .rkstrip{align-items:flex-end;gap:18px}
#rkStrip .rks-row{display:flex;align-items:flex-end;gap:10px}
#rkStrip .rks{width:auto;height:auto;padding:0;opacity:1;border-radius:0;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;box-shadow:none}
#rkStrip .rq-im{position:relative;display:block;width:58px;height:74px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px #fff,0 8px 16px -10px rgba(40,20,100,.45);transition:width .3s var(--spring),height .3s var(--spring),box-shadow .2s,transform .2s}
#rkStrip .rq-im img{width:100%;height:100%;object-fit:cover;display:block}
#rkStrip .rks:hover .rq-im{transform:translateY(-3px)}
#rkStrip .rks.on .rq-im{width:76px;height:96px;box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--vio),0 16px 28px -12px rgba(109,85,253,.6)}
#rkStrip .rq-k{position:absolute;left:5px;bottom:5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(10,8,20,.6);color:#fff;font-style:normal;font-size:8.5px}
#rkStrip .rq-m{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;font-style:normal;font-size:11px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
#rkStrip .rks small{font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
#rkStrip .rks.on small{color:var(--vio);font-weight:800}
#rkStrip .rks.gone{width:0!important;margin:0 -5px!important;opacity:0;transform:scale(.6)}
.rq-left{margin-bottom:28px;font-size:13.5px;font-weight:700;color:var(--muted)}
/* light and dark (23 Oct, Josh: "you forgot the light version"), like the original dashboard: sun = a light sidebar card, moon = the dark navy one */
.ni-row{position:relative}.ni-row>.ni{width:100%}
.dn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;width:58px;height:28px;padding:2px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer}
.dn .k{position:absolute;left:2px;top:2px;width:26px;height:24px;border-radius:999px;background:#2E2462;box-shadow:0 0 0 1px rgba(201,189,255,.25),0 2px 8px rgba(0,0,0,.4);transform:translateX(28px);transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .3s}
.dn span{position:relative;z-index:1;flex:1;display:grid;place-items:center;height:100%;transition:color .3s}
.dn svg{width:14px;height:14px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.dn .s{color:rgba(255,255,255,.45)}.dn .m{color:#C9BDFF}.dn .m svg{transform:rotate(-20deg)}
.dn:hover .s svg{transform:rotate(45deg)}
body[data-side="light"] .dn{background:rgba(24,24,27,.07);box-shadow:inset 0 0 0 1px rgba(24,24,27,.06)}
body[data-side="light"] .dn .k{transform:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body[data-side="light"] .dn .s{color:#F59E0B}body[data-side="light"] .dn .m{color:#A1A1AA}body[data-side="light"] .dn .m svg{transform:none}
body[data-side="light"] .app{background:#ECEEF4}
body[data-side="light"] .side{margin:12px 0 12px 12px;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(24,24,27,.06),0 24px 50px -30px rgba(40,20,100,.3)}
/* light: the window fills the app so the sky runs the whole width, behind the sidebar too (23 Oct, Josh) */
body[data-side="light"] .app{background:var(--win)}
body[data-side="light"] .side{grid-column:1;grid-row:1;z-index:2}
body[data-side="light"] .win{grid-column:1/-1;grid-row:1;margin:0;border-radius:0;box-shadow:none}
body[data-side="light"] .scroll{padding-left:276px}
body[data-side="light"] .logo{color:var(--ink)}
body[data-side="light"] .ws{background:#F6F5FA;box-shadow:inset 0 0 0 1px rgba(24,24,27,.06);color:var(--ink)}
body[data-side="light"] .ws:hover{background:#F0EEF8;box-shadow:inset 0 0 0 1px rgba(109,85,253,.18)}
body[data-side="light"] .ws small,body[data-side="light"] .tellbtn small{color:var(--muted)}
body[data-side="light"] .ws .chev{color:#A1A1AA}
body[data-side="light"] .ni{color:#4A5168}
body[data-side="light"] .ni .nl{--nl:#4A5168}
body[data-side="light"] .ni:hover{background:#F4F4F8;color:var(--ink)}
body[data-side="light"] .ni.on{background:#F1EFFA;color:var(--ink);font-weight:600}
body[data-side="light"] .ni.on .nl{--nl:#141026}
body[data-side="light"] .ni .bd{background:#F1EFFA;color:#4A5168}
body[data-side="light"] .ni .bd.ok{background:#DCFCE7;color:#15803D}
body[data-side="light"] .ni .bd.tick{background:#F1EFFA;color:var(--vio)}
body[data-side="light"] .ni .spin{border-color:rgba(24,24,27,.15);border-top-color:var(--vio)}
body[data-side="light"] .side hr{background:rgba(24,24,27,.08)}
body[data-side="light"] .tellbtn{background:#fff;color:var(--ink)}
body[data-side="light"] .tellbtn:hover{background:#FAF9FF}
body[data-side="light"] .tellbtn b{background:linear-gradient(90deg,#1B1438,#6D55FD);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-side="light"] .tellbtn svg{color:#8B5CF6}
body[data-side="light"] .wsmenu{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(24,24,27,.08),0 24px 50px -20px rgba(40,20,100,.35)}
body[data-side="light"] .wsmenu p,body[data-side="light"] .wsmenu small{color:var(--muted)}
body[data-side="light"] .wsmenu button:hover{background:#F6F5FA}
body[data-side="light"] .wsmenu hr{background:rgba(24,24,27,.08)}
body[data-side="light"] .wsmenu .add{color:var(--vio)}
/* You vs We, calm (23 Oct, Josh: "too busy"): words only, "You" in ink, "We" in violet */
.yw{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;font-size:15px;font-weight:500;color:var(--muted)}
.yw b.u{color:var(--ink);font-weight:800}.yw b.w{color:var(--vio);font-weight:800}
.yw i{font-style:normal;opacity:.45;margin:0 2px}
.yw.dk{color:rgba(255,255,255,.72)}.yw.dk b.u{color:#fff}.yw.dk b.w{color:#C4B5FD}
.dr-sub2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.dr-sub2>span{font-size:14px;color:var(--muted)}.dr-sub2>span::before{content:"·";margin-right:8px;opacity:.6}
.hr-d .yw,.he-tx .yw{margin-top:18px}
.dc-l .yw{font-size:14px}
/* the finish on the web (23 Oct) */
.dir-cfw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.ds-x{position:absolute;right:16px;top:16px}
.ds-w{max-width:520px;margin:0 auto;padding-top:8px;text-align:center}
.ds-fan{position:relative;height:186px}
.ds-fan span{position:absolute;left:50%;top:6px;width:120px;height:160px;margin-left:-60px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px #fff,0 20px 34px -14px rgba(40,20,100,.5);transform:translateX(var(--x)) rotate(var(--r));animation:dfanw .7s var(--d) cubic-bezier(.32,.72,0,1) both}
.ds-fan img,.ds-fan video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes dfanw{from{opacity:0;translate:0 40px;scale:.7}}
.ds-w h2{margin-top:8px;font-size:30px;letter-spacing:-.03em}
.ds-p{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.ds-nx{margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
.dir-tlw{list-style:none;margin-top:10px;text-align:left}
.dir-tlw li{position:relative;display:flex;gap:12px;padding-bottom:14px;animation:dtlw .5s cubic-bezier(.32,.72,0,1) both}
.dir-tlw li:nth-child(2){animation-delay:.12s}.dir-tlw li:nth-child(3){animation-delay:.24s}.dir-tlw li:nth-child(4){animation-delay:.36s}
@keyframes dtlw{from{opacity:0;transform:translateY(10px)}}
.dir-tlw li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;border-radius:1px;background:var(--hair2)}
.dir-tlw li.done:not(:last-child)::before{background:#22C55E}
.dir-tlw .dot{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#F4F2FB;font-size:15px}
.dir-tlw li.done .dot{background:#22C55E;color:#fff;font-weight:900}
.dir-tlw li.now .dot{background:linear-gradient(135deg,#7B61FF,#B14FD6);animation:dpulsew 1.4s ease-in-out infinite}
@keyframes dpulsew{0%,100%{box-shadow:0 0 0 0 rgba(109,85,253,.45)}50%{box-shadow:0 0 0 9px rgba(109,85,253,0)}}
.dir-tlw b{display:block;margin-top:1px;font-size:15px}
.dir-tlw small{display:block;margin-top:1px;font-size:13px;color:var(--muted)}
.dir-tlw li:not(.done):not(.now){opacity:.75}
/* the calm shot list */
#dirModal{width:min(900px,calc(100vw - 40px));padding:20px 28px 20px}
.dc-h{display:flex;align-items:center;justify-content:space-between}
.dc-back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 4px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted)}
.dc-back:hover{color:var(--ink)}.dc-back svg{width:16px;height:16px}
.dc-g{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:30px;margin-top:4px;align-items:start}
.dc-l h2{font-size:28px;letter-spacing:-.03em;line-height:1.15}
.dc-meta{margin-top:4px;margin-bottom:16px;font-size:14.5px;color:var(--muted)}
.dc-list{list-style:none;margin-top:20px;border-top:1px solid var(--hair)}
.dc-list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.dc-im{position:relative;flex:none;width:54px;height:68px;border-radius:12px;overflow:hidden;background:#F4F2FB}
.dc-im img,.dc-im video{width:100%;height:100%;object-fit:cover;display:block}
.dc-ok{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#16A34A;color:#fff}.dc-ok svg{width:11px;height:11px}
.dc-tx{flex:1;min-width:0}
.dc-tx b{display:block;font-size:15.5px;font-weight:700}
.dc-tx small{display:block;margin-top:2px;font-size:13.5px;color:var(--muted);line-height:1.4}
.dc-tx .dc-for{display:inline-block;margin:0 0 3px;padding:1px 7px;border-radius:6px;background:#FFF1E6;color:#B4501A;font-size:11px;font-weight:800}
.dc-tx .dc-say{color:var(--vio);font-weight:600}
.dc-add{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:11px;background:#F4F2FB;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.dc-add:hover{background:#ECE8FB;color:var(--vio)}.dc-add svg{width:15px;height:15px}
.dc-list li.got .dc-add{background:none;color:var(--muted)}
.dc-qr{padding:18px 16px 14px;border-radius:20px;background:#F7F6FB;text-align:center}
.dc-qr .qr{width:118px;height:118px;margin:0 auto 10px;padding:8px;border-radius:14px;box-shadow:0 0 0 1px var(--hair2)}
.dc-qr b{display:block;font-size:15px}
.dc-qr>small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.dc-who{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.dc-who>span{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.dc-who>div{display:flex;justify-content:center;gap:6px;margin-top:8px}
.dc-who button{width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:11.5px;font-weight:800;color:var(--ink2)}
.dc-who button img{width:100%;height:100%;object-fit:cover}
.dc-who button.on{box-shadow:0 0 0 2.5px var(--vio)}
.dc-send{margin-top:12px;font-size:13px;font-weight:700;color:var(--vio)}
.dc-foot{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--hair)}
.dc-foot .btn.pri{height:46px;padding:0 20px;border-radius:14px}.dc-foot .btn.pri:disabled{opacity:.4;cursor:not-allowed}
/* How it works: your part on its own, ClipMagic's part grouped */
.dws{position:relative}
.dws-tag{position:absolute;z-index:2;top:-13px;left:50%;transform:translateX(-50%);height:24px;padding:0 10px;border-radius:12px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;white-space:nowrap}
.dws-tag.you{background:#fff;color:#1B1438}
.dws-tag.we{background:linear-gradient(90deg,#7B61FF,#B14FD6);color:#fff}
.dws.you>p{height:30px;padding:0 12px;border-radius:15px;background:#fff;color:#1B1438}
.dws-we{position:relative;padding:22px 14px 10px;border-radius:24px;background:rgba(167,139,250,.14);box-shadow:inset 0 0 0 1.5px rgba(196,181,253,.5)}
.dws-wr{display:flex;align-items:flex-start;gap:14px}
.dws-we .dws>p{height:30px;padding:0 12px;border-radius:15px;background:linear-gradient(90deg,#7B61FF,#B14FD6);color:#fff}
.dws-we .dws-v{width:176px;height:228px}
.dws-v.ph{height:236px}
.dwp-bars{display:flex;gap:3px;width:100%;margin-bottom:8px}.dwp-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}.dwp-bars i.on{background:#4ADE80}.dwp-bars i.cur{background:#fff}
.dwp-fr{position:relative;width:100%;flex:1;min-height:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px #FF3B30}
.dwp-fr img{width:100%;height:100%;object-fit:cover;display:block}
.dwp-cd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;font-weight:900;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.dwp-rb{display:grid;place-items:center;width:34px;height:34px;margin-top:9px;border-radius:50%;box-shadow:inset 0 0 0 2.5px #fff}.dwp-rb i{width:14px;height:14px;border-radius:4px;background:#FF3B30}
.dwe-pv{position:relative;height:104px;border-radius:12px;overflow:hidden}.dwe-pv img{width:100%;height:100%;object-fit:cover;display:block}
.dwe-cap{position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:#FDE047;color:#1B1438;font-size:11.5px;font-weight:900}
.dwe-lg{position:absolute;right:7px;top:7px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff}
.dwe-tl{display:flex;gap:3px}.dwe-tl img{flex:1;min-width:0;height:28px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}.dwe-tl img:first-child{box-shadow:0 0 0 2px #A78BFA}
.dwe-wv{display:flex;align-items:center;gap:2px;height:16px;padding:0 2px}.dwe-wv i{flex:1;border-radius:1px;background:#A78BFA}
.dwe-tg{display:flex;flex-wrap:wrap;gap:4px}.dwe-tg span{height:20px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:rgba(255,255,255,.1);font-size:10px;font-weight:700}
.dwo-hd{display:flex;align-items:center;gap:6px;padding:8px 9px}
.dwo-av{width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);box-shadow:inset 0 0 0 2px #fff}
.dwo-hd b{flex:1;font-size:11.5px}
.dwo-lgs{display:flex;gap:3px}.dwo-lgs .blg{width:16px;height:16px;border-radius:5px}.dwo-lgs .blg.fb{border-radius:50%}
.dws-v.po>img{width:100%;height:118px;object-fit:cover;display:block}
.dwo-ac{padding:7px 9px 0;font-size:11.5px;color:#444}.dwo-ac b{color:#111;margin-right:6px}
.dwo-ok{margin:auto 9px 9px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#DCFCE7;color:#15803D;font-size:11.5px;font-weight:800}
/* co-director */
#coModal{width:min(560px,calc(100vw - 40px));padding:28px 30px 24px}
#coModal h2{font-size:26px;letter-spacing:-.03em}
.co-sub{margin-top:6px;font-size:15px;color:var(--ink2);line-height:1.5}
#coModal .lbl{margin:18px 0 8px}
.co-list{display:flex;flex-direction:column;gap:8px}
.co-p{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2);text-align:left}
.co-p img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.co-p span{flex:1}.co-p b{display:block;font-size:15px}.co-p small{display:block;font-size:12.5px;color:var(--muted)}
.co-p em{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:10px;background:var(--vio-l);color:var(--vio);font-style:normal;font-size:13px;font-weight:700}
.co-p em svg{width:13px;height:13px}
.co-p.on{box-shadow:0 0 0 2px var(--vio)}.co-p.on em{background:var(--vio);color:#fff}
.co-new{display:flex;gap:8px}
.co-new input{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair2);font-size:14.5px}
.co-new .btn{height:44px;border-radius:12px}
.co-note{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;color:var(--muted)}.co-note svg{width:14px;height:14px;color:#16A34A}
@media (max-width:1150px){.hr-a{grid-template-columns:260px minmax(0,1fr)}.hra-ph{display:none}.hr-d{grid-template-columns:1fr}.hd-stage{display:none}}
/* Director (23 Oct, Josh: one name, and "you shoot, we edit, we post") */
.dr-head{padding:40px 0 4px}
.dr-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.dr-flow span{height:34px;padding:0 13px;border-radius:17px;display:inline-flex;align-items:center;gap:6px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:14.5px}
.dr-flow i{font-style:normal;color:var(--muted);font-weight:700}
.dr-flow em{margin-left:6px;font-style:normal;font-size:13.5px;color:var(--muted)}
.dr-today{display:grid;grid-template-columns:260px minmax(0,1fr) 190px;gap:26px;align-items:center;margin-top:20px;padding:20px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 24px 48px -30px rgba(40,20,100,.45)}
.dr-tph{position:relative;height:300px;border-radius:20px;overflow:hidden}
.dr-tph img{width:100%;height:100%;object-fit:cover;display:block}
.dr-streak{position:absolute;left:10px;top:10px;height:30px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;background:#fff;color:#C2410C;font-size:13.5px;font-weight:800;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.dr-tx h3{margin-top:8px;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.dr-tx>p:not(.fm-eye2){margin-top:8px;font-size:15px;color:var(--muted)}
.dr-tx .fm-dots{margin-top:14px}
.dr-tx .fm-go{margin-top:18px;height:48px;padding:0 22px;border-radius:14px;font-size:15.5px}
.dr-tx .lab-ok{margin-top:18px}
.dr-qr{text-align:center;padding:16px 12px;border-radius:20px;background:linear-gradient(160deg,#F5F2FF,#FFF1F6)}
.dr-qr .qr{margin:0 auto 10px;width:130px;height:130px}
.dr-qr b{display:block;font-size:14.5px}
.dr-qr small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.fm-wkph{display:flex;gap:3px;background:#FFF1E6}
.fm-wkph img{flex:1;min-width:0;height:100%;object-fit:cover}
@media (max-width:1100px){.dr-today{grid-template-columns:200px minmax(0,1fr)}.dr-qr{display:none}}
/* Film it, round 2: today's shoot, QR, trending, week, series, crew (23 Oct) */
.fm-row2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-top:16px}
.fm-today{padding:18px 20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 14px 30px -20px rgba(15,26,51,.35)}
.fm-td-h{display:flex;align-items:center;justify-content:space-between}
.fm-eye2{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vio)}
.fm-streak{height:28px;padding:0 11px;border-radius:14px;display:inline-flex;align-items:center;background:#FFF1E6;color:#C2410C;font-size:13px;font-weight:800}
.fm-td-b{display:flex;gap:16px;margin-top:12px}
.fm-td-b>img{flex:none;width:118px;height:148px;border-radius:16px;object-fit:cover}
.fm-td-b b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.2}
.fm-td-b small{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.fm-dots{display:flex;gap:5px;margin-top:12px}
.fm-dots span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#F4F2FB;font-size:11px;font-weight:800;color:var(--muted)}
.fm-dots span.on{background:#FFEDD5;color:#C2410C}
.fm-dots span.now{box-shadow:0 0 0 2px var(--vio);color:var(--vio);background:#fff}
.fm-dots span.on.now{background:#FB923C;color:#fff;box-shadow:none}
.fm-td-a{display:flex;align-items:center;gap:14px;margin-top:14px}
.fm-td-a .fm-go{margin:0;flex:none;padding:0 18px}
.fm-td-a span{font-size:13px;color:var(--muted)}
.fm-qr{display:flex;gap:16px;align-items:center;padding:18px;border-radius:24px;background:linear-gradient(160deg,#F5F2FF,#FFF1F6);box-shadow:inset 0 0 0 1px rgba(109,85,253,.12)}
.qr{flex:none;width:118px;height:118px;padding:9px;border-radius:16px;background:#fff;box-shadow:0 10px 24px -14px rgba(60,40,140,.5)}
.qr svg{display:block;width:100%;height:100%}
.qr-x{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:var(--muted)}
.fm-qr b{display:block;font-size:16px}
.fm-qr p{margin-top:4px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.fm-qr small{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.fm-sec{margin-top:34px}
.fm-sh h2{font-size:22px;letter-spacing:-.02em}
.fm-sh p{margin-top:3px;font-size:14.5px;color:var(--muted)}
.fm-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
.fm-snd{align-self:flex-start;margin-bottom:6px;padding:3px 8px;border-radius:7px;background:#111;color:#fff;font-size:11px;font-weight:700}
.fm-when{position:absolute;right:8px;top:8px;height:24px;padding:0 9px;border-radius:12px;display:inline-flex;align-items:center;background:#fff;color:var(--vio);font-size:11.5px;font-weight:800}
.fm-rem{align-self:flex-start;height:30px;margin:-4px 0 12px;padding:0 10px;border-radius:9px;display:inline-flex;align-items:center;gap:5px;background:#F4F2FB;font-size:12.5px;font-weight:700;color:var(--ink2)}
.fm-rem.on{background:#ECFDF3;color:#15803D}.fm-rem svg{width:13px;height:13px}
.fm-week{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:34px;padding:24px 26px;border-radius:26px;background:linear-gradient(135deg,#FFF7E6,#FFEFF5);box-shadow:inset 0 0 0 1px rgba(194,65,12,.1)}
.fm-week h2{margin-top:6px;font-size:24px;letter-spacing:-.025em}
.fm-week p{margin-top:5px;font-size:14.5px;color:var(--ink2);max-width:520px}
.fm-week .fm-go{margin-top:14px;padding:0 18px}
.fm-week .fm-eye2{color:#C2410C}
.fm-wk-ps{display:flex;gap:8px}
.fm-wk-ps span{position:relative;width:76px;height:104px;border-radius:14px;overflow:hidden;box-shadow:0 10px 22px -12px rgba(60,30,10,.5)}
.fm-wk-ps span:nth-child(odd){transform:translateY(6px)}
.fm-wk-ps img{width:100%;height:100%;object-fit:cover}
.fm-wk-ps i{position:absolute;left:5px;bottom:5px;height:18px;padding:0 6px;border-radius:9px;display:inline-flex;align-items:center;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:10px;font-weight:800}
.fm-crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px;margin-bottom:40px}
.fm-cr{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 10px 22px -18px rgba(15,26,51,.35);text-align:left}
.fm-cr>img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover}
.fm-cr>div{flex:1;min-width:0}.fm-cr b{display:block;font-size:15.5px}.fm-cr small{display:block;font-size:12.5px;color:var(--muted)}.fm-cr em{display:block;margin-top:3px;font-style:normal;font-size:12px;font-weight:700;color:var(--vio)}
.fm-cr{flex-wrap:wrap}.fm-cr .btn{flex:1 1 100%;height:38px;border-radius:11px;font-size:13px}
.fm-cr.add{flex-direction:column;align-items:flex-start;gap:2px;background:#FBFAFF;box-shadow:inset 0 0 0 1.5px #DCD5FC}
.fm-cr.add span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--vio-l);color:var(--vio);font-size:20px;font-weight:700;margin-bottom:4px}
.dir-who{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px}
.dir-who>span{font-size:13.5px;font-weight:700;color:var(--ink2);margin-right:2px}
.dir-who button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:#F4F2FB;font-size:13.5px;font-weight:600;color:var(--ink2)}
.dir-who button img{width:24px;height:24px;margin-left:-6px;border-radius:50%;object-fit:cover}
.dir-who button.on{background:var(--ink);color:#fff}
.dir-for{display:inline-block;margin-bottom:4px;padding:2px 7px;border-radius:6px;background:#FFF1E6;color:#B4501A;font-size:11px;font-weight:800}
.dir-list .tx small.say{color:var(--vio);font-weight:600}
.dir-ph .qr{margin:0 auto 12px;width:150px;height:150px}
@media (max-width:1100px){.fm-row2{grid-template-columns:1fr}.fm-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.fm-week{grid-template-columns:1fr}}
/* Film it page (23 Oct, Josh) */
.fm-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center;margin-top:34px;padding:36px 40px;border-radius:30px;color:#fff;background:radial-gradient(60% 90% at 88% 0%,rgba(240,98,142,.38),transparent 70%),radial-gradient(50% 80% at 0% 100%,rgba(98,198,255,.18),transparent 70%),linear-gradient(135deg,#1B1438 0%,#2A1B5C 55%,#43206B 100%);box-shadow:0 30px 60px -30px rgba(40,20,100,.6);overflow:hidden}
.fm-eye{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#FFC7DA}
.fm-hero h1{margin-top:10px;font-size:42px;line-height:1.04;letter-spacing:-.035em}
.fm-sub{margin-top:12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.78);max-width:560px}
.fm-steps{display:flex;gap:12px;margin-top:24px}
.fm-steps div{flex:1;padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fm-steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2A1B5C;font-style:normal;font-size:12px;font-weight:800}
.fm-steps b{display:block;margin-top:9px;font-size:14.5px}
.fm-steps small{display:block;margin-top:1px;font-size:12.5px;color:rgba(255,255,255,.65)}
.fm-phone{justify-self:center;width:226px;padding:14px 13px 16px;border-radius:38px;background:#0F0C1D;box-shadow:0 0 0 7px #241D3D,0 0 0 8px rgba(255,255,255,.14),0 40px 60px -20px rgba(0,0,0,.6);transform:rotate(3deg);text-align:center}
.fm-bars{display:flex;gap:3px;margin:2px 4px 10px}.fm-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}.fm-bars i.on{background:#4ADE80}.fm-bars i.cur{background:#fff}
.fm-fr{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden}
.fm-fr img{width:100%;height:100%;object-fit:cover;opacity:.55}
.fm-fr span{position:absolute;left:50%;top:9px;transform:translateX(-50%);height:20px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;background:rgba(0,0,0,.5);font-size:10px;font-weight:700}
.fm-phone b{display:block;margin-top:10px;font-size:14px}
.fm-phone p{margin-top:3px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.7)}
.fm-rec{display:grid;place-items:center;width:46px;height:46px;margin:10px auto 0;border-radius:50%;box-shadow:inset 0 0 0 3px #fff}.fm-rec i{width:34px;height:34px;border-radius:50%;background:#FF3B30}
.fm-own{margin-top:18px}
.fm-own .ia-in input,.fm-own .ia-ph{font-size:15px}
/* the own-idea box: white, a slowly moving colour edge, example ideas typing in (23 Oct, Josh) */
.lab-ask.ia-box{position:relative;background:#fff;box-shadow:0 12px 26px -18px rgba(109,85,253,.55)}
.lab-ask.ia-box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(90deg,#6D55FD,#C24FD0,#F0628E,#FDBA74,#6D55FD);background-size:300% 100%;animation:iaFlow 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.lab-ask.ia-box:focus-within{box-shadow:0 0 0 4px rgba(109,85,253,.12),0 12px 26px -18px rgba(109,85,253,.55)}
.lab-ask.ia-box:focus-within::before{animation-duration:2.6s}
@keyframes iaFlow{to{background-position:300% 0}}
.lab-ask.ia-box>svg{animation:iaTw 2.8s ease-in-out infinite}
@keyframes iaTw{50%{transform:scale(1.18) rotate(12deg)}}
.ia-in{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center}
.ia-in input{width:100%;height:100%;background:none;border:0;outline:0;font:inherit}
.ia-box:not(:focus-within) .ia-in input::placeholder{color:transparent}
.ia-ph{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;color:var(--muted);pointer-events:none}
.ia-ph b{font-weight:600;color:var(--ink)}
.ia-cur{display:inline-block;width:2px;height:1.05em;margin-left:2px;border-radius:1px;vertical-align:-.16em;background:var(--vio);animation:iaBlink 1s steps(1) infinite}
@keyframes iaBlink{50%{opacity:0}}
.ia-box:focus-within .ia-ph,.ia-box.has .ia-ph{display:none}
@media (prefers-reduced-motion:reduce){.lab-ask.ia-box::before,.lab-ask.ia-box>svg,.ia-cur{animation:none}}

.fm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px}
.fm-bar h2{font-size:22px;letter-spacing:-.02em}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:14px 0 40px}
.fm-c{display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 12px 26px -18px rgba(15,26,51,.35);overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s}
.fm-c:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(109,85,253,.25),0 20px 36px -20px rgba(60,40,140,.45)}
.fm-ph{position:relative;height:160px;margin:6px 6px 0;border-radius:17px;overflow:hidden}
.fm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fm-len{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;background:rgba(15,12,30,.62);color:#fff;font-size:11.5px;font-weight:700}.fm-len svg{width:12px;height:12px}
.fm-b{flex:1;display:flex;flex-direction:column;padding:13px 15px 15px}
.fm-b b{font-size:16px;line-height:1.3;letter-spacing:-.01em}
.fm-b>small{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.4}
.fm-shots{display:flex;gap:5px;margin-top:12px}
.fm-shots span{position:relative;width:36px;height:46px;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px var(--hair2)}
.fm-shots img{width:100%;height:100%;object-fit:cover}
.fm-shots i{position:absolute;right:2px;bottom:2px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:6.5px}
.fm-meta{margin:8px 0 14px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.fm-go{margin-top:auto;height:42px;border-radius:12px;gap:7px}
.fm-b .fm-go{margin-top:auto}
.fm-go svg{width:17px;height:17px}
.fm-b .lab-ok{margin-top:auto}
.fm-none{color:var(--muted)}
@media (max-width:900px){.fm-hero{grid-template-columns:1fr}.fm-phone{display:none}}
/* director: shot list (23 Oct, Josh) */
#dirModal{z-index:54;width:min(980px,calc(100vw - 40px));max-height:calc(100vh - 48px);overflow-y:auto;padding:22px 28px 20px}
/* the ClipMagic mark inside every QR code */
.qrw{position:relative;display:block;width:100%;height:100%}
.qrw>svg{display:block;width:100%;height:100%}
.qrm{position:absolute;left:50%;top:50%;width:25%;height:25%;transform:translate(-50%,-50%);border-radius:24%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(20,10,60,.18)}
.qrm img{width:80%;height:auto;display:block}
/* Director on the calm Home (23 Oct) */
.ch-dir{position:relative;flex:none;display:grid;place-items:center;width:84px;height:118px;border-radius:22px;background:radial-gradient(90% 80% at 50% 30%,#EFEAFF,#F8F6FF 70%)}
.ch-tx p b{color:var(--ink)}
.ch-mk{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.ch-not{margin-top:6px;height:30px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ch-not:hover{color:var(--ink)}
.ni-new{margin-left:auto;height:18px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:linear-gradient(135deg,#8B6CFF,#6D55FD);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.ni-new[hidden]{display:none}
.plusmenu .pm-dir .e{background:var(--vio-l)}
/* Home concepts (23 Oct): A, B, C and D drop the week strip */
body.calm[data-hc]:not([data-hc="N"]) #v-home .sh.mtw,body.calm[data-hc]:not([data-hc="N"]) #v-home .wkcard{display:none!important}
body.calm[data-hc="N"] #v-home .sh.mtw{margin-top:34px}
body.calm[data-hc="B"] #calmAsk{display:none!important}
body.calm[data-hc="B"] #v-home .head .ask{display:flex!important;max-width:760px;margin-top:14px}
.hc-pick{position:fixed;z-index:60;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(24,24,27,.9);box-shadow:0 12px 28px -10px rgba(0,0,0,.45);font-size:12px;color:rgba(255,255,255,.6)}
.hc-pick[hidden]{display:none}
.hc-pick>span{white-space:nowrap;padding:0 8px 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hc-pick button{height:28px;padding:0 11px;white-space:nowrap;border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.78)}
.hc-pick button:hover{color:#fff}.hc-pick button.on{background:#fff;color:#18181B}
.hc-done{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#15803D}.hc-done svg{width:15px;height:15px}
/* A */
.hc-line{display:flex;align-items:center;gap:16px;max-width:1100px;margin-top:18px;padding:12px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 10px 24px -22px rgba(15,26,51,.35)}
.hc-lt{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.hc-dots{display:flex;gap:6px}
.hc-dots i{position:relative;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:#F4F2FB;color:var(--muted)}
.hc-dots i b{font-size:11px;font-weight:800}
.hc-dots i.ok{background:var(--vio-l);color:var(--vio)}.hc-dots i.chk{background:#FFF1DB;color:#B45309}.hc-dots i.mk{background:#F1EEFF;color:#8B78FF}
.hc-dots i.now{box-shadow:0 0 0 2px var(--vio)}
.hc-sum{flex:1;font-size:13.5px;color:var(--ink2)}
.hc-bar{display:flex;align-items:center;gap:16px;max-width:1100px;margin-top:10px;padding:12px 16px 12px 12px;border-radius:20px;background:linear-gradient(120deg,#1A1235,#2C1D5E 60%,#41216A);color:#fff;box-shadow:0 18px 34px -24px rgba(40,20,100,.7)}
.hc-ph{position:relative;flex:none;display:grid;place-items:center;width:58px;height:66px;border-radius:14px;background:rgba(255,255,255,.08)}
.hc-bt{flex:1;min-width:0}.hc-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#FFC7DA}
.hc-bt b{display:block;margin-top:2px;font-size:17px}.hc-bt small{display:block;margin-top:2px;font-size:13px;color:rgba(255,255,255,.72)}
.hc-bar .btn{flex:none;height:44px;padding:0 18px;border-radius:13px}
/* B */
.calm-hero.hc-dir{display:block!important;padding:0!important;overflow:hidden}
.calm-hero.hc-dir[hidden]{display:none!important}   /* the card's own grid squeezed the picture (23 Oct) */
.hcb{display:flex;align-items:stretch;min-height:100%}
.hcb-ph{position:relative;flex:none;width:42%;max-width:190px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#3B2A7A,#1A1235 70%)}
.hcb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:18px 18px}
.hcb-tx{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:20px 22px}
.hcb-tx h2{margin-top:6px;font-size:22px;letter-spacing:-.02em}.hcb-tx p{font-size:14px;line-height:1.45;color:var(--ink2)}.hcb-tx p b{color:var(--ink)}
.hcb-tx .btn{margin-top:10px;height:42px;padding:0 16px;border-radius:13px}
/* C */
.hcc{width:100%}
.hcc-h{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vio)}
.hcc-r{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--hair)}
.hcc-h+.hcc-r{margin-top:8px;border-top:0}
.hcc-e{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#F6F4FF;font-size:19px}
.hcc-t{flex:1;min-width:0}.hcc-t b{display:block;font-size:15.5px}.hcc-t small{display:block;margin-top:1px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcc-r .btn{flex:none;height:38px;padding:0 14px;border-radius:12px}
/* D: a calm dark card with the camera grid and the phone, no photo (23 Oct, Josh: "more generic… working for any business") */
.hcd2{position:relative;display:flex;align-items:center;gap:24px;max-width:1100px;margin-top:34px;padding:30px 34px;border-radius:26px;overflow:hidden;color:#fff;background:radial-gradient(60% 120% at 85% 20%,rgba(240,98,142,.32),transparent 70%),radial-gradient(50% 90% at 0% 100%,rgba(98,198,255,.18),transparent 70%),linear-gradient(135deg,#140F2B 0%,#22184A 55%,#341B5C 100%);box-shadow:0 26px 50px -30px rgba(20,10,60,.8)}
.hcd2-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.07) calc(33.33% - .5px),rgba(255,255,255,.07) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.07) calc(66.66% - .5px),rgba(255,255,255,.07) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.07) calc(33.33% - .5px),rgba(255,255,255,.07) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.07) calc(66.66% - .5px),rgba(255,255,255,.07) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.hcd2-vf i{position:absolute;width:20px;height:20px;border:0 solid rgba(255,255,255,.3)}
.hcd2-vf i:nth-child(1){left:16px;top:16px;border-top-width:2px;border-left-width:2px;border-top-left-radius:6px}
.hcd2-vf i:nth-child(2){right:16px;top:16px;border-top-width:2px;border-right-width:2px;border-top-right-radius:6px}
.hcd2-vf i:nth-child(3){left:16px;bottom:16px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:6px}
.hcd2-vf i:nth-child(4){right:16px;bottom:16px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:6px}
.hcd2-tx{position:relative;flex:1;min-width:0}
.hcd2-k{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#FFC7DA}
.hcd2-tx h3{margin-top:6px;font-size:32px;letter-spacing:-.03em}
.hcd2-tx>p{margin-top:6px;max-width:440px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.hcd2-flow{display:flex;align-items:center;gap:8px;margin-top:14px!important;font-size:13px;font-weight:700}
.hcd2-flow span{height:28px;padding:0 11px;border-radius:14px;display:inline-flex;align-items:center;background:linear-gradient(135deg,#8B6CFF,#6D55FD);color:#fff}
.hcd2-flow span.u{background:#fff;color:#141026}
.hcd2-flow i{font-style:normal;color:rgba(255,255,255,.45)}
.hcd2-a{display:flex;align-items:center;gap:16px;margin-top:18px}
.hcd2-a .btn{height:46px;padding:0 20px;border-radius:14px}
.hcd2-more{font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}.hcd2-more:hover{color:#fff}
.hcd2-art{position:relative;flex:none;width:240px;height:220px;display:grid;place-items:center}
.hcd2-chip{position:absolute;height:30px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;background:#fff;color:#141026;font-size:12.5px;font-weight:800;box-shadow:0 12px 24px -12px rgba(0,0,0,.6);animation:dphF 6s ease-in-out infinite}
.hcd2-chip.c1{left:0;top:52px;rotate:-5deg}.hcd2-chip.c2{right:0;bottom:46px;rotate:4deg;animation-delay:-3s;background:linear-gradient(135deg,#8B6CFF,#6D55FD);color:#fff}
/* the Director picture: a phone mid-recording (shared by both apps, 23 Oct) */
.dph{position:relative;flex:none;display:block;width:var(--w,64px);height:calc(var(--w,64px) * 1.86);font-size:calc(var(--w,64px) / 10);transform:rotate(-6deg);animation:dphF 6s ease-in-out infinite}
@keyframes dphF{50%{transform:rotate(-4deg) translateY(-.35em)}}
.dph-b{position:absolute;inset:0;padding:.42em;border-radius:1.55em;background:#0E0B1C;box-shadow:0 0 0 .12em rgba(255,255,255,.22),0 1.4em 2.4em -1em rgba(20,10,60,.65)}
.dph-s{position:relative;display:block;width:100%;height:100%;border-radius:1.15em;overflow:hidden;background:linear-gradient(165deg,#3B2A7A 0%,#22184A 60%,#160F33 100%)}
.dph-o{position:absolute;border-radius:50%;filter:blur(.8em);animation:dphO 7s ease-in-out infinite alternate}
.dph-o.o1{left:-10%;top:18%;width:5.5em;height:5.5em;background:rgba(255,183,107,.85)}
.dph-o.o2{right:-14%;top:38%;width:5em;height:5em;background:rgba(240,98,142,.75);animation-duration:9s}
.dph-o.o3{left:18%;bottom:6%;width:6em;height:4.5em;background:rgba(139,108,255,.85);animation-duration:8s}
@keyframes dphO{to{transform:translate(1em,-1.2em) scale(1.12)}}
.dph-g{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.dph-af{position:absolute;left:50%;top:44%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border:.13em solid #FFD60A;border-radius:.2em;animation:dphAf 3.2s ease-in-out infinite}
@keyframes dphAf{0%,100%{transform:scale(1);opacity:.95}10%{transform:scale(1.25);opacity:.5}20%{transform:scale(1);opacity:1}}
.dph-rec{position:absolute;left:.55em;top:.6em;display:inline-flex;align-items:center;gap:.3em;height:1.5em;padding:0 .45em;border-radius:.4em;background:#FF3B30}
.dph-rec i{width:.5em;height:.5em;border-radius:50%;background:#fff;animation:hrblink 1.2s steps(2) infinite}
.dph-rec b{font-size:.75em;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1}
.dph-sh{position:absolute;left:50%;bottom:.8em;width:2.6em;height:2.6em;margin-left:-1.3em;border-radius:50%;box-shadow:inset 0 0 0 .22em #fff}
.dph-sh i{position:absolute;inset:.75em;border-radius:.25em;background:#FF3B30}
/* D2–D5: calmer bottom banners (23 Oct, Josh: "a bit too busy… a few other concepts for the bottom one") */
.hd2{display:flex;align-items:center;gap:14px;max-width:1100px;margin-top:30px;padding:12px 14px 12px 12px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 10px 24px -22px rgba(15,26,51,.35)}
.hd2-ic{flex:none;display:grid;place-items:center;width:46px;height:56px;border-radius:13px;background:#F3F0FF}
.hd2 p{flex:1;font-size:14.5px;color:var(--ink2)}.hd2 p b{color:var(--ink)}
.hd2 .btn{height:38px;padding:0 15px;border-radius:12px}
.hd2-more{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}.hd2-more:hover{background:#F4F2FB;color:var(--vio)}.hd2-more svg{width:16px;height:16px}
.hd3{position:relative;display:flex;align-items:center;max-width:1100px;min-height:250px;margin-top:34px;padding:34px 40px;border-radius:28px;overflow:hidden;background:radial-gradient(70% 120% at 100% 50%,#E4DCFF,transparent 70%),linear-gradient(135deg,#F7F4FF,#EFEAFF)}
.hd3-tx{position:relative;z-index:1;flex:1}
.hd3-k{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vio)}
.hd3 h3{margin-top:8px;font-size:40px;line-height:1.02;letter-spacing:-.04em;color:var(--ink)}
.hd3 h3 span{background:linear-gradient(90deg,#6D55FD,#C24FD0 60%,#F0628E);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd3 p{margin:12px 0 18px;font-size:15px;color:var(--ink2)}
.hd3 .btn{height:46px;padding:0 20px;border-radius:14px}
.hd3-art{position:absolute;right:70px;bottom:-110px}
.hd3-art .dph{transform:rotate(-10deg)}
.hd4{max-width:1100px;margin-top:34px;padding:26px 28px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 16px 34px -26px rgba(15,26,51,.4)}
.hd4-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hd4-k{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vio)}
.hd4 h3{margin-top:4px;font-size:24px;letter-spacing:-.025em}.hd4-h p{margin-top:3px;font-size:14px;color:var(--muted)}
.hd4-h .btn{height:44px;padding:0 18px;border-radius:13px}
.hd4-row{display:flex;align-items:flex-start;gap:14px;margin-top:20px}
.hd4-s{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hd4-f{position:relative;display:grid;place-items:center;width:100%;height:126px;border-radius:18px;overflow:hidden}
.hd4-f.f1{background:radial-gradient(90% 80% at 50% 30%,#EFEAFF,#F8F6FF 70%)}
.hd4-f.f2{background:linear-gradient(160deg,#2B2152,#1A1532);gap:8px;align-content:center}
.hd4-f.f3{background:radial-gradient(90% 80% at 50% 30%,#FFEEF5,#FFF8FB 70%)}
.hd4-cap{padding:3px 8px;border-radius:6px;background:#FDE047;color:#1B1405;font-size:11px;font-weight:900}
.hd4-wv{display:flex;align-items:center;gap:2px;height:18px}.hd4-wv i{width:3px;height:var(--h);border-radius:2px;background:#A78BFA;animation:dw3Wv .8s ease-in-out var(--d) infinite alternate}
.hd4-tags{display:flex;gap:4px}.hd4-tags em{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;font-style:normal;font-size:11px}
.hd4-post{position:relative;width:62px;height:76px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#FFB76B,#F0628E 60%,#8B6CFF);box-shadow:0 10px 20px -10px rgba(240,98,142,.6)}
.hd4-post i{position:absolute;left:6px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;opacity:.85}
.hd4-ht{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;color:#fff;animation:hd4Ht 2.4s ease-in-out infinite}
@keyframes hd4Ht{0%,60%,100%{transform:translate(-50%,-50%) scale(1)}70%{transform:translate(-50%,-50%) scale(1.25)}}
.hd4-ok{position:absolute;bottom:10px;height:20px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;background:#DCFCE7;color:#15803D;font-size:10.5px;font-weight:800}
.hd4-s b{margin-top:10px;display:inline-flex;height:24px;padding:0 10px;border-radius:12px;align-items:center;background:#141026;color:#fff;font-size:12.5px}
.hd4-s b.we{background:linear-gradient(135deg,#8B6CFF,#6D55FD)}
.hd4-s small{margin-top:5px;font-size:12.5px;color:var(--muted)}
.hd4-ar{margin-top:54px;font-style:normal;font-weight:800;color:#C4B5FD}
.hd5{display:flex;align-items:center;gap:20px;max-width:1100px;margin-top:34px;padding:30px 40px 30px 34px;overflow:hidden;border-radius:26px;color:#fff;background:linear-gradient(135deg,#1A1235,#2A1B55 60%,#3A1D5E);box-shadow:0 22px 44px -30px rgba(20,10,60,.8)}
.hd5-tx{flex:1}.hd5 h3{font-size:28px;letter-spacing:-.03em}.hd5 p{margin:6px 0 16px;font-size:14.5px;color:rgba(255,255,255,.75)}
.hd5 .btn{height:44px;padding:0 18px;border-radius:13px}
.hd5-art{flex:none;width:150px;align-self:flex-end;display:grid;place-items:center;margin:0 20px -70px 0}
/* Add a post, round 2 (23 Oct, Josh: "make this pop-up next level"). Classes are pz-*, never ad-*: Josh's ad blocker hides those */
#addModal{width:min(580px,calc(100vw - 40px));padding:26px 26px 22px}
.pz-x{position:absolute;right:16px;top:16px}
.pz-h{display:flex;align-items:center;gap:16px;padding-right:46px}
.pz-cal{flex:none;width:58px;height:64px;border-radius:15px;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 12px 22px -14px rgba(60,40,140,.5)}
.pz-cal[hidden]{display:none}
.pz-cal small{display:block;width:100%;height:19px;line-height:19px;text-align:center;background:linear-gradient(135deg,#8B6CFF,#6D55FD);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em}
.pz-cal b{margin-top:3px;font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pz-cal i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted)}
.pz-h h2{font-size:23px;letter-spacing:-.025em}
#addModal .pz-h .sub{margin-top:3px;line-height:1.45}
.pz-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin-top:20px;height:160px;padding-bottom:22px;border-radius:20px;text-align:center;cursor:pointer;background:radial-gradient(80% 100% at 50% 0%,#F1ECFF,#FAF9FF 75%);box-shadow:inset 0 0 0 1.5px #E6E0FA;transition:transform .35s var(--spring),background .3s}
.pz-drop::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(90deg,#6D55FD,#C24FD0,#F0628E,#FDBA74,#6D55FD) 0 0/300% 100%;opacity:0;transition:opacity .3s;animation:iaFlow 5s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.pz-drop:hover::before,.pz-drop.drag::before{opacity:1}
.pz-drop:hover{transform:translateY(-1px)}
.pz-drop.drag{transform:scale(1.015);background:radial-gradient(80% 100% at 50% 0%,#E7DFFF,#F4F0FF 75%)}
.pz-dic{width:50px;height:50px;margin-bottom:8px;border-radius:16px;display:grid;place-items:center;background:#fff;color:var(--vio);box-shadow:0 12px 22px -10px rgba(109,85,253,.55);transition:transform .4s var(--spring)}
.pz-dic svg{width:24px;height:24px}
.pz-drop:hover .pz-dic{transform:translateY(-4px)}
.pz-drop.drag .pz-dic{transform:translateY(-6px) scale(1.08)}
.pz-drop b{font-size:16px;font-weight:700}
.pz-drop small{font-size:13.5px;color:var(--ink2)}.pz-drop small u{text-decoration:none;font-weight:700;color:var(--vio)}
.pz-drop em{position:absolute;left:16px;right:16px;bottom:13px;font-style:normal;font-size:12px;color:var(--muted)}
.pz-lib{margin-top:16px}
.pz-lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pz-lh b{font-size:14px;font-weight:700}
.pz-lh button{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 6px 0 10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--vio)}
.pz-lh button:hover{background:var(--vio-l)}.pz-lh svg{width:15px;height:15px}
.pz-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
/* sized with padding, not aspect-ratio: some browsers ignore aspect-ratio on buttons and the row collapsed (23 Oct) */
.pz-ph{position:relative;display:block;width:100%;height:104px;min-height:104px;padding:0;border-radius:13px;overflow:hidden;background:#F4F2FB;box-shadow:0 0 0 1px var(--hair2);transition:transform .35s var(--spring),box-shadow .2s}
.pz-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pz-ph:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--vio),0 12px 22px -12px rgba(109,85,253,.55)}
.pz-ph:hover img{transform:scale(1.06)}
.pz-ph>i{position:absolute;z-index:1;right:6px;top:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--vio);color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--spring)}
.pz-ph>i svg{width:12px;height:12px}
.pz-ph:hover>i,.pz-ph.pick>i{opacity:1;transform:none}
.pz-ph.pick{box-shadow:0 0 0 2.5px var(--vio)}
.pz-ph.more{background:#F6F4FF;color:var(--vio)}
.pz-ph.more span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.pz-ph.more b{font-size:18px;font-weight:800}.pz-ph.more small{font-size:11.5px;font-weight:700}
.pz-dir{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:14px;padding:6px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--ink2);transition:background .2s,color .2s}
.pz-dir:hover{background:#F6F4FF;color:var(--ink)}
.pz-dir em{font-style:normal;font-weight:500;color:var(--muted)}.pz-dir em::before{content:"·";margin-right:6px}
.pz-dir>svg{width:15px;height:15px;color:var(--vio);transition:transform .3s var(--spring)}.pz-dir:hover>svg{transform:translateX(3px)}
.pz-cam{position:relative;flex:none;width:26px;height:26px;border-radius:8px;overflow:hidden;background:#0E0B1C}
.pz-cam img{width:100%;height:100%;object-fit:cover;display:block}
.pz-cam>i{position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#FF3B30;box-shadow:0 0 0 1.5px #fff;animation:hrblink 1.2s steps(2) infinite}
.pz-ask{margin-top:12px;padding-left:9px}
.pz-sc{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(60,30,180,.5)}
.pz-ask .ia-in input,.pz-ask .ia-ph{font-size:14.5px}
/* entrances move only, so nothing is ever hidden if you look early */
#addModal.in .pz-h,#addModal.in .pz-drop,#addModal.in .pz-lib,#addModal.in .pz-ask,#addModal.in .pz-dir{animation:adUp .6s var(--spring) backwards}
@keyframes adUp{from{transform:translateY(14px)}}
#addModal.in .pz-drop{animation-delay:.04s}#addModal.in .pz-lib{animation-delay:.08s}#addModal.in .pz-ask{animation-delay:.12s}#addModal.in .pz-dir{animation-delay:.16s}
#addModal.in .pz-ph{animation:adUp .6s var(--spring) backwards}#addModal.in .pz-ph:nth-child(2){animation-delay:.03s}#addModal.in .pz-ph:nth-child(3){animation-delay:.06s}#addModal.in .pz-ph:nth-child(4){animation-delay:.09s}#addModal.in .pz-ph:nth-child(5){animation-delay:.12s}#addModal.in .pz-ph:nth-child(6){animation-delay:.15s}
#addModal.in .pz-cal{animation:adCal .7s var(--spring) .1s backwards}
@keyframes adCal{from{opacity:0;transform:translateY(-10px) rotate(-8deg)}}
/* Ideas Lab, round 2: a lab band (your ingredients flow into a flask), then small text-led idea cards (23 Oct) */
#labModal{width:min(900px,calc(100vw - 40px));padding:0;overflow-x:hidden}
.il-hd{position:relative;display:flex;align-items:center;gap:24px;min-height:176px;padding:26px 30px;color:#fff;overflow:hidden;background:linear-gradient(135deg,#130E29 0%,#22184A 55%,#341B5C 100%)}
.il-au i{position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none;animation:dw3Drift 22s ease-in-out infinite alternate}
.il-au i:nth-child(1){left:-6%;top:-60%;width:380px;height:280px;background:rgba(123,97,255,.5)}
.il-au i:nth-child(2){right:-8%;bottom:-70%;width:360px;height:260px;background:rgba(240,98,142,.32);animation-duration:26s}
.il-hd .il-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;-webkit-mask:radial-gradient(80% 90% at 70% 50%,#000,transparent);mask:radial-gradient(80% 90% at 70% 50%,#000,transparent)}
.il-ht{position:relative;flex:1;min-width:0}
.il-eye{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.12);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#E9E3FF}
.il-ht h2{margin-top:10px;font-size:26px;line-height:1.12;letter-spacing:-.03em;color:#fff}
.il-ht>p:last-child{margin-top:7px;max-width:370px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.il-x{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.14);color:#fff}
.il-x:hover{background:rgba(255,255,255,.24)}
.il-mixr{position:relative;flex:none;display:flex;align-items:center;margin-right:24px}
.il-ing{display:flex;flex-direction:column;gap:6px}
.il-ing span{height:26px;padding:0 10px;border-radius:13px;display:inline-flex;align-items:center;align-self:flex-end;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:12px;font-weight:700;white-space:nowrap;animation:ilIng 1.8s ease-in-out var(--d) infinite}
@keyframes ilIng{0%,100%{background:rgba(255,255,255,.1)}40%{background:rgba(196,181,253,.28)}}
.il-flow{position:relative;width:52px;height:110px}
.il-flow i{position:absolute;left:0;top:calc(50% + var(--y));width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#EDE9FE;box-shadow:0 0 10px 3px rgba(167,139,250,.75);opacity:0;animation:ilGo 1.8s ease-in-out var(--d) infinite}
@keyframes ilGo{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(48px,calc(var(--y) * -1));opacity:0}}
.il-flask{position:relative;width:64px;height:64px}
.il-flask svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 18px rgba(123,97,255,.55))}
.il-liq{animation:ilLiq 3.6s ease-in-out infinite}
@keyframes ilLiq{50%{transform:translateY(-3px)}}
.il-bb{fill:#fff;opacity:0;animation:ilBb 2.2s ease-in infinite}
.il-bb.b2{animation-delay:.7s}.il-bb.b3{animation-delay:1.4s}
@keyframes ilBb{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-22px)}}
.il-hd.mixing .il-bb,.il-hd.mixing .il-flow i,.il-hd.mixing .il-ing span{animation-duration:.8s}
.il-out{display:flex;flex-direction:column;align-items:center;margin-left:12px;line-height:1}
.il-out b{font-size:30px;font-weight:800;letter-spacing:-.03em}.il-out small{margin-top:3px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.7)}
.il-bd{padding:20px 30px 22px}
.il-ask{margin-top:0}
.il-ask .ia-in input,.il-ask .ia-ph{font-size:15px}
.il-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.il-tabs button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:11px;background:#F4F2FB;font-size:13.5px;font-weight:600;color:var(--ink2);transition:background .2s,color .2s}
.il-tabs button:hover{background:#ECE8FB;color:var(--ink)}
.il-tabs button.on{background:var(--ink);color:#fff}
.il-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.il-c{display:flex;gap:12px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 8px 18px -16px rgba(15,26,51,.35);transition:box-shadow .2s,transform .3s var(--spring);animation:adUp .5s var(--spring) var(--d) backwards}
.il-c:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(109,85,253,.28),0 14px 26px -18px rgba(60,40,140,.45)}
.il-c.done{opacity:.7}
.il-th{position:relative;flex:none;width:58px;height:58px;border-radius:12px;overflow:hidden;background:#EEE}
.il-th img{width:100%;height:100%;object-fit:cover;display:block}
.il-th i{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(15,12,30,.62);color:#fff}
.il-th i svg{width:11px;height:11px}
.il-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.il-mx{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--vio)}
.il-mx span{height:20px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;background:#F3F0FF;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.il-mx i{font-style:normal;color:#B9AEF5;font-weight:800}
.il-tx>b{margin-top:6px;font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.il-tx>small{margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.il-a{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:9px}
.il-mk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;background:var(--vio-l);color:var(--vio);font-size:12.5px;font-weight:700;transition:background .2s,color .2s}
.il-mk:hover{background:var(--vio);color:#fff}.il-mk svg{width:13px;height:13px}
.il-k{font-size:11.5px;font-weight:600;color:var(--muted)}
.il-sv{margin-left:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.il-sv:hover{background:#F4F2FB;color:var(--vio)}.il-sv svg{width:15px;height:15px}
.il-a .lab-ok{height:30px;font-size:12.5px}
#labModal .lab-foot{margin-top:16px}
@media (max-width:860px){.il-grid2{grid-template-columns:1fr}.il-mixr{display:none}}
/* the shoot pop-up, simplified (23 Oct, Josh: "way more simple… scan the QR code and let's shoot") */
.dc-g.up{grid-template-columns:1fr}
.dq{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;padding:12px 2px 2px}
.dq-k{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:14px;background:var(--vio-l);color:var(--vio);font-size:12.5px;font-weight:800}
.dq-k svg{width:15px;height:15px}
.dq-l h2{margin-top:14px;max-width:520px;font-size:32px;line-height:1.1;letter-spacing:-.035em}
.dq-sub{margin-top:10px;max-width:480px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.dq-lbl{margin-top:26px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dq-opts{display:grid;gap:8px;margin-top:10px}
.dq-o{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;text-align:left;box-shadow:0 0 0 1px var(--hair2);transition:box-shadow .2s,transform .3s var(--spring),background .2s}
.dq-o:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(109,85,253,.3),0 10px 20px -14px rgba(60,40,140,.35)}
.dq-o.on{background:#FBFAFF;box-shadow:0 0 0 2px var(--vio),0 12px 24px -16px rgba(109,85,253,.55)}
.dq-o.new{animation:dqNew .6s var(--spring)}
@keyframes dqNew{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.dq-im{flex:none;width:48px;height:58px;border-radius:11px;overflow:hidden}
.dq-im img{width:100%;height:100%;object-fit:cover;display:block}
.dq-tx{flex:1;min-width:0}
.dq-tx em{display:inline-block;margin-bottom:3px;padding:1px 7px;border-radius:6px;background:var(--vio-l);color:var(--vio);font-style:normal;font-size:11px;font-weight:800}
.dq-tx b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-tx small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.dq-ck{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--hair2);color:transparent;transition:background .2s,box-shadow .2s,transform .35s var(--spring)}
.dq-ck svg{width:13px;height:13px}
.dq-o.on .dq-ck{background:var(--vio);box-shadow:none;color:#fff;transform:scale(1.06)}
.dq-own{margin-top:14px}
.dq-own .ia-in input,.dq-own .ia-ph{font-size:15px}
.dq-own .btn{gap:7px}.dq-own .btn:disabled{opacity:.75}
.dq-own .btn .spin2{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.dq-r{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:58px 22px 18px;border-radius:26px;background:radial-gradient(120% 70% at 50% 0%,#EEE9FF,transparent 70%),#FAF9FF;box-shadow:inset 0 0 0 1px rgba(109,85,253,.12)}
.dq-x{position:absolute;right:12px;top:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2)}
.dq-qr{position:relative;width:212px;height:212px;padding:18px;border-radius:26px;background:#fff;box-shadow:0 22px 40px -24px rgba(40,20,100,.55),0 0 0 1px var(--hair2)}
.dq-qr .qr{width:100%;height:100%}.dq-qr .qr svg{display:block;width:100%;height:100%}
.dq-qr .qr.swap{animation:dqSwap .55s var(--spring)}
@keyframes dqSwap{from{opacity:0;transform:scale(.88);filter:blur(5px)}}
.dq-cn{position:absolute;inset:0;pointer-events:none;animation:dqBreathe 2.8s ease-in-out infinite}
@keyframes dqBreathe{50%{transform:scale(1.035)}}
.dq-cn i{position:absolute;width:28px;height:28px;border:0 solid var(--vio)}
.dq-cn i:nth-child(1){left:-7px;top:-7px;border-top-width:3px;border-left-width:3px;border-top-left-radius:14px}
.dq-cn i:nth-child(2){right:-7px;top:-7px;border-top-width:3px;border-right-width:3px;border-top-right-radius:14px}
.dq-cn i:nth-child(3){left:-7px;bottom:-7px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:14px}
.dq-cn i:nth-child(4){right:-7px;bottom:-7px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:14px}
.dq-scan{position:absolute;left:16px;right:16px;top:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#8B6CFF,transparent);box-shadow:0 0 12px 2px rgba(139,108,255,.45);opacity:0;animation:dqScan 3.4s ease-in-out infinite;pointer-events:none}
@keyframes dqScan{0%{top:16px;opacity:0}12%{opacity:1}50%{top:calc(100% - 18px);opacity:1}62%,100%{top:calc(100% - 18px);opacity:0}}
.dq-qt{display:block;margin-top:22px;font-size:16px;letter-spacing:-.01em}
.dq-qs{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.dq-wait{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:30px;padding:0 12px;border-radius:15px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:12.5px;font-weight:700;color:var(--ink2)}
.dq-wait i{position:relative;width:8px;height:8px;border-radius:50%;background:#22C55E}
.dq-wait i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;animation:dqPing 1.8s ease-out infinite}
@keyframes dqPing{to{transform:scale(2.8);opacity:0}}
.dq-alt{display:flex;flex-direction:column;align-items:center;margin-top:12px}
.dq-alt button{height:30px;font-size:13px;font-weight:700;color:var(--vio)}
.dq-alt button:hover{text-decoration:underline;text-underline-offset:3px}
.dq-team{display:flex;justify-content:center;gap:10px;margin-top:8px;animation:dw3Rise .45s var(--spring)}
.dq-team[hidden]{display:none}
.dq-team button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--ink2)}
.dq-team .av{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair2);font-size:12px;font-weight:800;transition:box-shadow .2s,transform .3s var(--spring)}
.dq-team .av img{width:100%;height:100%;object-fit:cover}
.dq-team .av.own{background:linear-gradient(135deg,#7B61FF,#4C35D9);color:#fff;font-size:15px}
.dq-team button:hover .av{transform:translateY(-2px)}
.dq-team button.on .av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vio)}
.dq-foot{display:flex;justify-content:center;margin-top:18px;padding-top:12px;border-top:1px solid var(--hair)}
.dq-up{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--muted)}
.dq-up:hover{background:#F4F2FB;color:var(--ink)}.dq-up svg{width:15px;height:15px}
#dirModal.on .dq-l>*{animation:dw3Blur .6s var(--ease) backwards}
#dirModal.on .dq-l>:nth-child(2){animation-delay:.05s}#dirModal.on .dq-l>:nth-child(3){animation-delay:.1s}#dirModal.on .dq-l>:nth-child(4),#dirModal.on .dq-l>:nth-child(5){animation-delay:.15s}#dirModal.on .dq-l>:nth-child(6){animation-delay:.2s}
#dirModal.on .dq-r{animation:dqIn .7s var(--spring) .08s backwards}
@keyframes dqIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (max-width:900px){.dq{grid-template-columns:1fr}.dq-r{order:-1}}

.dir-h{display:flex;align-items:center;justify-content:space-between}
.dir-h .pback2{margin:0}
.dir-g{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;margin-top:14px;align-items:start}
.dir-eye{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--vio)}
.dir-l h2{margin-top:6px;font-size:28px;line-height:1.15;letter-spacing:-.03em}
.dir-sub{margin-top:6px;font-size:15px;color:var(--muted);max-width:560px}
.dir-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.dir-list li{display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 8px 18px -14px rgba(15,26,51,.3)}
.dir-list li.got{box-shadow:0 0 0 1.5px #86EFAC,0 8px 18px -14px rgba(15,26,51,.3)}
.dir-list .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#F4F2FB;font-size:13px;font-weight:800;color:var(--ink2)}
.dir-list li.got .n{background:#16A34A;color:#fff}.dir-list .n svg{width:14px;height:14px}
.dir-list .ex{position:relative;flex:none;width:64px;height:80px;border-radius:12px;overflow:hidden}
.dir-list .ex img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.dir-list .ex i{position:absolute;left:0;right:0;bottom:0;padding:10px 0 4px;text-align:center;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.dir-list .tx{flex:1;min-width:0}
.dir-list .tx b{display:block;font-size:15.5px;font-weight:700}
.dir-list .tx small{display:block;margin-top:2px;font-size:13.5px;color:var(--ink2);line-height:1.4}
.dir-list .tx small.tip{color:#9A6B12}
.dir-list .tx em{display:inline-block;margin-top:6px;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.dir-up{position:relative;flex:none;width:96px;height:96px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--vio-l);color:var(--vio);font-size:12.5px;font-weight:700;cursor:pointer;overflow:hidden;transition:background .15s}
.dir-up:hover{background:#E4DEFF}
.dir-up svg{width:20px;height:20px}
.dir-up.got img,.dir-up.got video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dir-up.got span{position:absolute;left:6px;right:6px;bottom:6px;height:22px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:11px}
.dir-ph{position:sticky;top:0;padding:20px;border-radius:22px;text-align:center;background:linear-gradient(160deg,#F5F2FF,#FFF1F6);box-shadow:inset 0 0 0 1px rgba(109,85,253,.12)}
.dir-pic{width:64px;height:64px;margin:0 auto 10px;border-radius:20px;display:grid;place-items:center;background:#fff;font-size:30px;box-shadow:0 10px 24px -14px rgba(60,40,140,.5)}
.dir-ph b{display:block;font-size:16px}
.dir-ph p{margin-top:5px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.dir-ph .btn{margin-top:12px;width:100%;height:42px;border-radius:12px}
.dir-ph small{display:block;margin-top:9px;font-size:12px;color:var(--muted)}
.dir-foot{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.dir-skip{height:40px;padding:0 6px;font-size:14px;font-weight:600;color:var(--muted)}
.dir-skip:hover{color:var(--ink)}
.dir-n{margin-left:auto;font-size:13.5px;font-weight:600;color:#15803D}
.dir-foot .btn.pri{height:46px;padding:0 20px;border-radius:14px}
.dir-foot .btn.pri:disabled{opacity:.4;cursor:not-allowed}
.lab-need{display:inline-block;align-self:flex-start;margin-top:7px;padding:3px 8px;border-radius:7px;background:#F1EEFF;color:var(--vio);font-size:11.5px;font-weight:700}
@media (max-width:800px){.dir-g{grid-template-columns:1fr}}
.lab-ev{align-self:flex-start;display:inline-flex;align-items:center;height:22px;margin-bottom:6px;padding:0 8px;border-radius:7px;background:#FFF1E6;color:#B4501A;font-size:11.5px;font-weight:800;letter-spacing:.02em}
#labModal{width:min(900px,calc(100vw - 40px));max-height:calc(100vh - 48px);overflow-y:auto;padding:0;scrollbar-width:thin}
.lab-h{display:flex;align-items:flex-start;gap:14px}
.lab-ic{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#FFF6D6,#FFE7F1);color:#B7791F;box-shadow:inset 0 0 0 1px rgba(183,121,31,.15)}
.lab-ic svg{width:24px;height:24px}
.lab-h>div{flex:1;min-width:0}
.lab-h h2{font-size:26px;letter-spacing:-.03em;line-height:1.15}
.lab-h p{margin-top:3px;font-size:14.5px;color:var(--muted)}
.lab-ask{display:flex;align-items:center;gap:10px;margin-top:18px;height:54px;padding:0 7px 0 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 8px 20px -14px rgba(60,40,140,.35)}
.lab-ask:focus-within{box-shadow:0 0 0 2px var(--vio),0 8px 20px -14px rgba(60,40,140,.35)}
.lab-ask>svg{width:18px;height:18px;flex:none;color:var(--vio)}
.lab-ask input{flex:1;min-width:0;height:100%;font-size:15px}
.lab-ask .btn{height:40px;border-radius:12px;padding:0 16px}
.lab-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lab-tabs button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:13px;background:#F4F2FB;font-size:14.5px;font-weight:600;color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.lab-tabs button:hover{background:#ECE8FB}
.lab-tabs button.on{background:var(--ink);color:#fff}
.lab-q{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:15px;color:var(--ink2)}
.lab-q button{height:34px;padding:0 12px;border-radius:10px;background:#F4F2FB;font-size:13.5px;font-weight:600}
.lab-prods{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lab-prods button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 5px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:14px;font-weight:600;color:var(--ink2)}
.lab-prods button:first-child{padding-left:13px}
.lab-prods img{width:28px;height:28px;border-radius:8px;object-fit:cover}
.lab-prods button.on{box-shadow:0 0 0 2px var(--vio);color:var(--vio);background:var(--vio-l)}
.lab-body{margin-top:18px;transition:opacity .2s}
.lab-body.out,.lab-body.think{opacity:.35}
.lab-sh{margin:18px 0 10px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lab-sh:first-child{margin-top:0}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.lab-c{display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 12px 26px -18px rgba(15,26,51,.35);overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s}
.lab-c:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(109,85,253,.25),0 20px 36px -20px rgba(60,40,140,.45)}
.lab-ph{position:relative;height:150px;margin:6px 6px 0;border-radius:15px;overflow:hidden;background:#EEE}
.lab-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--spring)}
.lab-c:hover .lab-ph img{transform:scale(1.05)}
.lab-k{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;background:rgba(15,12,30,.62);color:#fff;font-size:11.5px;font-weight:700}
.lab-k svg{width:12px;height:12px}
.lab-tx{flex:1;display:flex;flex-direction:column;padding:12px 14px 14px}
.lab-tx b{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.lab-tx small{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.4}
.lab-a{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.lab-mk{flex:1;height:40px;border-radius:12px}
.lab-sv{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--hair2);color:var(--ink2)}
.lab-sv:hover{color:var(--vio);box-shadow:0 0 0 1.5px var(--vio)}
.lab-sv svg{width:17px;height:17px}
.lab-ok{display:flex;align-items:center;gap:6px;height:40px;font-size:13.5px;font-weight:600;color:#15803D}
.lab-ok svg{width:15px;height:15px;flex:none}
.lab-c.done .lab-ph{opacity:.75}
.lab-foot{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.lab-foot span{font-size:13px;color:var(--muted)}
.lab-shuf{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:12px;background:#F4F2FB;font-size:14px;font-weight:700;color:var(--ink)}
.lab-shuf:hover{background:#ECE8FB}
.lab-shuf svg{width:16px;height:16px}
.pplan{margin-top:14px;padding:4px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -10px rgba(24,24,27,.18)}
.pplan div{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
.pplan div:first-child{border-top:0}
.pplan i{width:34px;height:34px;border-radius:10px;background:#F6F4FF;display:grid;place-items:center;font-style:normal;font-size:16px;flex:none}
.pplan b{display:block;font-size:14.5px;font-weight:650}.pplan small{display:block;font-size:12.5px;color:var(--muted)}
.pdur{display:flex;justify-content:center;margin-top:12px}
/* post now (Josh, 22 Oct) */
.times button.nowt{font-weight:800}
.times button.nowt.on{background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
.when button.nowd b{font-size:14px}
.when button.nowd.on{background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
.when button.nowd.on small{color:rgba(255,255,255,.8)}
.mini .igh{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--muted)}

/* the view-a-post modal */
.modal .panel .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.modal .panel .stat div{padding:12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.modal .panel .stat b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.modal .panel .stat small{font-size:12px;color:var(--muted)}
.capro{padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair);font-size:14px;line-height:1.5;color:var(--ink2)}
.when.ten{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1240px){.tis,.opps{grid-template-columns:repeat(2,minmax(0,1fr))}.lgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ---------- businesses: the sidebar card switches between them (22 Oct) ---------- */
body.estate{--logo:url(https://clipmagic.tech/webapp/media/hl-mask.png);--logo-mono:url(https://clipmagic.tech/webapp/media/hl-mono.png);--lg-bg:#0F2A3D;--lg-ink:#E8C77E;--lg-w:27px;--lg-h:10px}
.side{position:relative}
.ws{width:100%;text-align:left;color:#fff;cursor:pointer;transition:background .15s,box-shadow .15s}
.ws:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wsmenu{position:absolute;z-index:30;left:16px;right:14px;top:150px;padding:8px;border-radius:18px;background:#1B1632;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 50px -16px rgba(0,0,0,.7);color:#fff;animation:fadein .2s var(--ease)}
.wsmenu p{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,226,255,.5);padding:6px 8px 6px}
.wsmenu button{display:flex;align-items:center;gap:11px;width:100%;padding:8px;border-radius:12px;text-align:left}
.wsmenu button:hover{background:rgba(255,255,255,.07)}
.wsmenu b{display:block;font-size:14px;font-weight:600}
.wsmenu small{display:block;font-size:12px;color:rgba(232,226,255,.6);margin-top:1px}
.wsmenu .ok{width:16px;height:16px;margin-left:auto;color:#B4A6FF;opacity:0}
.wsmenu button.on .ok{opacity:1}
.wsmenu .lg{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.wsmenu .lg i{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.wsmenu .lg.cafe{background:#F7F0E6}.wsmenu .lg.cafe i{width:26px;height:8px;background:#C8102E;-webkit-mask-image:url(https://clipmagic.tech/webapp/media/gails-mask.png);mask-image:url(https://clipmagic.tech/webapp/media/gails-mask.png)}
.wsmenu .lg.estate{background:#0F2A3D}.wsmenu .lg.estate i{width:25px;height:9px;background:#E8C77E;-webkit-mask-image:url(https://clipmagic.tech/webapp/media/hl-mono.png);mask-image:url(https://clipmagic.tech/webapp/media/hl-mono.png)}
.wsmenu hr{border:0;height:1px;background:rgba(255,255,255,.08);margin:6px 4px}
.wsmenu .add{color:#C9BDFF;font-size:13.5px;font-weight:600;padding:10px 8px}
body.estate .poster .wm{width:46%;height:5%}
body.estate .upframe .brandmark{width:46%;height:4%}
.kitlogo{height:96px;border-radius:16px;background:var(--lg-bg);display:grid;place-items:center}
.kitlogo i{width:150px;height:40px;background:var(--lg-ink);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
body.estate .kitlogo i{width:230px;height:22px}
.sh.mtw{margin-top:36px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi.reach{background:linear-gradient(135deg,#fff,#EEFBFC)}
.kpi.reach em{color:#0E7C86}
.ws>div{min-width:0;flex:1}
.ws small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#listingsWrap[hidden]+.sh.mtw,#listingsWrap[hidden]~.sh.mtw{margin-top:8px}
.facts{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ok)}
.facts svg{width:15px;height:15px;flex:none}
/* estate agents: the listings, first on Home */
.lsgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lcard{display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:var(--shadow);overflow:hidden;text-align:left;min-width:0}
.lph{position:relative;height:150px;background:#eee}
.lph img{width:100%;height:100%;object-fit:cover}
.lph::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,10,20,.5))}
.lst{position:absolute;z-index:1;left:10px;top:10px;height:24px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:800;display:flex;align-items:center}
.lpr{position:absolute;z-index:1;left:12px;bottom:10px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.lbd{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;min-width:0}
.lbd>b{font-size:15px;font-weight:700;line-height:1.25}
.lbd>small{font-size:12.5px;color:var(--muted);margin-top:2px}
.lposts{display:grid;gap:4px;margin-top:10px}
.lp{display:flex;align-items:center;gap:6px;width:100%;height:28px;padding:0 8px;border-radius:9px;background:#F6F5FA;font-size:12.5px;font-weight:600;text-align:left;min-width:0}
.lp span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.lp.posted em,.lp.ok em{color:var(--ok)}.lp.ready{background:#FFF6E3}.lp.ready em{color:var(--amber)}.lp.making em{color:var(--vio)}
.lp:hover{background:#EFEBFF}
.lposts .none{font-size:12.5px;color:var(--faint);padding:4px 0}
.lacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}
.lacts button{height:30px;padding:0 9px;border-radius:9px;box-shadow:0 0 0 1px var(--hair2);font-size:12px;font-weight:700;color:var(--ink2);background:#fff}
.lacts button:hover{box-shadow:0 0 0 1.5px #B9A8FF;color:var(--vio)}
.lacts button:disabled{opacity:.4;cursor:default}
.lacts .done{font-size:12px;color:#BE185D;font-weight:600;line-height:1.35}
.ladd{align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;background:#FBFAFF;box-shadow:inset 0 0 0 1.5px #E4DEFF;color:var(--vio)}
.ladd i{width:40px;height:40px;border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center;box-shadow:var(--btn-sh)}
.ladd i svg{width:18px;height:18px}
.ladd b{font-size:15.5px}
.ladd small{font-size:12.5px;color:var(--muted);line-height:1.45}
.ladd:hover{box-shadow:inset 0 0 0 1.5px #B9A8FF}
@media (max-width:1240px){.lsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cards rise in when a page opens */
.view.enter .card,.view.enter .ti,.view.enter .opp,.view.enter .mode,.view.enter .seg{animation:rise .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.view.enter .head,.view.enter .title,.view.enter .titlesub,.view.enter .sh,.view.enter .rkhead{animation:rise .45s var(--ease) backwards}

/* ================= CALM HOME (22 Oct): one next step, the week, three ideas. Switch in the sidebar's prototype row. ================= */
body.calm #v-home .quick,body.calm #v-home .sh.mt:has(+ .card.myo),body.calm #v-home .card.myo,body.calm #v-home .sh.mt:has(+ .opps),body.calm #v-home .opps,body.calm #wkFoot,body.calm #newIdeas,body.calm #sideTell{display:none!important}
.calm-hero,.asklbl,.plusbtn{display:none}
body.calm .calm-hero{display:flex}body.calm .asklbl{display:block}body.calm .plusbtn{display:grid}
body.calm #v-home .head{padding-bottom:6px}
body.calm #v-home .h1{font-size:34px}
.calm-hero{position:relative;align-items:center;gap:26px;margin-top:22px;max-width:760px;padding:22px 24px 22px 22px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(24,24,27,.04),0 24px 50px -24px rgba(60,50,160,.45);overflow:hidden}
.calm-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#B9A8FF,#FF8FCB 52%,#FFB67A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;opacity:.8}
.ch-fan{position:relative;width:132px;height:112px;flex:none}
.ch-fan span{position:absolute;top:4px;left:38px;width:60px;height:96px;border-radius:13px;overflow:hidden;background:#eee;box-shadow:0 10px 22px -10px rgba(0,0,0,.5),0 0 0 3px #fff;transition:transform .5s var(--spring)}
.ch-fan span img{width:100%;height:100%;object-fit:cover}
.ch-fan span:nth-child(1){transform:rotate(-13deg) translateX(-34px) translateY(8px)}
.ch-fan span:nth-child(2){transform:rotate(-4deg) translateX(-11px);z-index:1}
.ch-fan span:nth-child(3){transform:rotate(5deg) translateX(13px);z-index:2}
.ch-fan span:nth-child(4){transform:rotate(14deg) translateX(36px) translateY(8px);z-index:3}
.calm-hero:hover .ch-fan span:nth-child(1){transform:rotate(-16deg) translateX(-42px) translateY(6px)}
.calm-hero:hover .ch-fan span:nth-child(4){transform:rotate(17deg) translateX(44px) translateY(6px)}
.ch-fan b{position:absolute;right:-4px;top:-6px;z-index:5;min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:linear-gradient(135deg,#F0628E,#FF8A3D);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 6px 14px -4px rgba(240,98,142,.7)}
.ch-ic{width:72px;height:72px;border-radius:22px;flex:none;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,#EFEBFF,#FFE9F3)}
.ch-tx{flex:1;min-width:0}
.ch-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;background:#FFF1DB;color:#B45309;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ch-tag.ok{background:var(--ok-l);color:var(--ok)}.ch-tag.vio{background:var(--vio-l);color:var(--vio)}
.ch-tx h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.ch-tx p{font-size:14.5px;color:var(--ink2);margin-top:5px;line-height:1.5}
.ch-go{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ch-go .btn{height:50px;padding:0 24px;font-size:15.5px;border-radius:16px}
.ch-go small{font-size:12.5px;color:var(--muted)}
.ch-bar{height:6px;border-radius:3px;background:#ECE9F7;overflow:hidden;margin-top:12px;max-width:320px}.ch-bar i{display:block;height:100%;border-radius:inherit;background:var(--btn);transition:width .5s linear}
.asklbl{margin:26px 0 0;font-size:13px;font-weight:700;color:var(--ink2)}
body.calm #v-home .ask{margin-top:10px;height:56px}
body.calm #v-home .ask .btn.pri{background:var(--vio-l);color:var(--vio);box-shadow:inset 0 0 0 1px rgba(109,85,253,.18);height:42px}
.plusbtn{width:42px;height:42px;padding:0;border-radius:13px;place-items:center;flex:none;background:#F3F2F8;color:var(--ink2);transition:background .2s,transform .25s var(--spring)}
.plusbtn svg{width:20px;height:20px;display:block}
body.calm #v-home .ask{padding-left:7px;gap:12px}
.plusbtn:hover,.plusbtn.on{background:var(--vio-l);color:var(--vio)}.plusbtn.on{transform:rotate(45deg)}
.plusmenu{position:absolute;z-index:30;left:0;top:calc(100% + 10px);width:360px;padding:8px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 24px 50px -16px rgba(30,20,80,.35);display:grid;gap:2px;animation:pmin .25s var(--ease)}
@keyframes pmin{from{opacity:0;transform:translateY(-6px)}}
.plusmenu p{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.plusmenu button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:12px;text-align:left;font-size:14px;font-weight:600;color:var(--ink)}
.plusmenu button:hover{background:#F5F3FF}
.plusmenu button .e{width:34px;height:34px;border-radius:10px;background:#F3F2F8;display:grid;place-items:center;font-size:17px;flex:none}
.plusmenu button small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.plusmenu hr{border:0;height:1px;background:var(--hair);margin:4px 8px}
.ti.oppti .ribbon{background:linear-gradient(90deg,#FF9A3D,#F0628E)}
body.calm #v-home .sh.mt{margin-top:34px}

/* calm Home, row 2 (22 Oct): the next step and "Got something new?" side by side, same height */
.calm-row{display:none}
body.calm .calm-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin:20px 0 14px;align-items:stretch}
body.calm #v-home .scoutfloat{display:none}
body.calm #v-home .head{padding-bottom:0}
body.calm .calm-row .calm-hero{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:30px;row-gap:18px;align-items:center;margin:0;max-width:none;min-height:236px;padding:30px 32px}
.calm-row .ch-fan,.calm-row .ch-ic{grid-row:1/3}
.calm-row .ch-fan{transform:scale(1.25);margin:0 18px 0 14px}
.calm-row .ch-ic{width:88px;height:88px;border-radius:26px;font-size:38px}
.calm-row .ch-tx h2{font-size:25px}
.calm-row .ch-tx p{font-size:15px}
.calm-row .ch-go{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
.calm-ask{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 32px 26px;min-height:236px;overflow:visible;background:linear-gradient(160deg,#fff 55%,#F6F2FF)}
.calm-ask .ca-scout{position:absolute;right:18px;top:12px;width:128px;height:128px;pointer-events:none}
.calm-ask h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin-top:8px;padding-right:140px}
.calm-ask p{font-size:14.5px;color:var(--ink2);margin-top:5px;line-height:1.5;padding-right:140px}
.ca-slot{width:100%;margin-top:auto;padding-top:18px}
body.calm #v-home .calm-ask .ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:none;height:auto;margin:0;padding:8px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(109,85,253,.16),0 0 0 4px rgba(139,120,255,.08),0 12px 26px -16px rgba(60,50,160,.4)}
.calm-ask .ask input{order:0;flex:1 1 100%;height:44px;padding:0 10px;font-size:15px}
.calm-ask .ask .plusbtn{order:1}
.calm-ask .ask .mic{order:2;width:42px;height:42px}
body.calm #v-home .calm-ask .ask .btn.pri{order:3;margin-left:auto;height:42px;padding:0 16px}
.calm-ask .plusmenu{top:calc(100% + 8px)}

/* ================= calm Home, detail pass (22 Oct) =================
   One spacing rhythm: 24 under the headline, 44 between sections, 16 from a section title to its content.
   One button system: primary 44 tall / 14 round / 15px; icon buttons 44 square, white with a hairline; inside the ask box 40 / 12. */
.sh .ic.ico{color:var(--vio)}.sh .ic.ico svg{width:20px;height:20px;display:block}
body.calm #v-home .calm-row{margin:24px 0 0;gap:20px}
body.calm #v-home .sh.mtw,body.calm #v-home .sh.mt{margin:44px 0 16px}
body.calm #v-home .h1{margin-top:4px}
/* both boxes: same padding, same white, quieter edge */
body.calm .calm-row .calm-hero,body.calm .calm-ask{padding:28px;min-height:0;border-radius:24px}
body.calm .calm-ask{background:#fff}
.calm-hero::before{opacity:.45}
body.calm .calm-row .calm-hero{row-gap:20px;column-gap:28px}
.calm-row .ch-tx h2{font-size:23px;margin-top:10px}
.calm-row .ch-tx p{font-size:14.5px;margin-top:6px}
/* the character: an avatar beside the title */
.ca-head{display:flex;align-items:center;gap:16px;width:100%}
.ca-av{position:relative;width:64px;height:64px;flex:none;border-radius:20px;background:linear-gradient(135deg,#EFEBFF,#FFE9F3);display:grid;place-items:center;overflow:visible}
.calm-ask .ca-scout{position:static;width:58px;height:58px;margin:2px 0 -2px;pointer-events:none;object-fit:contain;animation:cabob 4s ease-in-out infinite}
@keyframes cabob{50%{transform:translateY(-3px)}}
.calm-ask h2{font-size:21px;margin-top:0;padding-right:0}
.calm-ask p{font-size:14.5px;margin-top:4px;padding-right:0}
.ca-slot{padding-top:20px}
/* buttons */
#v-home .btn.pri,#v-home .btn.sec{height:44px;padding:0 20px;border-radius:14px;font-size:15px;font-weight:600;gap:8px}
#v-home .btn.pri svg,#v-home .btn.sec svg{width:17px;height:17px}
#v-home .tacts .btn.pri{height:44px;font-size:15px}
#v-home .bm{width:44px;height:44px;border-radius:14px;box-shadow:0 0 0 1px var(--hair2),0 1px 2px rgba(20,20,23,.05)}
.calm-row .ch-go .btn{height:44px;padding:0 22px;font-size:15px;border-radius:14px}
body.calm #v-home .calm-ask .ask{padding:6px;border-radius:18px;gap:6px}
.calm-ask .ask input{height:42px;padding:0 12px}
body.calm #v-home .calm-ask .ask .plusbtn,body.calm #v-home .calm-ask .ask .mic{width:40px;height:40px;border-radius:12px;background:#F4F3F8;color:var(--ink2)}
body.calm #v-home .calm-ask .ask .plusbtn:hover,body.calm #v-home .calm-ask .ask .mic:hover{background:var(--vio-l);color:var(--vio)}
body.calm #v-home .calm-ask .ask .btn.pri{height:40px;padding:0 16px;border-radius:12px;font-size:14.5px;background:var(--btn);color:#fff;box-shadow:var(--btn-sh)}
/* the week switch reads as a control, the links line up with it */
#v-home .seg.sm button{height:32px;padding:0 14px;border-radius:10px;font-size:13.5px}

/* calm Home: a minimal week strip (22 Oct). Smaller photos, nothing written on them, one status dot. */
body.calm #v-home .wkcard{padding:16px 16px 14px}
body.calm #v-home .wkdays{gap:12px}
body.calm #v-home .wd{padding:0;gap:8px;background:none;box-shadow:none}
body.calm #v-home .wdh{padding:0 2px;min-height:24px;align-items:center}
body.calm #v-home .wdh span{font-size:11px}
body.calm #v-home .wdh b{font-size:15px;line-height:24px;min-width:24px;text-align:center;border-radius:8px}
body.calm #v-home .wd.today .wdh b{background:var(--vio);color:#fff;padding:0 6px}
body.calm #v-home .wdh em,body.calm #v-home .wdh .bg{display:none}
body.calm #v-home .wt{height:92px;border-radius:12px}
body.calm #v-home .wt::after,body.calm #v-home .wt .for,body.calm #v-home .wt .more,body.calm #v-home .wchip{display:none}
body.calm #v-home .wd.past .wt>img{opacity:.7;filter:saturate(.6)}
body.calm #v-home .wt.st-ready::before,body.calm #v-home .wt.st-ok::before{content:"";position:absolute;z-index:3;right:7px;top:7px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2.5px #fff}
body.calm #v-home .wt.st-ready::before{background:#FFB020}
body.calm #v-home .wt.st-ok::before{background:var(--vio)}
body.calm #v-home .wt.gap{background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair);font-size:12px;gap:5px}
body.calm #v-home .wt.gap i{width:26px;height:26px}
body.calm #v-home .wt.none{background:#F7F6FB}
body.calm #v-home .wtt{font-size:12.5px;font-weight:600;min-height:0;-webkit-line-clamp:1;padding:0 2px}
.wklegend{display:none}
body.calm #v-home .wklegend{display:flex;gap:16px;align-items:center;margin-top:14px;padding:12px 2px 0;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.wklegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* Send only appears once something is typed (22 Oct). Pure CSS: the input shows its placeholder while empty. */
body.calm #v-home .calm-ask .ask .btn.pri{opacity:0;transform:translateX(8px) scale(.94);pointer-events:none;transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1),filter .15s}
body.calm #v-home .calm-ask .ask:has(input:not(:placeholder-shown)) .btn.pri{opacity:1;transform:none;pointer-events:auto}
/* the character's floor glow is trimmed off */
.calm-ask .ca-scout{-webkit-mask:linear-gradient(#000 78%,transparent 86%);mask:linear-gradient(#000 78%,transparent 86%)}

/* ================= calm Ready to check (22 Oct): one post at a time ================= */
.rkstrip{display:none}
body.calm #v-ready .how,body.calm #v-ready .rkhead .btn.dark,body.calm #v-ready #rkSizes{display:none!important}
body.calm #v-ready .rkhead{padding-bottom:8px;align-items:center}
body.calm #v-ready #approveAll{background:none;box-shadow:none;color:var(--vio);height:auto;padding:6px 4px;font-size:14.5px;font-weight:600}
body.calm #v-ready #approveAll:hover{text-decoration:underline;text-underline-offset:3px}
body.calm .rkstrip{display:flex;align-items:center;gap:16px;margin:14px 0 22px}
.rks-row{display:flex;gap:8px}
.rks{width:46px;height:58px;border-radius:11px;overflow:hidden;padding:0;opacity:.5;transition:opacity .2s,box-shadow .2s,transform .2s var(--ease)}
.rks img{width:100%;height:100%;object-fit:cover}
.rks:hover{opacity:.85;transform:translateY(-2px)}
.rks.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vio)}
.rks-left{font-size:13.5px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:6px}
body.calm #v-ready .rk{grid-template-columns:minmax(0,1fr)}
body.calm #v-ready .col>*{max-width:960px;margin-left:auto;margin-right:auto}
/* the queue sits top right, in place of "Approve all" (23 Oct, Josh) */
body.calm #v-ready .rkhead{align-items:center;padding-bottom:22px}
body.calm #v-ready .rkhead .rkstrip{margin:0}
body.calm #v-ready #approveAll,body.calm #v-ready .rq-left{display:none!important}
body.calm #v-ready .rk>div:first-child{display:none}
body.calm #v-ready .rkv{padding:24px;gap:36px;border-radius:26px}
body.calm #v-ready .stage2{height:540px}
body.calm #v-ready .rkd2{padding-top:10px;max-width:460px}
body.calm #v-ready .rkd2 h2{font-size:28px}
.cwhen{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:14px;background:#F7F6FB}
.cwhen>svg{width:20px;height:20px;color:var(--vio);flex:none}
.cwhen span{flex:1;min-width:0}.cwhen b{display:block;font-size:14.5px;font-weight:600}.cwhen small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ccap{margin-top:16px}
.ccap p{font-size:14.5px;line-height:1.55;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ccap .chg{margin-top:4px;padding:2px 0}
.ccap .cap{width:100%;min-height:84px}
.cbtns{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:22px}
.cbtns .btn{height:48px;font-size:15.5px;border-radius:14px}
.cbtns .btn.pri{box-shadow:var(--btn-sh)}
.cbtns .btn.sec2{padding:0 24px}
.cmore{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink2)}
.cmore svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.cmore:hover{color:var(--vio)}.cmore.on svg{transform:rotate(180deg)}
.cfix{margin-top:10px;padding:14px;border-radius:16px;background:#F7F6FB;animation:fadein .25s var(--ease)}
.cfix .fixrow{margin-top:0}
.cfix .fixrow button{background:#fff;box-shadow:0 0 0 1px var(--hair)}
.cfix-b{display:flex;align-items:center;gap:14px;margin-top:12px}
/* the photos and clips in a post: swap, upload or add (23 Oct, Josh) */
.cmed{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.cmed-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-bottom:9px}
.cmed-h b{font-size:13.5px;font-weight:700;color:var(--ink)}
.cmed-h span{font-size:12.5px;color:var(--muted)}
.cmed-row{display:flex;flex-wrap:wrap;gap:8px}
.cmt{position:relative;width:62px;height:62px;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 12px -8px rgba(15,26,51,.35);transition:transform .25s var(--spring),box-shadow .2s}
.cmt img,.cmt video{width:100%;height:100%;object-fit:cover;display:block}
.cmt:hover{transform:translateY(-2px)}
.cmt.on{box-shadow:0 0 0 2.5px var(--vio),0 8px 16px -8px rgba(109,85,253,.6)}
.cmt-d{position:absolute;left:4px;bottom:4px;display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 5px;border-radius:8px;background:rgba(10,8,20,.62);color:#fff;font-style:normal;font-size:9.5px;font-weight:700;line-height:1}
.cmt-d svg{width:7px;height:7px}
.cmt-sw{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,14,50,.42);color:#fff;opacity:0;transition:opacity .2s}
.cmt-sw svg{width:20px;height:20px}
.cmt:hover .cmt-sw,.cmt.on .cmt-sw{opacity:1}
.cmt.add{display:grid;place-items:center;background:#fff;color:var(--vio);box-shadow:inset 0 0 0 1.5px #DCD5FC}
.cmt.add svg{width:22px;height:22px}
.cmt.add:hover,.cmt.add.on{background:var(--vio-l)}
.cpick{margin-top:10px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 16px 32px -20px rgba(15,26,51,.45);animation:fadein .2s var(--ease)}
.cpick-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cpick-h b{font-size:13.5px}
.cpick-x{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.cpick-x:hover{background:#F2F1F8;color:var(--ink)}
.cpick-x svg{width:14px;height:14px}
.cpick-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;max-height:188px;overflow:auto;padding:2px}
.cpk{position:relative;display:block;height:0;padding:0 0 100%;border-radius:12px;overflow:hidden;background:#F2F1F8;cursor:pointer}
.cpk img,.cpk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--spring)}
.cpk:hover img{transform:scale(1.08)}
.cpk.use::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 2.5px var(--vio)}
.cpk em{position:absolute;right:3px;top:3px;height:15px;padding:0 5px;border-radius:8px;background:var(--vio);color:#fff;font-style:normal;font-size:9px;font-weight:800;line-height:15px}
.cpk .cmt-d{left:3px;bottom:3px;height:14px;font-size:8.5px;padding:0 4px}
.cpk.up{background:var(--vio-l);color:var(--vio);font-size:10.5px;font-weight:700}
.cpk.up svg{position:absolute;left:50%;top:40%;width:18px;height:18px;transform:translate(-50%,-50%)}
.cpk.up span{position:absolute;left:0;right:0;top:60%;text-align:center}
.cpk.up:hover{background:#E4DEFF}
.cpick-rm{margin-top:10px;height:30px;padding:0 4px;font-size:13px;font-weight:600;color:#B4371A}
.cpick-rm:hover{text-decoration:underline}
.cfix-b .btn{height:40px;font-size:14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2)}
.cwhy{display:flex;gap:8px;align-items:flex-start;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--muted);line-height:1.5}
.cwhy .spark{width:14px;height:14px;color:var(--vio);flex:none;margin-top:2px}
/* calm week strip: today gets a soft column, a little more visible */
body.calm #v-home .wd{padding:8px 6px 10px;border-radius:16px}
body.calm #v-home .wkdays{gap:4px}
body.calm #v-home .wd.today{background:#F4F1FF;box-shadow:inset 0 0 0 1px #E3DCFF}
body.calm #v-home .wd.today .wdh span{color:var(--vio)}
body.calm #v-home .wd.today .wdh em{display:inline-flex;margin-left:auto;background:none;color:var(--vio);padding:0;font-size:11px;letter-spacing:.04em}
/* a past day with no post still gets the plus (it adds a post for today) */
.wt.gap.past{opacity:.75}.wt.gap.past:hover{opacity:1}

/* the hero fan (22 Oct): a smaller count, and the cards fan out smoothly on hover */
.calm-row .ch-fan span[style]{left:36px;transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r));transition:transform .7s cubic-bezier(.2,.9,.2,1.12) var(--d),box-shadow .5s ease}
.calm-row .calm-hero:hover .ch-fan span[style]{transform:translateX(var(--xh)) translateY(var(--yh)) rotate(var(--rh)) scale(1.03);box-shadow:0 18px 30px -14px rgba(20,10,50,.55),0 0 0 3px #fff}
.calm-row .ch-fan span[style] img{transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.calm-row .calm-hero:hover .ch-fan span[style] img{transform:scale(1.06)}
.calm-row .ch-fan b{min-width:21px;height:21px;padding:0 6px;border-radius:11px;font-size:11.5px;right:2px;top:-4px;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(240,98,142,.6);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.calm-row .calm-hero:hover .ch-fan b{transform:translate(8px,-4px)}

/* post to: pick the apps for this one post (22 Oct) */
.wps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.wpl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.wp{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 11px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,box-shadow .15s,color .15s}
.wp i{width:9px;height:9px;border-radius:50%;opacity:.35;transition:opacity .15s}
.wp .tk{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#ECEAF3;color:transparent;transition:background .15s,color .15s}
.wp .tk svg{width:10px;height:10px}
.wp.on{color:var(--ink);box-shadow:inset 0 0 0 2px #8B7BFF;background:var(--vio-l)}
.wp.on i{opacity:1}.wp.on .tk{background:var(--vio);color:#fff}
.wp:hover{box-shadow:inset 0 0 0 1.5px #B9A8FF}

/* "say what to change" instead of opening the editor (22 Oct) */
.cask{display:flex;gap:6px;margin-top:12px;padding:5px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair2)}
.cask input{flex:1;min-width:0;height:38px;padding:0 10px;font-size:14px}
.cask input::placeholder{color:var(--faint)}
.cask .btn{height:38px;max-width:0;padding:0;overflow:hidden;border-radius:11px;font-size:14px;opacity:0;pointer-events:none;transition:max-width .3s var(--ease),padding .3s var(--ease),opacity .2s}
.cask:has(input:not(:placeholder-shown)) .btn{max-width:140px;padding:0 14px;opacity:1;pointer-events:auto}
.cask:focus-within{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}

/* ================= app previews (calm check screen) ================= */
.pvtabs{display:none}
body.calm #v-ready .stage2{height:auto;min-height:0;padding:20px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;width:310px}
body.calm #v-ready .pvtabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pvtabs button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 6px;border-radius:10px;color:rgba(255,255,255,.72);font-size:13px;font-weight:600;transition:background .2s,color .2s}
.pvtabs button:hover{color:#fff;background:rgba(255,255,255,.06)}
.pvtabs button.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.pvl{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none}.pvl svg{width:15px;height:15px}

.phone.pvph{width:252px;height:520px;aspect-ratio:auto;border-radius:36px;background:#fff;box-shadow:0 0 0 7px #0D0A18,0 30px 60px -20px rgba(0,0,0,.85);overflow:hidden}
.pv{position:absolute;inset:0;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;color:#111;font-size:12.5px;line-height:1.35;overflow:hidden;animation:fadein .3s var(--ease)}
.pv svg{width:20px;height:20px;flex:none}
.pv-av{width:28px;height:28px;border-radius:50%;background:var(--lg-bg);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #E1306C}
.pv-av i{width:72%;height:40%;background:var(--lg-ink);-webkit-mask:var(--logo-mono) center/contain no-repeat;mask:var(--logo-mono) center/contain no-repeat}
.pv-media{position:relative;width:100%;overflow:hidden;background:#000;flex:none}
.pv-media>video,.pv-media>img,.pv-media>.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
.pv-car{position:absolute;right:8px;top:8px;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:600}
.pv-bar{display:flex;align-items:center;justify-content:space-between;height:44px;padding:16px 12px 0;flex:none}
.pv-word{font-family:"Grand Hotel","Snell Roundhand","Brush Script MT",cursive;font-size:23px;font-weight:400;letter-spacing:0}
.pv-bar>span{display:flex;gap:14px}
.pv-head{display:flex;align-items:center;gap:8px;padding:8px 10px}
.pv-head b{font-size:12.5px;font-weight:600}
.pv-more{margin-left:auto;color:#111}.pv-more svg{width:18px;height:18px}
.pv-cap{padding:0 10px;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-cap b{font-weight:600}
/* instagram feed */
.pv.ig.feed .pv-media{aspect-ratio:4/5}
.pv.ig.feed .pv-acts{position:relative;display:flex;align-items:center;justify-content:space-between;padding:9px 10px 4px}
.pv.ig.feed .pv-acts>span{display:flex;gap:14px}
.pv-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px}.pv-dots i{width:5px;height:5px;border-radius:50%;background:#C7C7CC}.pv-dots i:first-child{background:#0095F6}
.pv-likes{padding:0 10px 3px;font-weight:600}
.pv-time{padding:4px 10px;color:#8E8E93;font-size:11px}
/* instagram reel */
.pv.ig.reel{background:#000;color:#fff}
.pv.ig.reel .pv-media{position:absolute;inset:0;height:100%}
.pv.ig.reel .pv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 18%,transparent 60%,rgba(0,0,0,.6))}
.pv-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:20px 14px 0;font-size:17px}
.pv-top b{font-weight:700}
.pv-rail{position:absolute;right:8px;bottom:70px;display:flex;flex-direction:column;align-items:center;gap:14px}
.pv-rail span{display:flex;flex-direction:column;align-items:center;gap:2px}.pv-rail small{font-size:11px;font-weight:600}.pv-rail svg{width:24px;height:24px}
.pv-rail .pv-aud .pv-av{width:24px;height:24px;border-radius:7px;box-shadow:0 0 0 2px #fff}
.pv-bot{position:absolute;left:0;right:46px;bottom:14px;padding:0 12px}
.pv-who{display:flex;align-items:center;gap:8px}.pv-who b{font-size:12.5px}
.pv-fol{padding:3px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);font-size:11.5px;font-weight:600}
.pv.ig.reel .pv-cap{padding:6px 0 0}
.pv-mus{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px}.pv-mus svg{width:13px;height:13px}
/* facebook */
.pv.fb{background:#fff}
.pv.fb .pv-word{font-family:Helvetica,Arial,sans-serif;font-weight:800;color:#1877F2;font-size:24px;letter-spacing:-.04em}
.pv.fb .pv-av{box-shadow:none}
.pv-nm{display:flex;flex-direction:column}.pv-nm small{display:flex;align-items:center;gap:3px;color:#65676B;font-size:11px}.pv-nm small svg{width:11px;height:11px}
.pv.fb .pv-cap{padding:0 10px;margin-bottom:8px}
.pv.fb .pv-media{aspect-ratio:4/5}
.pv-react{display:flex;align-items:center;gap:6px;padding:7px 10px;color:#65676B;font-size:11.5px}
.pv-em{display:flex}.pv-em i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;box-shadow:0 0 0 1.5px #fff}.pv-em .l{background:#1877F2}.pv-em .h{background:#F33E58;margin-left:-4px}
.pv-cc{margin-left:auto}
.pv.fb .pv-acts{display:flex;justify-content:space-around;margin:0 10px;padding:6px 0;border-top:1px solid #E4E6EB;color:#65676B;font-size:12px;font-weight:600}
.pv.fb .pv-acts span{display:flex;align-items:center;gap:5px}.pv.fb .pv-acts svg{width:16px;height:16px}
/* google */
.pv.gg{background:#F1F3F4;color:#202124;font-family:Roboto,Arial,system-ui,sans-serif}
.pv.gg .pv-bar{background:#fff;padding:14px 10px 8px;height:auto}
.pv-gsearch{flex:1;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:17px;background:#fff;box-shadow:0 1px 4px rgba(32,33,36,.25);font-size:12.5px;color:#202124}
.pv-gsearch .pvl{width:18px;height:18px;background:none;box-shadow:none}
.pv-biz{background:#fff;padding:10px 12px 0}
.pv-biz>b{font-size:17px;font-weight:500}
.pv-biz small{display:flex;align-items:center;gap:4px;color:#70757A;font-size:11.5px;margin-top:2px}
.pv-stars{display:inline-flex;align-items:center;gap:1px;color:#202124}.pv-stars svg{width:10px;height:10px;color:#FBBC04}
.pv-tabs{display:flex;gap:16px;margin-top:10px;font-size:12px;color:#5F6368}.pv-tabs span{padding-bottom:7px}.pv-tabs .on{color:#1A73E8;box-shadow:inset 0 -2.5px 0 #1A73E8;font-weight:500}
.pv-post{margin:10px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(60,64,67,.2)}
.pv.gg .pv-av{box-shadow:none;width:26px;height:26px}
.pv.gg .pv-nm small{font-size:11px}
.pv.gg .pv-media{aspect-ratio:4/3}
.pv.gg .pv-cap{padding:8px 10px 0}
.pv-btn{display:inline-flex;margin:8px 10px 12px;padding:6px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px #DADCE0;color:#1A73E8;font-size:12px;font-weight:500}
.phone.pvph .redo{z-index:5}

/* ================= the sale-day pop-up, step by step with a live preview (22 Oct) ================= */
.mini.wide{width:min(900px,calc(100vw - 40px));padding:0;overflow:hidden}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:560px;max-height:calc(100vh - 60px)}
.pleft{display:flex;flex-direction:column;min-width:0;padding:22px 26px 18px}
.ptop{display:flex;align-items:center;gap:12px;margin-bottom:14px}.ptop .pback{margin:0}
.pclose{width:36px;height:36px;border-radius:50%;background:#F3F2F8;color:var(--ink2);display:grid;place-items:center;flex:none;transition:background .15s,transform .25s var(--spring)}.pclose:hover{background:#E9E7F1;transform:rotate(90deg)}.pclose svg{width:15px;height:15px}
.pback2{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 18px 0 12px;border-radius:14px;background:#F3F2F8;font-size:15px;font-weight:650;color:var(--ink);transition:background .15s}.pback2:hover{background:#E9E7F1}.pback2 svg{width:16px;height:16px}
.psteps{display:flex;gap:5px;flex:1}.psteps i{height:4px;flex:1;border-radius:2px;background:#ECEAF3}.psteps i.on{background:var(--vio)}
.pstepn{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.pbody{flex:1;overflow-y:auto;margin:0 -6px;padding:0 6px 6px}
.pfoot{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--hair);margin-top:10px}
.pfoot .cancel{width:auto;margin:0;padding:0 16px;height:44px}
.pfoot .btn.pri{margin-left:auto;height:44px;padding:0 22px;border-radius:14px;font-size:15px}
.pfoot .btn.pri:disabled{opacity:.4;cursor:default;filter:grayscale(.3)}
.pright{background:radial-gradient(90% 60% at 50% 0%,#40308C,#1A1240 75%);padding:22px;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto}
/* product tiles */
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.ptile{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -12px rgba(24,24,27,.25);text-align:left;transition:box-shadow .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.ptile:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px #B9A8FF,0 10px 20px -12px rgba(109,85,253,.4)}
.ptile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ptile .pt-ic{display:grid;place-items:center;aspect-ratio:4/3;font-size:28px;background:#F7F6FB}
.pt-tx{padding:8px 10px 10px}.pt-tx b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-tx small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.pt-suit{position:absolute;left:7px;top:7px;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:14px}
.pt-tick{position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:transparent;box-shadow:inset 0 0 0 1.5px rgba(24,24,27,.15);transition:background .15s}
.pt-tick svg{width:12px;height:12px}
.ptile.on,.pdeal.on{box-shadow:0 0 0 2px var(--vio),0 10px 20px -12px rgba(109,85,253,.45)}
.ptile.on .pt-tick,.pdeal.on .pt-tick{background:var(--vio);color:#fff;box-shadow:none}
/* deals and when */
.pdeals,.pwhen{display:grid;gap:8px;margin-top:16px}
.pwhen{grid-template-columns:repeat(3,minmax(0,1fr))}
.pdeal{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 44px 12px 16px;border-radius:15px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 6px 16px -12px rgba(24,24,27,.2);font-size:15px;font-weight:600;text-align:left;transition:box-shadow .2s}
.pdeal:hover{box-shadow:0 0 0 1.5px #B9A8FF}
.pdeal .pt-tick{top:50%;right:14px;margin-top:-11px}
.preads{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:14px;background:#F2FBF5;color:#166534;font-size:13.5px;line-height:1.45}
.preads svg{width:16px;height:16px;flex:none;margin-top:2px}
.pdays{margin-top:12px;grid-template-columns:repeat(9,minmax(0,1fr))}
.pextras{display:flex;gap:8px;flex-wrap:wrap}
.pextras button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:14px;font-weight:600;color:var(--ink2)}
.pextras button svg{width:18px;height:18px;padding:3px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--hair2);color:transparent}
.pextras button.on{box-shadow:0 0 0 2px var(--vio);color:var(--ink)}.pextras button.on svg{background:var(--vio);color:#fff;box-shadow:none}
.addopt.chosen{box-shadow:0 0 0 2px var(--vio)}
.addopt.chosen::after{content:"";flex:none;margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--vio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") center/13px no-repeat}
/* ready */
.pphotos{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.pph{position:relative;width:96px;height:120px;border-radius:14px;overflow:hidden;background:#eee}
.pph img{width:100%;height:100%;object-fit:cover}
.pph button{position:absolute;left:6px;right:6px;bottom:6px;height:28px;border-radius:9px;background:rgba(15,10,30,.65);color:#fff;font-size:12px;font-weight:700;backdrop-filter:blur(6px)}
.pph button:hover{background:var(--vio)}
.pph.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#F7F6FB;box-shadow:inset 0 0 0 1px var(--hair);color:var(--vio);font-size:12px;font-weight:600;cursor:pointer}
.pph.add svg{width:22px;height:22px}
.pask{display:flex;gap:8px;margin-top:16px}.pask .btn{height:44px}.pask svg{width:18px;height:18px}
.pfmt{margin-top:16px;display:inline-flex}
/* the live preview */
.ppv{width:100%;max-width:280px}
.ppv-l{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,226,255,.6);margin-bottom:10px;text-align:center}
.ppv-card{border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:fadein .3s var(--ease)}
.ppv-media{position:relative;aspect-ratio:4/5;background:#222;overflow:hidden;container-type:inline-size}
.ppv-media.video{aspect-ratio:9/13}
.ppv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ppv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,6,24,.72))}
.ppv-none{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;font-size:30px;color:#fff;background:#2A2050}.ppv-none small{font-size:12px;opacity:.7}
.ppv-media .wm{position:absolute;z-index:2;right:10px;top:10px;width:54px;height:15px;background:#fff;-webkit-mask:var(--logo-mono) center/contain no-repeat;mask:var(--logo-mono) center/contain no-repeat}
.ppv-play{position:absolute;z-index:2;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center}.ppv-play svg{width:12px;height:12px}
.ppv-cnt{position:absolute;z-index:2;left:10px;top:10px;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600}
.ppv-deal{position:absolute;z-index:2;left:12px;top:44%;max-width:calc(100% - 24px);padding:8px 12px;border-radius:12px;background:#FFD24D;color:#2A1A00;font-size:clamp(14px,8cqw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.1;transform:rotate(-2deg);box-shadow:0 10px 20px -8px rgba(0,0,0,.5)}
.ppv-hook{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;color:#fff}
.ppv-hook b{display:block;font:700 19px/1.15 Fraunces,Georgia,serif}.ppv-hook small{display:block;font-size:12px;opacity:.85;margin-top:3px}
.ppv-meta{display:flex;align-items:center;gap:8px;padding:10px 12px 0;font-size:12.5px}.ppv-meta b{font-weight:650}.ppv-meta>span:last-child{display:none}
.ppv-meta .pv-av{width:24px;height:24px}
.ppv-cap{padding:6px 12px 12px;font-size:12.5px;color:var(--ink2);line-height:1.45}
.ppv-strip{display:flex;gap:6px;justify-content:center;margin-top:12px}.ppv-strip img{width:38px;height:48px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.2)}

/* photos in the Ready step and the picker (22 Oct, Thomas's feedback) */
.pnudge{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 10px 10px 14px;border-radius:14px;background:#FFF7EC;font-size:13.5px;color:#7A4A0B;line-height:1.4}
.pnudge span{flex:1}.pnudge .btn{height:34px;flex:none;cursor:pointer}
.pphead{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.pphead b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plink{font-size:14px;font-weight:600;color:var(--vio)}
.pphotos{margin-top:8px}
.pph{cursor:pointer;padding:0}.pph:hover img{filter:brightness(.92)}
.pn,.pkn{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--vio);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.pk-new{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px;border-radius:16px;border:0;background:#F7F5FF;box-shadow:inset 0 0 0 1.5px #DDD4FF;cursor:pointer;transition:background .2s,box-shadow .2s}
.pk-new:hover,.pk-new.over{background:#EFEBFF;box-shadow:inset 0 0 0 2px var(--vio)}
.pk-ic{width:44px;height:44px;border-radius:13px;background:var(--btn);color:#fff;display:grid;place-items:center;box-shadow:var(--btn-sh);flex:none}.pk-ic svg{width:22px;height:22px}
.pk-new b{display:block;font-size:15px}.pk-new small{display:block;font-size:13px;color:var(--muted)}
.pk-wa{font-size:12.5px;color:var(--muted);margin:6px 2px 0}
.pk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:4px}
.pk{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.pk img{width:100%;height:100%;object-fit:cover}
.pk .pkn{display:none}.pk.on{box-shadow:0 0 0 3px var(--vio)}.pk.on .pkn{display:grid}.pk.on img{filter:brightness(.9)}
.pk:hover{transform:scale(1.03)}
.pk-cnt{font-size:13px;color:var(--muted);margin-left:auto}
.pk-cnt+.btn.pri{margin-left:10px}
.pgrid{height:min(640px,calc(100vh - 60px));min-height:0}.pleft{min-height:0}.pbody{min-height:0}

/* app tabs under the preview: fit the stage, no clipping (22 Oct) */
body.calm #v-ready .stage2{width:330px}
body.calm #v-ready .pvtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;gap:4px;box-sizing:border-box}
body.calm #v-ready .pvtabs button{justify-content:center;gap:6px;height:36px;padding:0 6px;min-width:0;font-size:12.5px}
body.calm #v-ready .pvtabs button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.calm #v-ready .pvtabs .pvl{width:20px;height:20px;border-radius:6px}body.calm #v-ready .pvtabs .pvl svg{width:13px;height:13px}

body.calm #v-ready .pvtabs{display:flex;justify-content:center;width:auto;max-width:100%}
body.calm #v-ready .pvtabs button{flex:none;padding:0 8px;transition:background .2s,color .2s,padding .25s}
body.calm #v-ready .pvtabs button:not(.on) span{display:none}
body.calm #v-ready .pvtabs button.on{padding:0 12px 0 7px;font-size:13px}

/* ================= preview box backgrounds (calm Ready to check) ================= */
body.calm #v-ready .stage2{isolation:isolate;transition:background .4s}
body.calm #v-ready .stage2::before,body.calm #v-ready .stage2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
/* light backgrounds: the tabs go dark-on-light */
body[data-stage="lav"].calm #v-ready .pvtabs,body[data-stage="brand"].calm #v-ready .pvtabs,body[data-stage="aurora"].calm #v-ready .pvtabs,body[data-stage="white"].calm #v-ready .pvtabs{background:rgba(24,24,27,.05);box-shadow:inset 0 0 0 1px rgba(24,24,27,.06)}
body[data-stage="lav"].calm #v-ready .pvtabs button:not(.on),body[data-stage="brand"].calm #v-ready .pvtabs button:not(.on),body[data-stage="aurora"].calm #v-ready .pvtabs button:not(.on),body[data-stage="white"].calm #v-ready .pvtabs button:not(.on){color:var(--ink2)}
body[data-stage="lav"].calm #v-ready .pvtabs button:not(.on):hover,body[data-stage="brand"].calm #v-ready .pvtabs button:not(.on):hover,body[data-stage="aurora"].calm #v-ready .pvtabs button:not(.on):hover,body[data-stage="white"].calm #v-ready .pvtabs button:not(.on):hover{background:rgba(24,24,27,.05)}
/* 2 blurred post: the post's own photo, blurred and dimmed, like Now Playing */
body[data-stage="blur"].calm #v-ready .stage2{background:#120B22;overflow:hidden}
body[data-stage="blur"].calm #v-ready .stage2::before{inset:-40px;background:var(--pvbg) center/cover;filter:blur(36px) saturate(1.3);opacity:.85;transform:scale(1.1)}
body[data-stage="blur"].calm #v-ready .stage2::after{background:linear-gradient(rgba(10,6,24,.25),rgba(10,6,24,.55))}
body[data-stage="blur"].calm #v-ready .phone.pvph{box-shadow:0 0 0 7px rgba(10,8,20,.9),0 40px 70px -25px rgba(0,0,0,.8)}
/* 3 soft lavender with a faint dot grid */
body[data-stage="lav"].calm #v-ready .stage2{background:linear-gradient(180deg,#F3F0FF,#FBFAFF)}
body[data-stage="lav"].calm #v-ready .stage2::before{background-image:radial-gradient(circle,rgba(109,85,253,.18) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask:radial-gradient(80% 70% at 50% 45%,#000,transparent);mask:radial-gradient(80% 70% at 50% 45%,#000,transparent)}
body[data-stage="lav"].calm #v-ready .phone.pvph{box-shadow:0 0 0 7px #17131F,0 30px 50px -20px rgba(60,40,140,.45)}
/* 4 brand colours: the business's own cream and red, from the Brand Kit */
body[data-stage="brand"].calm #v-ready .stage2{background:var(--lg-bg)}
body[data-stage="brand"].calm #v-ready .stage2::before{background:radial-gradient(60% 45% at 85% 0%,color-mix(in srgb,var(--lg-ink) 22%,transparent),transparent 70%),radial-gradient(50% 40% at 0% 100%,color-mix(in srgb,var(--lg-ink) 14%,transparent),transparent 70%)}
body[data-stage="brand"].calm #v-ready .stage2::after{inset:auto 0 auto 0;top:18px;height:14px;width:60px;left:50%;margin-left:-30px;background:var(--lg-ink);-webkit-mask:var(--logo-mono) center/contain no-repeat;mask:var(--logo-mono) center/contain no-repeat;opacity:.35;z-index:0}
body[data-stage="brand"].calm #v-ready .stage2{padding-top:44px}
body[data-stage="brand"].calm #v-ready .phone.pvph{box-shadow:0 0 0 7px #1B1418,0 30px 50px -22px rgba(80,30,20,.45)}
/* 5 aurora: slow-moving violet, pink and peach on light */
body[data-stage="aurora"].calm #v-ready .stage2{background:#F6F3FF;overflow:hidden}
body[data-stage="aurora"].calm #v-ready .stage2::before{inset:-20%;background:radial-gradient(40% 35% at 25% 30%,#C9B8FF,transparent 70%),radial-gradient(40% 35% at 75% 65%,#FFC6E2,transparent 70%),radial-gradient(35% 30% at 70% 15%,#FFD9B8,transparent 70%);filter:blur(20px);animation:stg 14s ease-in-out infinite alternate}
@keyframes stg{to{transform:translate(4%,-3%) rotate(8deg) scale(1.05)}}
body[data-stage="aurora"].calm #v-ready .phone.pvph{box-shadow:0 0 0 7px #17131F,0 30px 50px -20px rgba(90,50,160,.45)}
/* 6 plain white: just the phone, a hairline and a soft shadow */
body[data-stage="white"].calm #v-ready .stage2{background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
body[data-stage="white"].calm #v-ready .phone.pvph{box-shadow:0 0 0 7px #17131F,0 24px 40px -18px rgba(24,24,27,.35)}
/* 7 studio: dark charcoal with a soft spotlight and a floor reflection */
body[data-stage="studio"].calm #v-ready .stage2{background:radial-gradient(70% 55% at 50% 30%,#3A3A44,#141418 75%)}
body[data-stage="studio"].calm #v-ready .stage2::after{inset:auto 15% 54px 15%;height:30px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);filter:blur(4px);z-index:0}
/* the scrolling list runs right up to the footer line (no white band above it) */
.pfoot{margin-top:0}.pbody{padding-bottom:16px}

/* "Take a new one" stands out (22 Oct): a light running round the edge, a pulsing camera, a clear button */
@property --pkang{syntax:'<angle>';inherits:false;initial-value:0deg}
.pk-new,.mpk-new{position:relative;isolation:isolate;background:linear-gradient(135deg,#F5F1FF,#FFF3F9)!important;box-shadow:none!important}
.pk-new::before,.mpk-new::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:-1;background:conic-gradient(from var(--pkang),#C9BDFF,#8B78FF 25%,#FF8FCB 45%,#FFB67A 60%,#C9BDFF 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pkspin 4s linear infinite}
@keyframes pkspin{to{--pkang:360deg}}
.pk-ic{position:relative}
.pk-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(109,85,253,.55);animation:pkpulse 2s ease-out infinite}
@keyframes pkpulse{0%{box-shadow:0 0 0 0 rgba(109,85,253,.5)}80%,100%{box-shadow:0 0 0 12px rgba(109,85,253,0)}}
.pk-go{margin-left:auto;flex:none;height:36px;padding:0 14px;border-radius:11px;background:var(--btn,var(--grad));color:#fff;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;box-shadow:var(--btn-sh,var(--btn-sh-sm))}
.pk-new:hover .pk-go,.mpk-new:active .pk-go{filter:brightness(1.08)}
.pk-new.hi,.mpk-new.hi{animation:pkhi .9s cubic-bezier(.34,1.56,.64,1) .25s 1}
@keyframes pkhi{30%{transform:scale(1.025)}60%{transform:scale(.995)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.pk-new::before,.mpk-new::before,.pk-ic::after{animation:none}}

/* calendar: Month · 2 weeks · Week (22 Oct) */
.cview{margin-left:auto}
.cmh .ckey{flex-basis:100%;order:9;margin-top:8px}
.cgrid.wkv .cd{min-height:200px}
.cgrid.wk7 .cd{min-height:340px}
.cgrid.wkv .cc{padding:5px;gap:8px;border-radius:12px}
.cgrid.wk7 .cc{flex-direction:column;align-items:stretch}
.cgrid.wk7 .cc img{width:100%;height:auto;aspect-ratio:4/5;border-radius:9px;object-fit:cover}
.cgrid.wk7 .cc span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;font-size:13px}
.cgrid.wk14 .cc img,.cgrid.wkv:not(.wk7) .cc img{width:28px;height:34px;border-radius:7px}
.cgrid.wkv .cd.out{opacity:1}
.cgrid.wkv .cc{height:auto;min-height:40px}
.cmh{flex-wrap:wrap}.cview button{white-space:nowrap;padding:0 14px}.cmh .ckey{margin-left:0}

/* "why this post": a visible tip under the title (22 Oct) */
.ctip{position:relative;display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:12px 14px;border-radius:16px;background:linear-gradient(120deg,#F3EFFF,#FFF0F7 60%,#FFF5EC);font-size:14px;line-height:1.45;color:var(--ink2);animation:tipin .5s var(--ease)}
.ctip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#C9BDFF,#FF9AD5 60%,#FFC08A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ctip-ic{width:30px;height:30px;border-radius:10px;background:var(--btn);color:#fff;display:grid;place-items:center;flex:none;box-shadow:var(--btn-sh)}
.ctip-ic .spark{width:15px;height:15px}
.ctip b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vio);margin-bottom:2px}
@keyframes tipin{from{opacity:0;transform:translateY(6px)}}
.pv-igmark{display:flex;align-items:center;color:#111}.pv-igmark svg{width:24px;height:24px}
/* the prototype row is hidden (Josh, 22 Oct). Still reachable: ?home=full, ?stage=blur etc. */
.side .proto{display:none!important}
/* no line under Settings; Settings sits at the very bottom (Josh, 22 Oct) */
body.calm .side hr{display:none}
body.calm .side{padding-bottom:18px}

/* the business card moves to the bottom of the sidebar, like an account row (Josh, 22 Oct) */
body.calm .side .sp{order:5}
body.calm .side nav.nav:not(#nav){order:6}
body.calm .side .ws{order:7;margin:8px 0 0}
body.calm .side .wsmenu{top:auto;bottom:86px}

.wsme{display:flex;align-items:center;gap:11px;padding:8px}
.wsme .av2{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FFB67A,#F0628E);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.wsrow{display:flex!important;align-items:center;gap:11px;width:100%;padding:9px 8px!important;border-radius:11px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.wsrow svg{width:17px;height:17px;flex:none;color:rgba(232,226,255,.65);margin:0 8px 0 8px}
.wsrow.out,.wsrow.out svg{color:#FF9DA5}

/* ================= your team ================= */
.tmr .tav{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.tmr em{font-style:normal;color:var(--muted);font-weight:500}
.tmrole{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:#F2F1F8;color:var(--ink2);white-space:nowrap}
.tmrole.r-owner{background:#FFF1DB;color:#B45309}.tmrole.r-co{background:var(--vio-l);color:var(--vio)}.tmrole.r-creator{background:#E3F6EA;color:#15803D}
.tmlock{width:36px;display:grid;place-items:center;color:var(--faint)}.tmlock svg{width:16px;height:16px}
.tmr .btn.ghost{width:36px;padding:0;justify-content:center;font-size:13px;width:auto;padding:0 10px}
.tmgrid{margin-top:14px;padding:18px 20px}
.tmh{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tmgrid table{width:100%;border-collapse:collapse;font-size:14px}
.tmgrid th{font-size:12.5px;font-weight:700;color:var(--ink2);padding:8px 6px;text-align:center}
.tmgrid td{padding:9px 6px;border-top:1px solid var(--hair);text-align:center}.tmgrid td:first-child{text-align:left;color:var(--ink2);font-weight:500}
.tmgrid i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%}
.tmgrid i.yes{background:var(--ok-l,#E3F6EA);color:var(--ok,#15803D)}.tmgrid i.yes svg{width:12px;height:12px}
.tmgrid i.no{width:10px;height:2px;border-radius:1px;background:#D9D7E3}
#tmModal{width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto}
.tmin{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:16px}
.tmin input{height:46px;padding:0 14px;border-radius:13px;box-shadow:0 0 0 1px var(--hair2);font-size:14.5px}
.tmin input:focus{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}
#tmModal .lbl{margin:18px 0 8px}
.tmroles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tmro{padding:12px;border-radius:14px;box-shadow:0 0 0 1px var(--hair2);text-align:left;transition:box-shadow .15s,background .15s}
.tmro:hover{box-shadow:0 0 0 1.5px #B9A8FF}.tmro.on{box-shadow:0 0 0 2px var(--vio);background:#FAF9FF}
.tmro b{display:block;font-size:14.5px}.tmro small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
.tmperm{box-shadow:0 0 0 1px var(--hair2)}
.tmfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.tmfoot #tmRemove{margin-right:auto}
.srcl.team{color:#15803D}.srcl.team .si{background:#15803D;color:#fff;font-size:11px;font-weight:800}

/* 8 your feed: the phone sits over the business's other posts, dimmed */
.stfeed{display:none}
body[data-stage="feed"].calm #v-ready .stage2{background:#0E0A1C;overflow:hidden}
body[data-stage="feed"].calm #v-ready .stfeed{display:grid;position:absolute;inset:-10px;z-index:-1;grid-template-columns:repeat(3,1fr);gap:4px;transform:rotate(-8deg) scale(1.35);opacity:.45;filter:saturate(.8)}
body[data-stage="feed"].calm #v-ready .stfeed img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
body[data-stage="feed"].calm #v-ready .stage2::after{background:radial-gradient(60% 50% at 50% 45%,rgba(14,10,28,.1),rgba(14,10,28,.85));z-index:-1}

/* full-size preview */
.pvbig{display:none}
body.calm #v-ready .pvbig{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:600;color:rgba(232,226,255,.85);transition:background .2s,color .2s}
body.calm #v-ready .pvbig:hover{background:rgba(255,255,255,.1);color:#fff}
.pvbig svg{width:15px;height:15px}
body[data-stage="lav"].calm #v-ready .pvbig,body[data-stage="brand"].calm #v-ready .pvbig,body[data-stage="aurora"].calm #v-ready .pvbig,body[data-stage="white"].calm #v-ready .pvbig{color:var(--ink2)}
body[data-stage="lav"].calm #v-ready .pvbig:hover,body[data-stage="brand"].calm #v-ready .pvbig:hover,body[data-stage="aurora"].calm #v-ready .pvbig:hover,body[data-stage="white"].calm #v-ready .pvbig:hover{background:rgba(24,24,27,.06);color:var(--ink)}
body.calm #v-ready .phone.pvph{cursor:zoom-in}
.lbox{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;background:rgba(8,5,18,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s}
.lbox.on{opacity:1;pointer-events:auto}
.lbin{transform:scale(.96);transition:transform .35s cubic-bezier(.2,.9,.2,1.1);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px -20px rgba(0,0,0,.8);background:#000}
.lbox.on .lbin{transform:none}
.lbin video,.lbin img{display:block;max-height:calc(100vh - 150px);max-width:calc(100vw - 120px);width:auto;height:auto}
.lbin.v video{height:calc(100vh - 150px);aspect-ratio:9/16;object-fit:contain;background:#000}
.lbpost{width:min(460px,calc(100vw - 120px))}.lbpost .poster{border-radius:0;aspect-ratio:4/5}.lbpost .poster .hook{font-size:7cqw}
.lbcap{display:flex;gap:10px;align-items:baseline;color:#fff;font-size:15px}.lbcap span{color:rgba(232,226,255,.6);font-size:13.5px}
.lbx{position:absolute;right:24px;top:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:background .2s}
.lbx:hover{background:rgba(255,255,255,.22)}.lbx svg{width:20px;height:20px}


/* ================= motion: one speed, one curve, used everywhere ================= */
:root{--m-fast:.18s;--m:.32s;--m-slow:.55s}
/* 1 the sidebar pill slides to the open page */
.navpill{position:absolute;left:16px;right:14px;height:44px;border-radius:13px;background:rgba(255,255,255,.08);pointer-events:none;opacity:0;transition:top var(--m) var(--spring),opacity var(--m-fast)}
.navpill.on{opacity:1}.navpill.snap{transition:opacity var(--m-fast)}
.navpill::before{content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#B4A6FF,#7B61FF);box-shadow:0 0 10px rgba(139,120,255,.8)}
.side.haspill .ni.on{background:none}.side.haspill .ni.on::before{display:none}
.side .ni{z-index:1}
.view.on{animation:viewin .42s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}}
/* 2 numbers roll to their new value */
.rl{display:inline-grid;overflow:hidden;vertical-align:top;height:1.25em;line-height:1.25em}
.rl>span{grid-area:1/1;animation:rlin var(--m) var(--spring) both}
.rl>span.o{animation-name:rlout}
.rl.dn>span{animation-name:rlin2}.rl.dn>span.o{animation-name:rlout2}
@keyframes rlin{from{transform:translateY(100%);opacity:0}}@keyframes rlout{to{transform:translateY(-100%);opacity:0}}
@keyframes rlin2{from{transform:translateY(-100%);opacity:0}}@keyframes rlout2{to{transform:translateY(100%);opacity:0}}
.bump{animation:bump .45s var(--spring)}@keyframes bump{40%{transform:scale(1.18)}}
/* 3 glass behind pop-ups; pop-ups open from where you clicked */
.veil{background:rgba(14,10,30,.38);-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15)}
.mini,.modal{transform:translate(-50%,-50%) scale(.94)}
.mini.on,.modal.on{transform:translate(-50%,-50%) scale(1)}
.wsmenu,.plusmenu{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
/* 4 the approve moment */
#rkOk{position:relative;overflow:hidden}
#rkOk.done{pointer-events:none}
#rkOk.done::before{content:"";position:absolute;inset:0;background:linear-gradient(#22C55E,#16A34A);transform-origin:left;animation:okfill .32s var(--ease) both}
#rkOk.done>*{position:relative}
#rkOk.done svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:okdraw .3s .12s var(--ease) forwards}
@keyframes okfill{from{transform:scaleX(0)}}@keyframes okdraw{to{stroke-dashoffset:0}}
.rkv{transition:transform var(--m) var(--ease),opacity var(--m) var(--ease)}
.rkv.out{transform:translateX(-28px);opacity:0}
.rkv.out.r{transform:translateY(14px)}
.rkv.in,.rkdone.in{animation:rkin .45s var(--spring)}
@keyframes rkin{from{transform:translateX(28px);opacity:0}}
.rks{transition:opacity .2s,box-shadow .2s,transform .2s var(--ease),width .3s var(--ease),margin .3s var(--ease)}
.rks.gone{width:0!important;margin:0 -3px!important;opacity:0;transform:scale(.6)}
/* 5 a soft shimmer while a post is being made, not a spinner */
.wt.st-making>img,.mrow .th img{filter:blur(4px) saturate(.85);transform:scale(1.1)}
.wt.st-making::after,.mrow .th::after,.cc.making::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);background-size:250% 100%;animation:shim 1.8s ease-in-out infinite;pointer-events:none}
@keyframes shim{from{background-position:130% 0}to{background-position:-130% 0}}
.cc.making{position:relative;overflow:hidden;border:0!important;box-shadow:0 0 0 1px rgba(109,85,253,.25)!important;background:#F7F5FF}
.cc.making img{filter:blur(2px)}
/* 6 one hover: lift 2px, softer shadow, the picture zooms a little in its frame */
:is(.ti,.opp,.lt,button.prod,.rki,.mode):hover{transform:translateY(-2px)}
:is(.ti,.opp,.lt,.mode):hover{box-shadow:0 0 0 1px rgba(24,24,27,.05),0 2px 4px rgba(24,24,27,.04),0 22px 40px -16px rgba(40,24,110,.22)}
:is(.ti,.opp,.lt,.mode,.rki){transition:transform var(--m) var(--ease),box-shadow var(--m) var(--ease),background var(--m-fast)}
:is(.lt,button.prod,.phgrid .ph){overflow:hidden}
:is(.lt,button.prod,.phgrid .ph) img{transition:transform .6s var(--ease)}
:is(.lt,button.prod,.phgrid .ph):hover img{transform:scale(1.03)}
.btn:active{transform:scale(.97)}
/* 7 a light that follows the cursor on main buttons */
.btn.pri{position:relative;overflow:hidden;isolation:isolate}
/* main buttons on hover (23 Oct, Josh: like Dashboard V4, "particles… and a light flash that goes across it, but not as fast"):
   a slow sheen crosses once, and a few sparkles drift up out of the button (made in JS below, .bfx) */
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:50%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-12deg);opacity:0;pointer-events:none}
.btn.pri:hover::after{animation:bSheen 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bSheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.bfx{position:fixed;z-index:200;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none;color:#fff;animation:bfxUp var(--t) cubic-bezier(.2,.7,.3,1) forwards}
.bfx svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
@keyframes bfxUp{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.btn.pri:hover::after,.bfx{animation:none;display:none}}
#calmHero{--mx:50%;--my:0%}
#calmHero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(160,140,255,.12),transparent 60%);opacity:0;transition:opacity .4s}
#calmHero:hover::after{opacity:1}
/* 8 the "all done" moment, once */
.rkdone .cel{position:relative;width:120px;height:120px;margin:-20px auto 0}
.rkdone .cel img{width:100%;height:100%;object-fit:contain;animation:celin .7s var(--spring) both}
.rkdone .cel i{position:absolute;left:50%;top:50%;width:var(--s,8px);height:var(--s,8px);margin:-4px;border-radius:50%;background:var(--c);opacity:0;animation:spark 1s var(--d,0s) var(--ease) forwards}
.rkdone .cel i.st{border-radius:2px;transform:rotate(45deg)}
@keyframes celin{from{transform:scale(.5) translateY(20px);opacity:0}}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.navpill{transition:none}.wt.st-making::after,.mrow .th::after,.cc.making::after{animation:none}}



/* ================= sale-day pop-up: six first-step styles ================= */
#promoModal[class*="ps-"]{width:min(500px,calc(100vw - 40px));display:block}
#promoModal .pchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:9px;font-size:12.5px;font-weight:700;margin-bottom:12px}
#promoModal h2{font-size:23px;letter-spacing:-.025em;line-height:1.2}
.prows{display:grid;gap:8px;margin-top:16px}
.popt{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px 12px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2);text-align:left;transition:box-shadow .2s,transform .25s var(--ease),background .2s}
.popt:hover{box-shadow:0 0 0 1.5px var(--vio),0 10px 24px -14px rgba(109,85,253,.5);transform:translateY(-1px)}
.pic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--vio-l);color:var(--vio);flex:none}.pic svg{width:20px;height:20px}
.ptx{flex:1;min-width:0}.ptx b{display:block;font-size:15.5px;font-weight:650;color:var(--ink)}.ptx small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.pchev{width:18px;height:18px;color:#B8B5C6;flex:none;transition:transform .25s var(--ease),color .2s}.popt:hover .pchev{transform:translateX(3px);color:var(--vio)}
.pskip{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;height:42px;padding:0 16px 0 13px;border-radius:12px;background:#F3F2F8;font-size:14px;font-weight:650;color:var(--ink);transition:background .15s}.pskip:hover{background:#EAE8F2}.pskip svg{width:17px;height:17px;color:var(--muted)}
/* photo header */
#promoModal.ps-photo{padding:0;overflow:hidden}
.pshero{position:relative;height:190px;padding:20px 24px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(180deg,rgba(10,6,24,0) 30%,rgba(10,6,24,.75)),var(--ph) center/cover}
.pshero .pchip{position:absolute;top:18px;left:20px;background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);margin:0}
.pshero h2{font-size:30px;color:#fff;letter-spacing:-.03em}.pshero p{font-size:15px;color:rgba(255,255,255,.85);margin-top:2px}
.pin2{padding:18px 24px 18px}
/* picture cards */
#promoModal.ps-cards{width:min(760px,calc(100vw - 40px));padding:26px}
.phd .sub{max-width:520px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.pcard{display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair2);overflow:hidden;text-align:left;transition:box-shadow .2s,transform .3s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--vio),0 18px 34px -18px rgba(109,85,253,.55)}
.pcimg{position:relative;height:120px;background:linear-gradient(135deg,#F1EDFF,#FFEFF6);display:grid;place-items:center;overflow:hidden}
.pcimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.pcard:hover .pcimg img{transform:scale(1.05)}
.pcic{position:absolute;left:12px;bottom:12px;width:36px;height:36px;border-radius:11px;background:#fff;color:var(--vio);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}.pcic svg{width:18px;height:18px}
.pctag{position:absolute;top:12px;right:12px;height:28px;padding:0 10px;border-radius:9px;background:#E11D48;color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(225,29,72,.7)}
.pccal{position:relative;width:64px;height:68px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -12px rgba(60,40,140,.5);display:flex;flex-direction:column;align-items:center;overflow:hidden}.pccal small{width:100%;text-align:center;background:#E11D48;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 0}.pccal b{font-size:28px;font-weight:800;margin-top:2px}
.pcard .ptx{padding:12px 14px 14px}
/* countdown */
#promoModal.ps-count{width:min(720px,calc(100vw - 40px));padding:0;overflow:hidden}
.pcnt{display:grid;grid-template-columns:220px 1fr}
.pcl{background:var(--bg);color:var(--c);padding:26px 22px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden}
.pcl::after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:var(--c);opacity:.08}
.pce{font-size:30px}.pcl b{font-size:84px;font-weight:800;line-height:.95;letter-spacing:-.05em;margin-top:18px}.pcl small{font-size:14px;font-weight:700;margin-top:4px}
.pcl p{margin-top:auto;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink2)}
.pcr{padding:26px 26px 20px}.pcr h2{font-size:22px}
/* ClipMagic asks */
#promoModal.ps-ask{padding:26px 24px 20px;background:linear-gradient(180deg,#F7F5FF,#fff 55%)}
.pshask{display:flex;gap:10px;align-items:flex-end}
.pav{width:54px;height:54px;object-fit:contain;flex:none}
.pbub{padding:14px 16px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 10px 24px -16px rgba(60,40,140,.4);font-size:15px;line-height:1.5;color:var(--ink2);animation:rise .45s var(--ease) backwards}
.pbub b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
.preps{display:grid;gap:8px;margin-top:16px;padding-left:64px}
.prep{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:18px 18px 6px 18px;background:#EFEBFF;color:var(--ink);text-align:left;box-shadow:inset 0 0 0 1px rgba(109,85,253,.14);transition:transform .25s var(--ease),filter .2s;animation:rise .45s var(--ease) backwards}
.prep:nth-child(2){animation-delay:.07s}.prep:nth-child(3){animation-delay:.14s}.prep:nth-child(4){animation-delay:.21s}
.prep:hover{transform:translateX(-3px);background:#E6E0FF;box-shadow:inset 0 0 0 1.5px var(--vio)}
.prep .pic{background:#fff;color:var(--vio);width:36px;height:36px;border-radius:11px}.prep .pic svg{width:18px;height:18px}
.prep .ptx b{color:var(--ink);font-size:15px}.prep .ptx small{color:var(--muted)}
.prep.ghost{background:none;box-shadow:inset 0 0 0 1px var(--hair2);color:var(--muted);justify-content:center}.prep.ghost .ptx{flex:none}.prep.ghost .ptx b{color:var(--muted);font-weight:600;font-size:14px}
/* dark seasonal */
#promoModal.ps-dark{padding:0;overflow:hidden;background:#120E1F}
.pdk{position:relative;padding:28px 24px 20px;color:#fff;background:radial-gradient(70% 55% at 85% 0%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(109,85,253,.35),transparent 70%)}
.pdk .pchip{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pdk h2{font-size:32px;color:#fff;letter-spacing:-.03em}.pdw{color:rgba(255,255,255,.7);font-size:15px;margin-top:2px}
.pdk .sub{color:rgba(232,226,255,.7);margin-top:12px}
.pdk .popt{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pdk .popt:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pdk .pic{background:rgba(255,255,255,.1);color:#fff}.pdk .ptx b{color:#fff}.pdk .ptx small{color:rgba(232,226,255,.62)}
.pdk .pskip{background:rgba(255,255,255,.08);color:#fff}.pdk .pskip:hover{background:rgba(255,255,255,.14)}.pdk .pskip svg{color:rgba(232,226,255,.6)}

/* countdown variants: a slimmer side and options that show the post you'd get */
#promoModal.ps-count2,#promoModal.ps-count3{width:min(700px,calc(100vw - 40px));padding:0;overflow:hidden}
#promoModal.ps-count4,#promoModal.ps-count5{width:min(620px,calc(100vw - 40px));padding:0;overflow:hidden}
.ptl.bot{padding:16px 22px 18px}.ptl.bot .ptld{margin:0 0 14px}
#promoModal.ps-count5 .pcr2{padding-bottom:18px}
.pcn2{display:grid;grid-template-columns:168px 1fr}
.pside{position:relative;padding:22px 18px;background:var(--bg);color:var(--c);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.pside::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent) 1px,transparent 1.4px);background-size:14px 14px;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);opacity:.7}
.pside>*{position:relative}
.pse{font-size:26px}
.pring{position:relative;width:118px;height:118px;margin-top:14px}
.pring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pring circle{fill:none;stroke-width:9;stroke-linecap:round}.pring .tr{stroke:color-mix(in srgb,var(--c) 14%,#fff)}.pring .fg{stroke:var(--c);animation:ringin 1s var(--ease) both}
@keyframes ringin{from{stroke-dashoffset:290}}
.pring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pring b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}.pring small{font-size:12.5px;font-weight:700;margin-top:2px}
.pside p{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;color:var(--ink2);line-height:1.4}.pside p b{display:block;font-size:15px;color:var(--ink)}
.pcpage{width:112px;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 16px 30px -14px color-mix(in srgb,var(--c) 70%,transparent),0 0 0 1px rgba(0,0,0,.04);margin-top:8px;transform:rotate(-3deg);animation:celin .6s var(--spring) both}
.pcpage small{display:block;background:var(--c);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 0}
.pcpage b{display:block;font-size:52px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-top:4px}
.pcpage span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);padding-bottom:10px}
.pdleft{margin-top:16px;height:30px;padding:0 12px;border-radius:10px;background:#fff;color:var(--c);font-size:13px;font-weight:800;display:inline-flex;align-items:center;box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}
.pcr2{padding:22px 22px 22px}.pcr2 h2{font-size:21px!important}
.prich{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2);text-align:left;transition:box-shadow .2s,transform .25s var(--ease)}
.prich:hover{box-shadow:0 0 0 1.5px var(--vio),0 12px 26px -14px rgba(109,85,253,.5);transform:translateY(-1px)}
.prich:hover .pchev{transform:translateX(3px);color:var(--vio)}
.pmini{position:relative;width:64px;height:80px;border-radius:11px;overflow:hidden;flex:none;background:#222;box-shadow:0 6px 14px -8px rgba(0,0,0,.45)}
.pmini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}.prich:hover .pmini img{transform:scale(1.06)}
.pmini::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.7))}
.pmini em{position:absolute;z-index:1;left:5px;right:5px;bottom:5px;font-style:normal;font-size:8.5px;font-weight:800;line-height:1.15;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mtag{position:absolute;z-index:1;top:5px;left:5px;height:16px;padding:0 5px;border-radius:5px;background:var(--c);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center}
.mspk{position:absolute;z-index:1;top:5px;left:5px;width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.9);color:var(--vio);display:grid;place-items:center}.mspk svg{width:11px;height:11px}
.pmini.cal{background:var(--bg);display:flex;flex-direction:column;align-items:center;padding-top:8px}.pmini.cal::after{display:none}
.pmini.cal em{color:var(--ink);font-size:8.5px;text-align:center}
.mcal{width:34px;border-radius:7px;background:#fff;overflow:hidden;text-align:center;box-shadow:0 3px 8px -4px rgba(0,0,0,.3)}.mcal small{display:block;background:var(--c);color:#fff;font-size:7px;font-weight:800;text-transform:uppercase;padding:1px 0}.mcal b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.prich .ptx small{margin-top:1px}
.pex{display:flex;align-items:baseline;gap:6px;margin-top:6px;font-size:12.5px;color:var(--ink2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pex i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--vio);flex:none}
/* timeline */
.ptl{padding:20px 22px 16px;background:var(--bg);position:relative}
.ptlh{display:flex;align-items:center;gap:10px}.ptlh .pchip{margin:0!important}.ptlh b{font-size:15px;color:var(--ink)}
.ptld{display:flex;justify-content:space-between;margin-top:16px;position:relative}
.ptld::before{content:"";position:absolute;left:6px;right:14px;top:13px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent))}
.ptld span{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ptld i{width:12px;height:12px;margin:8px 0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,#fff);font-style:normal;display:grid;place-items:center}
.ptld span.td i{background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.ptld span.evd i{width:28px;height:28px;margin:0;font-size:16px;box-shadow:0 0 0 2px var(--c),0 8px 16px -8px var(--c);animation:celin .6s .2s var(--spring) both}
.ptld small{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}.ptld .td small,.ptld .evd small{color:var(--c)}
#promoModal.ps-count4 .pcr2{padding-top:18px}


/* ================= calm versions: one question, few words, gentle motion ================= */
#promoModal[class*="ps-calm"]{width:min(560px,calc(100vw - 40px));padding:0;overflow:hidden}
#promoModal.ps-calm1,#promoModal.ps-calm4{width:min(600px,calc(100vw - 40px))}
.calmw{position:relative;padding:30px 30px 26px}
.calmw h2{font-size:26px!important;letter-spacing:-.03em;margin-top:6px}
.ctop{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}.ctop span{font-size:16px}
.ctop.c{justify-content:center}
.cic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--vio-l);color:var(--vio);flex:none;transition:transform .35s var(--spring),background .2s,color .2s}.cic svg{width:21px;height:21px}
/* little icon moments on hover */
.c-offer:hover .cic svg{animation:cswing .7s var(--ease)}.c-feature:hover .cic svg{animation:ctwink .8s var(--ease)}.c-heads:hover .cic svg{animation:cflip .6s var(--ease)}
@keyframes cswing{30%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}}@keyframes ctwink{40%{transform:scale(1.25) rotate(15deg)}}@keyframes cflip{40%{transform:translateY(-3px)}70%{transform:translateY(1px)}}
/* the "picked" moment before it moves on */
#promoModal [data-pact].picked{box-shadow:0 0 0 2px var(--vio)!important;background:#F7F5FF!important;transform:scale(.985)!important}
#promoModal [data-pact].picked .cic{background:var(--vio);color:#fff;transform:scale(1.08)}
/* 1 three tiles */
.ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.ctile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 16px 16px;border-radius:20px;background:#F8F7FC;text-align:left;transition:background .25s,box-shadow .25s,transform .3s var(--ease);animation:rise .5s calc(var(--j) * 70ms + 80ms) var(--ease) backwards}
.ctile:hover{background:#fff;box-shadow:0 0 0 1px var(--hair2),0 18px 36px -18px rgba(60,40,140,.35);transform:translateY(-3px)}
.ctile .cic{margin-bottom:14px;background:#fff;box-shadow:0 2px 6px rgba(24,24,27,.06)}.ctile:hover .cic{background:var(--vio-l)}
.ctile b{font-size:16px;font-weight:700}.ctile small{font-size:13px;color:var(--muted);line-height:1.4}
.ctile em{font-style:normal;font-size:12.5px;color:var(--vio);font-weight:600;margin-top:auto;padding-top:12px;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .35s var(--ease)}
.ctile:hover em,.ctile:focus-visible em{opacity:1;transform:none}
/* 2 quiet list */
.clist{display:grid;gap:4px;margin-top:16px}
.cli{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;margin:0 -10px;border-radius:16px;text-align:left;transition:background .2s;animation:rise .5s calc(var(--j) * 70ms + 80ms) var(--ease) backwards}
.cli:hover{background:#F6F5FA}
.ctx{flex:1;min-width:0}.ctx b{display:block;font-size:16px;font-weight:650}.ctx small{display:block;font-size:13.5px;color:var(--muted);margin-top:1px}
.cli em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--vio);white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .4s var(--ease),opacity .25s}
.cli:hover em{max-width:220px;opacity:1}
.cli .pchev{opacity:0;transition:opacity .2s,transform .25s var(--ease)}.cli:hover .pchev{opacity:1;transform:translateX(2px)}
/* 3 soft glow, rows open on hover */
#promoModal.ps-calm3{background:#fff}
.cglow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cglow i{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(60px);opacity:.28;animation:cdrift 14s ease-in-out infinite alternate}
.cglow i:first-child{background:var(--c);top:-160px;right:-80px}.cglow i:last-child{background:#8B78FF;bottom:-200px;left:-120px;animation-delay:-7s}
@keyframes cdrift{to{transform:translate(-40px,30px) scale(1.15)}}
.cacc{display:grid;gap:8px;margin-top:18px}
.cac{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:18px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(24,24,27,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;transition:box-shadow .25s,background .25s;animation:rise .5s calc(var(--j) * 70ms + 80ms) var(--ease) backwards}
.cac:hover{background:#fff;box-shadow:0 0 0 1px rgba(109,85,253,.25),0 14px 30px -18px rgba(60,40,140,.4)}
.cexp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}.cexp>span{overflow:hidden}
.cac:hover .cexp,.cac:focus-visible .cexp{grid-template-rows:1fr}
.cac small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}.cac em{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--vio);margin-top:4px}
.cac .pchev{transition:transform .25s var(--ease),color .2s}.cac:hover .pchev{transform:translateX(3px);color:var(--vio)}
/* 4 yes first */
.cyes{text-align:center;padding-top:26px}
.cyav{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto 6px;animation:celin .7s var(--spring) both,cbob 4s 1s ease-in-out infinite}
@keyframes cbob{50%{transform:translateY(-5px)}}
.cyes h2{line-height:1.25}.cyes .sub{margin-top:8px}
.cyb{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px}.cyb .btn{height:46px;padding:0 22px;font-size:15px;border-radius:14px}.cyb .pskip{margin:0;height:46px}
#promoModal.ps-calm4 .pskip svg{width:16px;height:16px}


/* ================= yes first: headline-only tiles that reveal details on hover ================= */
#promoModal[class*="ps-yes"]{width:min(620px,calc(100vw - 40px));padding:0;overflow:hidden}
.rtiles{display:flex;gap:10px;margin-top:20px}
.rt{position:relative;flex:1 1 0;min-width:0;height:176px;border-radius:20px;background:#F8F7FC;overflow:hidden;text-align:center;transition:background .3s,box-shadow .3s,transform .35s var(--ease),flex-grow .45s var(--ease),opacity .3s;animation:rise .5s calc(var(--j) * 70ms + 80ms) var(--ease) backwards}
.rt:hover,.rt:focus-visible{background:#fff;box-shadow:0 0 0 1px var(--hair2),0 18px 36px -18px rgba(60,40,140,.35)}
.rt b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.rtf{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-50%);transition:top .45s var(--ease),transform .45s var(--ease)}
.rtf .cic{background:#fff;box-shadow:0 2px 6px rgba(24,24,27,.06)}.rt:hover .rtf .cic{background:var(--vio-l)}
.rtd{position:absolute;left:14px;right:14px;bottom:16px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .45s var(--ease)}
.rtd small{font-size:13px;color:var(--muted);line-height:1.4}.rtd em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--vio);line-height:1.35}
/* slide up */
.rt-slide:hover .rtf,.rt-slide:focus-visible .rtf{top:20px;transform:none}
.rt-slide:hover .rtd,.rt-slide:focus-visible .rtd{opacity:1;transform:none;transition-delay:.08s}
.rt-slide .rtf{gap:10px}.rt-slide .rtd{top:52px;bottom:auto}.rt-grow .rtd{top:76px;bottom:auto}
.rtf .cic{transition:transform .35s var(--spring),opacity .25s,margin .45s var(--ease),background .2s}
.rt-slide:hover .rtf .cic,.rt-slide:focus-visible .rtf .cic,.rt-photo:hover .rtf .cic,.rt-photo:focus-visible .rtf .cic{opacity:0;transform:scale(.6);margin-bottom:-54px}
/* grow */
.m-grow .rt{text-align:left}
.m-grow .rt .rtf{align-items:center}
.m-grow .rt:hover{flex-grow:1.9}
.m-grow:hover .rt:not(:hover){opacity:.6}
.rt-grow:hover .rtf{top:18px;left:18px;right:18px;transform:none;flex-direction:row;gap:12px}
.rt-grow .rtd{left:18px;right:18px}
.rt-grow:hover .rtd{opacity:1;transform:none;transition-delay:.15s}
.rt-grow .rtd small,.rt-grow .rtd em{white-space:normal}
/* flip */
.rt-flip{background:none!important;box-shadow:none!important;perspective:900px;overflow:visible}
.rtin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--spring)}
.rt-flip:hover .rtin,.rt-flip:focus-visible .rtin{transform:rotateY(180deg)}
.rtfront,.rtback{position:absolute;inset:0;border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rtfront{background:#F8F7FC}
.rtback{background:#fff;box-shadow:0 0 0 1.5px rgba(109,85,253,.35),0 18px 36px -18px rgba(60,40,140,.4);transform:rotateY(180deg);padding:18px 16px;text-align:left}
.rtback .rtd{position:static;opacity:1;transform:none;margin-top:8px}
#promoModal .rt-flip.picked{box-shadow:none!important;background:none!important}#promoModal .rt-flip.picked .rtback{box-shadow:0 0 0 2px var(--vio)}
/* photo */
.rt-photo:hover .rtf,.rt-photo:focus-visible .rtf{top:18px;transform:none}
.rtp{position:absolute;left:10px;right:10px;bottom:10px;height:84px;border-radius:14px;overflow:hidden;transform:translateY(calc(100% + 20px));transition:transform .5s var(--spring);background:#222}
.rt-photo:hover .rtp,.rt-photo:focus-visible .rtp{transform:none}
.rtp img{width:100%;height:100%;object-fit:cover}
.rtp::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.7))}
.rtpt{position:absolute;z-index:1;left:10px;right:10px;bottom:8px;text-align:left}.rtpt em{font-style:normal;font-size:12px;font-weight:700;color:#fff;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtcal{position:absolute;inset:0;background:var(--bg);display:grid;place-items:center;padding-bottom:16px}.rtcal .mcal{transform:scale(1.2)}
.rt-photo .rtcal+.rtpt em,.rtp:has(.rtcal) .rtpt em{color:var(--ink)}.rtp:has(.rtcal)::after{display:none}


/* "Something else": a type box opens inside the card */
.pown{position:relative;margin-top:10px;border-radius:18px;transition:box-shadow .2s}
.pown>.addopt{margin-top:0}
.pown .ic.pen{color:var(--vio)}.pown .ic.pen svg{width:19px;height:19px}
.pownin{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}.pownin>div{overflow:hidden}
.pown.on{box-shadow:0 0 0 2px var(--vio);background:#fff}
.pown.on>.addopt{box-shadow:none;background:none}
.pown.on .pownin{grid-template-rows:1fr}
.pownin input{display:block;width:calc(100% - 28px);margin:0 14px 14px;height:46px;padding:0 14px;border-radius:12px;background:#F7F6FB;font-size:15px;box-shadow:inset 0 0 0 1px var(--hair2)}
.pownin input:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--vio),0 0 0 4px rgba(109,85,253,.1)}


/* yes first · photos: a rectangle photo on each tile, the example slides up over it on hover */
.m-pics .pt6{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--hair2);overflow:hidden;text-align:left;transition:box-shadow .3s,transform .35s var(--ease);animation:rise .5s calc(var(--j) * 70ms + 80ms) var(--ease) backwards}
.m-pics .pt6:hover,.m-pics .pt6:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--vio),0 18px 36px -18px rgba(60,40,140,.45)}
.pt6i{position:relative;height:118px;overflow:hidden;background:#222}
.pt6i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.pt6:hover .pt6i img{transform:scale(1.06)}
.pt6i .rtcal{padding-bottom:0}.pt6i .rtcal .mcal{transform:scale(1.5)}
.pt6i .mtag{position:absolute;top:10px;left:10px;height:22px;padding:0 8px;border-radius:7px;font-size:11.5px}
.pt6e{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12.5px;font-weight:700;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(10,6,24,.82));transform:translateY(100%);transition:transform .4s var(--spring)}
.pt6:hover .pt6e,.pt6:focus-visible .pt6e{transform:none}
.pt6t{padding:12px 14px 14px}.pt6t b{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}.pt6t small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
#promoModal .pt6.picked{box-shadow:0 0 0 2px var(--vio)!important}


/* tiles with designed pictures of the kind of post, no product photos */
.pt6i.art{background:none}
/* post mock-ups */
.ilm{position:absolute;inset:0;background:linear-gradient(135deg,#F4F1FF,var(--bg));display:grid;place-items:center}
.mk1{position:absolute;width:66px;height:82px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 22px -10px rgba(40,20,90,.45);transition:transform .5s var(--spring)}
.mk1.back{background:#fff;opacity:.7;transform:rotate(-9deg) translate(-16px,4px);box-shadow:0 6px 14px -8px rgba(40,20,90,.3)}
.mk1:not(.back){transform:rotate(4deg) translate(8px,0)}
.pt6:hover .mk1:not(.back){transform:rotate(0) translate(4px,-3px) scale(1.06)}.pt6:hover .mk1.back{transform:rotate(-13deg) translate(-22px,6px)}
.mk1.off{background:var(--c);color:#fff}.mk1.off small{font-size:6.5px;font-weight:700;opacity:.9}.mk1.off b{font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1}.mk1.off i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em}
.mk1.ft{background:#1B1530;color:#fff;overflow:hidden}.mk1.ft .spot{position:absolute;inset:-20px;background:radial-gradient(circle at 50% 35%,rgba(255,214,150,.55),transparent 55%)}.mk1.ft .sp1{position:relative;width:16px;height:16px;color:#FFD48A}.mk1.ft .sp1 svg{width:16px;height:16px}.mk1.ft small{position:relative;font-size:6.5px;font-weight:800;letter-spacing:.12em;margin-top:4px;color:#FFD48A}.mk1.ft b{position:relative;font:700 10px/1.1 Fraunces,serif;margin-top:2px;padding:0 6px}
.mk1.hu{background:#fff;color:var(--ink);gap:3px}.mk1.hu .mcal{transform:scale(.85)}.mk1.hu b{font-size:9.5px;font-weight:900;letter-spacing:.04em;color:var(--c)}.mk1.hu small{font-size:7px;color:var(--muted);font-weight:600}
/* bold type */
.ilt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:transform .6s var(--ease)}
.pt6:hover .ilt{transform:scale(1.05)}
.ilt.off{background:var(--c);color:#fff}.ilt.off b{font-size:44px;font-weight:900;letter-spacing:-.05em;line-height:1}.ilt.off small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:4px}
.ilt.ft{background:#16112A;color:#fff}.ilt.ft em{font:italic 600 30px/1 Fraunces,serif;color:#FFD48A}.ilt.ft b{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-top:6px}.ilt.ft i{position:absolute;top:14px;right:18px;font-style:normal;color:#FFD48A;font-size:16px;animation:ctwink 2.4s ease-in-out infinite}
.ilt.hu{background:var(--bg);color:var(--c)}.ilt.hu b{font-size:30px;font-weight:900;letter-spacing:-.03em}.ilt.hu small{margin-top:6px;height:24px;padding:0 10px;border-radius:8px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
/* drawings */
.ild{position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 100%,var(--bg),#F7F5FF);display:grid;place-items:center}
.ild svg{width:150px;height:112px;overflow:visible}
.ild .fill{fill:var(--vio)}.ild .fill2{fill:#8E7BFF}.ild .hole{fill:#fff}.ild .pct{fill:#fff;font:800 22px Inter,sans-serif}.ild .dot{fill:#C9BDFF}.ild .ilspk{fill:#FFB648}
.ild.c-offer .fill{fill:var(--c)}
.ild .dome{fill:#E9E4FF;stroke:var(--vio);stroke-width:2.5}.ild .knob{fill:var(--vio)}
.ild .wave{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round}
.ild .tag{transform-origin:64px 46px;transition:transform .6s var(--spring)}.pt6:hover .ild .tag{transform:rotate(-12deg) scale(1.06)}
.ild .stand{transition:transform .6s var(--spring)}.pt6:hover .ild .stand{transform:translateY(-3px)}.pt6:hover .ild .ilspk{animation:ctwink 1s var(--ease)}
.pt6:hover .ild .w1{animation:wv 1.2s ease-out infinite}.pt6:hover .ild .w2{animation:wv 1.2s .2s ease-out infinite}
@keyframes wv{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

/* the Design panel */
.dzbtn{position:fixed;z-index:70;right:18px;bottom:18px;display:flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:12px;background:rgba(23,21,31,.88);color:#fff;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.dzbtn svg{width:17px;height:17px}
.dzpanel{position:fixed;z-index:71;right:18px;bottom:66px;width:330px;max-height:calc(100vh - 100px);overflow-y:auto;padding:16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 30px 60px -20px rgba(20,10,60,.45);animation:pmin .25s var(--ease)}
/* ClipScout in the corner (from Dashboard V4) */
.csd{position:fixed;right:26px;bottom:26px;z-index:50}
.csd[hidden]{display:none}
.csd-b{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(24,24,27,.06),0 14px 30px -10px rgba(40,30,110,.45);transition:transform .26s var(--spring),box-shadow .26s}
.csd-b:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 1px rgba(24,24,27,.06),0 18px 36px -10px rgba(40,30,110,.55)}
.csd.open .csd-b{transform:scale(.94)}
.csd-av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#120D26}   /* a 4px white rim (Josh: 1-2px thinner) */
.csd-av img{width:118%;height:118%;object-fit:cover;margin-top:6%}
.csd-av video{width:100%;height:100%;object-fit:cover;transform:scale(1.3) translateY(4%)}
.csd-ring{position:absolute;inset:-4px;width:68px;height:68px;transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .3s}
.csd-ring circle{fill:none;stroke-width:3.5}
.csd-ring .bg{stroke:rgba(139,120,255,.18)}
.csd-ring .fg{stroke:#7C63FF;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);transition:stroke-dashoffset .5s linear,stroke .3s}
.csd.working .csd-ring{opacity:1}
.csd.done .csd-ring{opacity:1}.csd.done .csd-ring .fg{stroke:#22C55E;stroke-dashoffset:0}
.csd-n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;color:#fff;background:linear-gradient(180deg,#FF6A8A,#F43F5E);box-shadow:0 0 0 2.5px #fff,0 6px 12px -4px rgba(244,63,94,.6);animation:csdPop .42s var(--spring) both}
.csd-n[hidden]{display:none}
@keyframes csdPop{from{transform:scale(.4);opacity:0}}
.csd-ok{position:absolute;inset:6px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;color:#fff;background:rgba(34,197,94,.9);opacity:0;transform:scale(.6);pointer-events:none}
.csd.done .csd-ok{animation:csdOk 1.3s var(--ease) both}
@keyframes csdOk{15%{opacity:1;transform:scale(1.05)}25%{transform:none}75%{opacity:1;transform:none}100%{opacity:0;transform:scale(.9)}}
.csd-b.bump{animation:csdBump .7s var(--spring)}
@keyframes csdBump{25%{transform:scale(1.16)}55%{transform:scale(.95)}80%{transform:scale(1.03)}}
.csd-panel{position:absolute;right:0;bottom:74px;width:330px;padding:12px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(24,24,27,.07),0 30px 60px -20px rgba(24,24,60,.5);transform-origin:100% 100%;animation:csdOpen .26s var(--spring)}
.csd-panel[hidden]{display:none}
@keyframes csdOpen{from{opacity:0;transform:translateY(8px) scale(.94)}}
.csd-panel .hd{display:flex;align-items:center;gap:10px;padding:2px 2px 8px}
.csd-panel .hd .csd-av{width:36px;height:36px}
.csd-panel .hd div{flex:1;min-width:0}.csd-panel .hd b{display:block;font-size:14.5px}
.csd-panel .hd div span{font-size:12px;color:var(--muted)}
.csd-panel .x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}.csd-panel .x:hover{background:#F3F3F6;color:var(--ink)}
.csd-panel .x svg{width:12px;height:12px}
.csd-panel .h{display:block;margin:8px 4px 4px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#A1A1AA}
.csd-panel .row{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border-radius:14px;text-align:left;transition:background .16s}
.csd-panel .row:hover{background:#F6F4FC}
.csd-panel .row.new{background:#F6F3FF}
.csd-panel .row img,.csd-panel .mk img{flex:none;width:32px;height:46px;border-radius:8px;object-fit:cover}
.csd-panel .row span,.csd-panel .mk span{flex:1;min-width:0}
.csd-panel .row b,.csd-panel .mk b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csd-panel .row em,.csd-panel .mk em{display:block;margin-top:1px;font-style:normal;font-size:11.5px;color:var(--muted)}
.csd-panel .row em s{margin-right:6px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:800;line-height:16px;text-decoration:none;color:#fff;background:linear-gradient(90deg,#8B78FF,#FF7AC6)}
.csd-panel .row .ch{flex:none;width:16px;height:16px;color:#C4C4CC}
.csd-panel .mk{display:flex;align-items:center;gap:10px;padding:6px}
.csd-panel .mk img{filter:saturate(calc(.3 + var(--p) * .7))}
.csd-panel .mk .bar{display:block;height:3px;margin-top:6px;border-radius:2px;background:#EFEDF7;overflow:hidden}
.csd-panel .mk .bar i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(90deg,#8B78FF,#FF7AC6);transition:width .5s linear}
.csd-panel .more{display:block;margin:2px 8px 0;font-size:12px;font-weight:600;color:var(--muted)}
.csd-panel .empty{margin:8px 6px;font-size:13px;color:var(--muted)}
.csd-panel .ft{display:flex;gap:6px;margin-top:10px}
.csd-panel .ft .go{flex:1;height:38px;border-radius:12px;font-size:13.5px;font-weight:700;color:#fff;background:var(--btn);box-shadow:var(--btn-sh)}
.csd-panel .ft .lk{height:38px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:700;color:var(--ink2);background:#F3F3F6}
/* the prototype's Design button moves to the bottom left, out of ClipScout's corner */
.dzbtn{right:auto!important;left:290px}.dzpanel{right:auto!important;left:290px}
.dzh{display:flex;align-items:baseline;justify-content:space-between}.dzh b{font-size:15px}.dzh span{font-size:12px;color:var(--muted)}
.dzl{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.dzg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dzg button{padding:9px 10px;border-radius:12px;text-align:left;box-shadow:0 0 0 1px var(--hair2);transition:box-shadow .15s,background .15s}.dzg button:hover{background:#FAF9FF}
.dzg button b{display:block;font-size:13px;font-weight:650}.dzg button small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.3}
.dzg button.on{box-shadow:0 0 0 2px var(--vio);background:#FAF9FF}
.dzg.sm button{padding:8px 10px}

/* ================= first-run walkthrough ================= */
.tour{position:fixed;inset:0;z-index:90;pointer-events:none}
.tour.on{pointer-events:auto}
.tdim{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(14,10,30,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.tour.on.wel .tdim{opacity:1}
.tspot{position:fixed;border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 7px rgba(139,120,255,.35);opacity:0;transition:top .5s var(--spring),left .5s var(--spring),width .5s var(--spring),height .5s var(--spring),border-radius .5s var(--spring),opacity .3s;pointer-events:none}
.tour.on:not(.wel) .tspot,.tour.on:not(.wel) .tmask{opacity:1}
.tmask{position:fixed;left:0;top:0;width:100vw;height:100vh;opacity:0;transition:opacity .35s}
.tmask rect.hole{transition:x .5s var(--spring),y .5s var(--spring),width .5s var(--spring),height .5s var(--spring),rx .5s var(--spring)}
.tspot::after{content:"";position:absolute;inset:-7px;border-radius:inherit;box-shadow:0 0 0 2px rgba(139,120,255,.6);animation:tping 2s var(--ease) infinite}
@keyframes tping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.06)}}
.tcard{position:fixed;width:340px;padding:20px;border-radius:22px;background:#fff;box-shadow:0 30px 80px -20px rgba(10,6,30,.55),0 0 0 1px rgba(24,24,27,.04);opacity:0;transform:translateY(8px) scale(.98);transition:top .5s var(--spring),left .5s var(--spring),opacity .3s,transform .4s var(--spring)}
.tour.on .tcard{opacity:1;transform:none}
.tcard.swap{opacity:0!important;transform:translateY(6px)!important;transition:opacity .15s,transform .15s}
.tcard .tn{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vio)}
.tcard h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:6px;line-height:1.25}
.tcard p{font-size:14.5px;line-height:1.5;color:var(--ink2);margin-top:6px}
.tfoot{display:flex;align-items:center;gap:8px;margin-top:18px}
.tdots{display:flex;gap:5px;margin-right:auto}.tdots i{width:6px;height:6px;border-radius:3px;background:#E3E1EC;transition:width .3s var(--spring),background .3s}.tdots i.on{width:18px;background:var(--vio)}
.tfoot .btn{height:40px;padding:0 16px;border-radius:12px;font-size:14px}
.tskip{position:absolute;top:14px;right:14px;height:28px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted)}.tskip:hover{background:#F3F2F8;color:var(--ink)}
.tcard.big{width:440px;padding:28px 28px 24px;text-align:center}
.tcard.big .twav{width:96px;height:96px;margin:-6px auto 4px;display:block;object-fit:contain;animation:celin .7s var(--spring) both}
.tcard.big h3{font-size:24px}
.tcard.big p{max-width:340px;margin-left:auto;margin-right:auto}
.tsteps{display:grid;gap:8px;margin:18px 0 0;text-align:left}
.tsteps div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#F7F6FB;font-size:14px;color:var(--ink2);animation:rise .5s var(--ease) backwards}
.tsteps div:nth-child(2){animation-delay:.08s}.tsteps div:nth-child(3){animation-delay:.16s}
.tsteps b{color:var(--ink);font-weight:650}
.tsteps i{width:30px;height:30px;border-radius:10px;background:var(--btn);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;flex:none;box-shadow:0 4px 10px -4px rgba(98,73,248,.7)}
.tcard.big .tfoot{justify-content:center}.tcard.big .tfoot .btn{height:44px;padding:0 22px;font-size:15px}

/* ================= brand kit: editable ================= */
.kh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;min-height:26px}.kh h3{margin:0!important}
.khn{font-size:12.5px;color:var(--muted);font-weight:500}
button.kitlogo{width:100%;cursor:pointer;transition:box-shadow .2s}button.kitlogo:hover{box-shadow:0 0 0 2px var(--vio)}
.kitlogo img{max-width:70%;max-height:64px;object-fit:contain}
.sw{flex-wrap:nowrap}.sw label{position:relative;cursor:pointer;flex:1 1 0;max-width:52px;min-width:0}.sw label i,.sw .swadd{width:100%!important;height:auto!important;aspect-ratio:1}.sw .swadd{flex:1 1 0;max-width:52px}
.sw label i{display:block;width:52px;height:52px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .2s var(--spring),box-shadow .2s}
.sw label:hover i{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 2px #fff,0 0 0 4px var(--vio)}
.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sw .swx{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--ink2);box-shadow:0 1px 4px rgba(24,24,27,.25);display:grid;place-items:center;opacity:0;transition:opacity .15s;z-index:1}.sw .swx svg{width:10px;height:10px}
.sw label:hover .swx{opacity:1}
.sw .swadd{width:52px;height:52px;border-radius:14px;background:#F3F2F8;color:var(--muted);display:grid;place-items:center;transition:background .2s,color .2s}.sw .swadd:hover{background:var(--vio-l);color:var(--vio)}.sw .swadd svg{width:18px;height:18px}
.kitw{cursor:pointer;transition:box-shadow .2s}.kitw:hover{box-shadow:0 0 0 1.5px var(--vio),var(--shadow)}
.fontdemo.f-modern{font:800 27px Inter,sans-serif;letter-spacing:-.035em}.fontdemo.f-hand{font:600 28px Fraunces,serif;font-style:italic;letter-spacing:-.01em}
.kittone{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 2px}.kittone span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px;background:#F3F2F8;color:var(--ink2)}
button.prod{text-align:left;position:relative;cursor:pointer;transition:transform .25s var(--spring),box-shadow .2s}button.prod:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--vio)}
.prod .pe{position:absolute;top:8px;right:8px;height:28px;padding:0 10px;border-radius:9px;background:rgba(255,255,255,.95);font-size:12.5px;font-weight:700;color:var(--vio);display:grid;place-items:center;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(24,24,27,.15)}button.prod:hover .pe{opacity:1}
.phgrid .ph{position:relative}.phgrid .ph img{display:block}
.phgrid .ph button{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(15,12,30,.7);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .15s}.phgrid .ph button svg{width:12px;height:12px}.phgrid .ph:hover button{opacity:1}
#kitModal{width:min(520px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto}
#kitModal .lbl{margin:18px 0 8px}
.kin{width:100%;height:46px;padding:0 14px;border-radius:13px;box-shadow:0 0 0 1px var(--hair2);font-size:14.5px}
textarea.kin{height:auto;padding:12px 14px;line-height:1.5;resize:none}
.kin:focus{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.12)}
.kin2{display:grid;grid-template-columns:1.6fr 1fr;gap:8px}
.kchips{display:flex;flex-wrap:wrap;gap:6px}.kchips button{height:34px;padding:0 13px;border-radius:10px;background:#F3F2F8;font-size:13.5px;font-weight:600;color:var(--ink2);transition:background .15s,color .15s}.kchips button:hover{background:#ECEAF4}.kchips button.on{background:var(--vio);color:#fff}
.kfonts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kfonts button{height:64px;border-radius:13px;box-shadow:0 0 0 1px var(--hair2);display:grid;place-items:center;font-size:19px;color:var(--ink);overflow:hidden;padding:0 8px;white-space:nowrap}.kfonts button small{display:block;font:600 11.5px Inter,sans-serif;color:var(--muted);margin-top:2px}.kfonts button.on{box-shadow:0 0 0 2px var(--vio),0 0 0 6px rgba(109,85,253,.1)}
.kphs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.kphs button{display:block;height:0;padding:0 0 100%;border-radius:10px;overflow:hidden;position:relative}.kphs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.kphs button.on{box-shadow:0 0 0 2.5px var(--vio)}.kphs button.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px #fff;border-radius:10px}
.kphs .kup{background:#F3F2F8;color:var(--muted);display:grid;place-items:center}.kphs .kup svg{width:18px;height:18px}
.kfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.kfoot .kdel{margin-right:auto;color:#E11D48}

/* ================= captions ================= */
.capbox{margin-top:16px;padding:14px 16px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2)}
.capbox.ed{box-shadow:0 0 0 1.5px var(--vio),0 0 0 5px rgba(109,85,253,.1)}
.capbr{display:flex;align-items:center;gap:10px}.capbr>b{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.capbr .chg{margin-left:auto;height:30px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:700;background:var(--vio-l)}
.captext{cursor:text;margin-left:-8px;margin-right:-8px;padding:4px 8px;border-radius:10px;transition:background .15s}.captext:hover{background:#F7F6FB}
.captabs{display:flex;gap:4px;padding:3px;border-radius:11px;background:#F3F2F8}
.captabs button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 4px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.captabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.1)}
.captabs .pvl{width:20px;height:20px;border-radius:6px}.captabs .pvl svg{width:12px;height:12px}
.capsame{font-size:12.5px;color:var(--muted);font-weight:600}
.captext{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink);max-height:220px;overflow-y:auto}
.ctag{color:#1D4ED8}.clnk{color:var(--vio);font-weight:600}
.capta{width:100%;margin-top:10px;padding:12px 14px;border-radius:12px;background:#FAFAFC;box-shadow:inset 0 0 0 1px var(--hair2);font-size:15px;line-height:1.6;resize:none;min-height:150px}
.captools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.captools button{height:32px;padding:0 11px;border-radius:10px;background:#F3F2F8;font-size:13px;font-weight:600;color:var(--ink2)}.captools button:hover{background:var(--vio-l);color:var(--vio)}
.capsug{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:10px;border-radius:12px;background:#FAF9FF}
.capsug button{height:30px;padding:0 10px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--hair2);font-size:13px;font-weight:600;color:#1D4ED8}
.capsug button.on{background:#1D4ED8;color:#fff;box-shadow:none}.capsug.emo button{font-size:18px;width:36px;padding:0}
.capall{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--ink2);cursor:pointer}.capall input{accent-color:var(--vio);width:16px;height:16px}
.capmeta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--hair);font-size:12px;color:var(--muted)}
.capmeta .over{color:#E11D48;font-weight:700}
/* sale-day pop-up · bold type, round 2 (23 Oct, Josh: "polish it, more premium, create the graphics"): each tile is a little designed poster */
#promoModal.ps-yes8:has(.m-poster){width:min(740px,calc(100vw - 40px))}
.m-poster{gap:12px}
.m-poster .pt6{border-radius:22px;box-shadow:0 0 0 1px rgba(24,24,27,.07),0 12px 26px -18px rgba(15,26,51,.35)}
.m-poster .pt6:hover,.m-poster .pt6:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--vio),0 22px 40px -20px rgba(60,40,140,.5)}
.m-poster .pt6i{height:156px;margin:6px 6px 0;border-radius:17px;background:#111}
.m-poster .pt6t{padding:12px 14px 15px}
.m-poster .pt6t b{font-size:16px;letter-spacing:-.01em}
.m-poster .pt6e{border-radius:0 0 17px 17px}
.ilp{position:absolute;inset:0;overflow:hidden;isolation:isolate;font-family:Inter,system-ui,sans-serif}
.ilp .grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ilp .spk{position:absolute;z-index:3;width:13px;height:13px;fill:#FFE6A8;filter:drop-shadow(0 0 4px rgba(255,220,140,.7))}
.pt6:hover .ilp .spk{animation:ctwink 1.1s var(--ease)}
.ilp .ph img,.ilp .arch img{width:100%;height:100%;object-fit:cover;display:block}
/* an offer */
.ilp.off{background:radial-gradient(130% 100% at 0% 0%,color-mix(in srgb,var(--c) 62%,#FFC27A) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 62%,#2A0A00) 100%)}
.ilp.off::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px)}
.ilp.off .tx{position:absolute;z-index:2;left:15px;top:50%;transform:translateY(-52%);color:#fff;transition:transform .6s var(--spring)}
.ilp.off .tx b{display:block;font-size:52px;font-weight:900;line-height:.84;letter-spacing:-.065em;text-shadow:0 6px 18px rgba(0,0,0,.18)}
.ilp.off .tx b em{font-style:normal;font-size:.5em;letter-spacing:-.02em;vertical-align:.78em;margin-left:2px}
.ilp.off .tx i{display:block;margin-top:1px;font-style:normal;font-size:25px;font-weight:900;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.6px #fff}
.ilp.off .tx small{display:inline-block;margin-top:9px;padding:4px 8px;border-radius:7px;background:#fff;color:var(--c);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 6px 12px -6px rgba(0,0,0,.35)}
.ilp.off .ph{position:absolute;z-index:1;right:-22px;bottom:-26px;width:112px;height:112px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 20px 34px -12px rgba(0,0,0,.5);transform:rotate(-8deg);transition:transform .7s var(--spring)}
.ilp.off .stk{position:absolute;z-index:3;right:11px;top:10px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 8px 16px -8px rgba(0,0,0,.45);transform:rotate(12deg);transition:transform .6s var(--spring)}
.ilp.off .s1{left:44%;top:14px}.ilp.off .s2{left:10px;bottom:12px;width:10px;height:10px}
.pt6:hover .ilp.off .ph{transform:rotate(-2deg) scale(1.07) translate(-5px,-5px)}
.pt6:hover .ilp.off .stk{transform:rotate(-6deg) scale(1.08)}
.pt6:hover .ilp.off .tx{transform:translateY(-52%) scale(1.04)}
/* show something off */
.ilp.ft{background:radial-gradient(90% 80% at 30% 0%,#3B2B70 0%,#1A1433 55%,#0E0B1E 100%)}
.ilp.ft .beam{position:absolute;z-index:0;left:-10px;top:-40px;width:150px;height:220px;background:radial-gradient(closest-side,rgba(255,206,130,.42),transparent);filter:blur(4px);transform:rotate(-14deg)}
.ilp.ft .arch{position:absolute;z-index:1;left:14px;bottom:-2px;width:74px;height:108px;border-radius:38px 38px 6px 6px;overflow:hidden;box-shadow:0 0 0 3px #FFD48A,0 22px 34px -14px rgba(0,0,0,.7);transition:transform .7s var(--spring)}
.ilp.ft .tx{position:absolute;z-index:2;right:14px;top:50%;transform:translateY(-46%);text-align:right;color:#fff}
.ilp.ft .tx em{display:block;font:italic 700 33px/1 Fraunces,Georgia,serif;letter-spacing:-.01em;color:#FFD48A;text-shadow:0 4px 18px rgba(255,190,90,.35)}
.ilp.ft .tx b{display:block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ilp.ft .new{position:absolute;z-index:3;right:12px;top:11px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#FFD48A;color:#2A1A00;font-size:10px;font-weight:900;letter-spacing:.06em;transform:rotate(-14deg);box-shadow:0 8px 16px -8px rgba(0,0,0,.6);transition:transform .6s var(--spring)}
.ilp.ft .s1{left:100px;top:18px}.ilp.ft .s2{left:98px;bottom:18px;width:9px;height:9px}
.pt6:hover .ilp.ft .arch{transform:translateY(-6px) scale(1.04)}
.pt6:hover .ilp.ft .new{transform:rotate(6deg) scale(1.08)}
/* a heads-up */
.ilp.hu{background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--c) 22%,transparent) 1px,transparent 1.5px) 0 0/12px 12px,linear-gradient(160deg,#fff 0%,var(--bg) 70%)}
.ilp.hu .calp{position:absolute;z-index:2;left:16px;top:50%;width:66px;margin-top:-44px;border-radius:12px;overflow:hidden;background:#fff;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 16px 26px -12px rgba(60,30,10,.4);transform:rotate(-7deg);transition:transform .6s var(--spring)}
.ilp.hu .calp small{display:block;padding:5px 0 4px;background:var(--c);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ilp.hu .calp b{display:block;font-size:33px;font-weight:900;line-height:1.05;letter-spacing:-.04em;color:var(--ink);padding-top:3px}
.ilp.hu .calp i{display:block;font-style:normal;font-size:10px;font-weight:700;color:var(--muted);padding:0 0 7px}
.ilp.hu .calp::after{content:"";position:absolute;left:0;right:0;top:21px;height:6px;background:radial-gradient(circle,rgba(0,0,0,.12) 1.5px,transparent 2px) 0 0/9px 6px repeat-x}
.ilp.hu .tx{position:absolute;z-index:2;right:15px;top:50%;transform:translateY(-50%);text-align:right}
.ilp.hu .tx b{display:block;font-size:30px;font-weight:900;line-height:.94;letter-spacing:-.045em;color:var(--c)}
.ilp.hu .tx small{display:inline-flex;align-items:center;gap:5px;margin-top:9px;height:24px;padding:0 9px;border-radius:12px;background:#1A1433;color:#fff;font-size:11px;font-weight:700}
.ilp.hu .tx small svg{width:12px;height:12px}
.ilp.hu .clk{position:absolute;z-index:1;right:-14px;top:-16px;width:58px;height:58px;color:var(--c);opacity:.1;transition:transform 1.2s var(--spring)}
.pt6:hover .ilp.hu .calp{transform:rotate(-2deg) translateY(-3px) scale(1.04)}
.pt6:hover .ilp.hu .clk{transform:rotate(60deg)}
.ilp.hu .clk svg{width:100%;height:100%;display:block}


/* sale-day pop-up · the first question, calmer (23 Oct) */
#promoModal:has(.cyes2){width:min(500px,calc(100vw - 40px))}
.cyes2{position:relative;text-align:center;padding:34px 34px 28px;overflow:hidden}
.cy-glow{position:absolute;left:50%;top:-140px;width:420px;height:260px;margin-left:-210px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 16%,transparent),transparent);pointer-events:none}
.cy-cal{position:relative;display:inline-block;width:64px;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 16px 28px -14px rgba(60,30,10,.4);transform:rotate(-5deg);animation:cycal .7s var(--spring) both}
@keyframes cycal{from{opacity:0;transform:rotate(-14deg) translateY(10px) scale(.9)}}
.cy-cal small{display:block;padding:5px 0 4px;background:var(--c);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cy-cal b{display:block;font-size:30px;font-weight:900;line-height:1.08;letter-spacing:-.04em;color:var(--ink);padding-top:3px}
.cy-cal i{display:block;font-style:normal;font-size:10px;font-weight:700;color:var(--muted);padding-bottom:7px}
.cy-eye{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;font-size:13.5px;font-weight:700;color:var(--c)}
.cy-eye span{font-size:15px}
.cyes2 h2{position:relative;font-size:25px!important;line-height:1.2;letter-spacing:-.03em;margin-top:6px}
.cyes2 .sub{position:relative;margin-top:6px;font-size:15px;color:var(--muted)}
/* yes / no side by side, Yes wider (23 Oct, Josh) */
.cy-btns{position:relative;display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:24px}
.cy-btns .btn{flex:1.75 1 0;min-width:0;height:54px;padding:0 18px;gap:9px;font-size:15.5px;border-radius:16px}
.cy-ic{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6249F8;box-shadow:0 2px 6px rgba(40,20,140,.25)}
.cy-ic svg{width:14px;height:14px}
.cy-no{flex:1 1 0;min-width:0;height:54px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border-radius:16px;background:#F3F2F8;box-shadow:inset 0 0 0 1px rgba(24,24,27,.07);font-size:14.5px;font-weight:700;color:var(--ink2);white-space:nowrap;transition:background .2s,color .2s}
.cy-no svg{width:15px;height:15px;flex:none;color:var(--muted)}
.cy-no:hover{background:#EBE9F3;color:var(--ink)}
.cy-no:hover svg{color:var(--ink)}
@media (max-width:440px){.cyes2{padding-left:18px!important;padding-right:18px!important}.cy-btns{gap:8px}.cy-btns .btn{flex:1.4 1 0;padding:0 12px;gap:7px;font-size:14.5px;white-space:nowrap}.cy-ic{width:21px;height:21px}.cy-no{padding:0 10px;gap:6px;font-size:14px}}
/* little designed posters for the sale-day pop-up (23 Oct), themed per event: see posters.js */
.pst{position:absolute;inset:0;overflow:hidden;isolation:isolate;font-family:Inter,system-ui,sans-serif}
.pst .grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pst img{width:100%;height:100%;object-fit:cover;display:block}
.pst .pd{position:absolute;z-index:3;display:block;pointer-events:none;transition:transform .8s cubic-bezier(.32,.72,0,1)}
.pst .pd svg{display:block;width:100%;height:auto}
.pst .pd-spark svg{filter:drop-shadow(0 0 4px rgba(255,220,140,.7))}
/* positions */
.pst.off .pd.a{left:56%;top:9px;width:24px;transform:rotate(-12deg)}
.pst.off .pd.b{left:11px;bottom:10px;width:13px}
.pst.off .pd.c{left:49%;bottom:30%;width:10px}
.pst.ft .pd.d{left:96px;top:14px;width:20px;transform:rotate(10deg)}
.pst.ft .pd.e{left:100px;bottom:16px;width:10px}
.pst.hu .pd.f{left:44%;top:12px;width:24px;transform:rotate(-8deg)}
.pst.hu .pd.g{left:58px;top:26px;width:36px;z-index:4;transform:rotate(-14deg)}
.pst .pd-egg{width:18px!important}
.pst.off .pd-egg.a{left:58%;top:12px;width:18px!important;transform:rotate(-14deg)}
.pst.off .pd-egg.b{left:auto;right:84px;bottom:8px;width:16px!important;transform:rotate(12deg)}
.pst.ft .pd-egg.d{width:16px!important}
.pst.hu .pd-egg.f{width:18px!important;transform:rotate(14deg)}
.pst .pd-burst{width:26px!important}
.pst.off .pd-conf{inset:0;width:auto}
/* patterns on the offer */
.pst .pat{position:absolute;inset:0;z-index:0}
.pst .pat.stripes{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px)}
.pst .pat.snow{background:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px) 0 0/22px 22px,radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.4px) 11px 9px/26px 26px}
.pst .pat.conf{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70'%3E%3Crect x='8' y='10' width='7' height='3' rx='1' fill='%23E9C46A' transform='rotate(-25 11 11)'/%3E%3Crect x='44' y='6' width='6' height='3' rx='1' fill='%23F2A7C3' transform='rotate(30 47 7)'/%3E%3Ccircle cx='70' cy='18' r='1.8' fill='%237FD6C2'/%3E%3Crect x='22' y='48' width='6' height='3' rx='1' fill='%237FD6C2' transform='rotate(40 25 49)'/%3E%3Ccircle cx='58' cy='56' r='1.6' fill='%23E9C46A'/%3E%3C/svg%3E") 0 0/90px 70px;opacity:.85}
.pst .pat.zig{background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 3px,transparent 3px 14px)}
/* an offer */
.pst.off{background:radial-gradient(130% 100% at 0% 0%,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%)}
.pst.off .tx{position:absolute;z-index:2;left:15px;top:50%;transform:translateY(-52%);color:var(--ink);transition:transform .6s cubic-bezier(.32,.72,0,1)}
.pst.off .tx b{display:block;font-size:52px;font-weight:900;line-height:.84;letter-spacing:-.065em;text-shadow:0 6px 18px rgba(0,0,0,.14)}
.pst.off .tx b em{font-style:normal;font-size:.5em;letter-spacing:-.02em;vertical-align:.78em;margin-left:2px}
.pst.off .tx i{display:block;margin-top:1px;font-style:normal;font-size:25px;font-weight:900;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.pst.off .tx small{display:inline-block;margin-top:9px;padding:4px 8px;border-radius:7px;background:var(--tagbg);color:var(--tagc);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 6px 12px -6px rgba(0,0,0,.35);white-space:nowrap}
.pst.off .ph{position:absolute;z-index:1;right:-22px;bottom:-26px;width:112px;height:112px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 20px 34px -12px rgba(0,0,0,.5);transform:rotate(-8deg);transition:transform .7s cubic-bezier(.32,.72,0,1)}
.pst.off .stk{position:absolute;z-index:3;right:11px;top:10px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 8px 16px -8px rgba(0,0,0,.45);transform:rotate(12deg);transition:transform .6s cubic-bezier(.32,.72,0,1)}
/* show something off */
.pst.ft{background:radial-gradient(90% 80% at 30% 0%,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)}
.pst.ft .beam{position:absolute;z-index:0;left:-10px;top:-40px;width:150px;height:220px;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(4px);transform:rotate(-14deg)}
.pst.ft .arch{position:absolute;z-index:1;left:14px;bottom:-2px;width:74px;height:108px;border-radius:38px 38px 6px 6px;overflow:hidden;box-shadow:0 0 0 3px var(--gold),0 22px 34px -14px rgba(0,0,0,.7);transition:transform .7s cubic-bezier(.32,.72,0,1)}
.pst.ft .tx{position:absolute;z-index:2;right:14px;top:50%;transform:translateY(-46%);text-align:right;color:#fff;max-width:58%}
.pst.ft .tx em{display:block;font:italic 700 31px/.98 Fraunces,Georgia,serif;letter-spacing:-.01em;color:var(--gold);text-shadow:0 4px 18px rgba(0,0,0,.25)}
.pst.ft .tx em.l{font-size:23px}
.pst.ft .tx b{display:block;margin-top:7px;font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.pst.ft .new{position:absolute;z-index:3;right:12px;top:11px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#241500;font-size:9.5px;font-weight:900;letter-spacing:.04em;transform:rotate(-14deg);box-shadow:0 8px 16px -8px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.32,.72,0,1)}
/* a heads-up */
.pst.hu{background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--c) 22%,transparent) 1px,transparent 1.5px) 0 0/12px 12px,linear-gradient(160deg,#fff 0%,var(--bg) 70%)}
.pst.hu .calp{position:absolute;z-index:2;left:16px;top:50%;width:66px;margin-top:-44px;border-radius:12px;overflow:hidden;background:#fff;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 16px 26px -12px rgba(40,20,10,.4);transform:rotate(-7deg);transition:transform .6s cubic-bezier(.32,.72,0,1)}
.pst.hu .calp small{display:block;padding:5px 0 4px;background:var(--c);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pst.hu .calp b{display:block;font-size:33px;font-weight:900;line-height:1.05;letter-spacing:-.04em;color:#0F1A33;padding-top:3px}
.pst.hu .calp i{display:block;font-style:normal;font-size:10px;font-weight:700;color:#6B7285;padding:0 0 7px}
.pst.hu .calp::after{content:"";position:absolute;left:0;right:0;top:21px;height:6px;background:radial-gradient(circle,rgba(0,0,0,.12) 1.5px,transparent 2px) 0 0/9px 6px repeat-x}
.pst.hu .tx{position:absolute;z-index:2;right:14px;top:50%;transform:translateY(-50%);text-align:right;max-width:60%}
.pst.hu .tx b{display:block;font-size:28px;font-weight:900;line-height:.95;letter-spacing:-.045em;color:var(--c)}
.pst.hu .tx small{display:inline-flex;align-items:center;gap:5px;margin-top:9px;height:24px;padding:0 9px;border-radius:12px;background:#151229;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.pst.hu .tx small svg{width:12px;height:12px;flex:none}
.pst.hu .wm{position:absolute;z-index:1;right:-14px;top:-16px;width:58px;height:58px;color:var(--c);opacity:.1;transition:transform 1.2s cubic-bezier(.32,.72,0,1)}
.pst.hu .wm svg{width:100%;height:100%;display:block}
/* hover: a little life */
.pt6:hover .pst.off .ph{transform:rotate(-2deg) scale(1.07) translate(-5px,-5px)}
.pt6:hover .pst.off .stk{transform:rotate(-6deg) scale(1.08)}
.pt6:hover .pst.off .tx{transform:translateY(-52%) scale(1.04)}
.pt6:hover .pst.ft .arch{transform:translateY(-6px) scale(1.04)}
.pt6:hover .pst.ft .new{transform:rotate(6deg) scale(1.08)}
.pt6:hover .pst.hu .calp{transform:rotate(-2deg) translateY(-3px) scale(1.04)}
.pt6:hover .pst.hu .wm{transform:rotate(60deg)}
.pt6:hover .pst .pd{transform:translateY(-3px) rotate(-6deg)}
/* ===== season layouts (23 Oct, Josh: "they're all the same style of template"): each season gets its own three designs ===== */
.pst .bgph{position:absolute;inset:0;z-index:0}
.pst .bgph img{transition:transform 1.1s cubic-bezier(.32,.72,0,1)}
.pt6:hover .pst .bgph img{transform:scale(1.07)}
/* Christmas · offer: a gift tag hanging over your gingerbread */
.pst.l-tag{background:#4A0909}
.pst.l-tag .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(74,6,6,.78) 0%,rgba(110,10,10,.35) 52%,rgba(20,4,4,.05) 100%),linear-gradient(transparent 55%,rgba(30,4,4,.45))}
.pst.l-tag .pat{z-index:1;opacity:.75}
.pst.l-tag .gtagw{position:absolute;z-index:3;left:16px;top:-2px;width:88px;padding-top:26px;transform-origin:44px 0;transform:rotate(-5deg);filter:drop-shadow(0 14px 16px rgba(30,0,0,.45));transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.pst.l-tag .string{position:absolute;left:29px;top:0;width:30px;height:40px}
.pst.l-tag .gtag{position:relative;display:block;padding:24px 8px 11px;text-align:center;background:linear-gradient(170deg,#FFFBF1,#F4E7CF);clip-path:polygon(26% 0,74% 0,100% 15%,100% 100%,0 100%,0 15%);border-radius:0 0 7px 7px}
.pst.l-tag .hole{position:absolute;left:50%;top:8px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#7A1414;box-shadow:0 0 0 2px #E5D3B0,inset 0 1px 2px rgba(0,0,0,.4)}
.pst.l-tag .gtag b{display:block;font-size:40px;font-weight:900;line-height:.86;letter-spacing:-.06em;color:#B91C1C}
.pst.l-tag .gtag b em{font-style:normal;font-size:.5em;vertical-align:.72em;margin-left:1px;letter-spacing:-.02em}
.pst.l-tag .gtag .o{display:block;margin-top:2px;font-size:15px;font-weight:900;letter-spacing:.2em;padding-left:.2em;color:#1F6B41}
.pst.l-tag .gtag small{display:block;margin:7px 2px 0;padding-top:6px;border-top:1.5px solid rgba(185,28,28,.18);font-size:8px;font-weight:800;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:#7A1414}
.pst.l-tag .pd.a{left:auto;right:18px;top:14px;width:20px}
.pst.l-tag .pd.b{left:auto;right:48px;bottom:16px;width:13px}
.pst.l-tag .pd.c{left:auto;right:26%;top:42%;bottom:auto;width:10px}
.pt6:hover .pst.l-tag .gtagw{transform:rotate(3deg)}
/* Christmas · show off: polaroids pegged on fairy lights */
.pst.l-lights{background:radial-gradient(110% 90% at 50% 0%,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)}
.pst.l-lights .bokeh{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 14% 78%,rgba(255,214,120,.22) 0 9px,transparent 10px),radial-gradient(circle at 86% 70%,rgba(255,120,120,.18) 0 12px,transparent 13px),radial-gradient(circle at 50% 92%,rgba(255,240,200,.14) 0 16px,transparent 17px),radial-gradient(circle at 70% 46%,rgba(126,224,161,.14) 0 7px,transparent 8px);filter:blur(2px)}
.pst.l-lights .wire{position:absolute;z-index:1;left:0;top:0;width:100%;height:44px}
.pst.l-lights .bulb{position:absolute;z-index:3;width:7px;height:10px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 40% 30%,#fff 0 1.5px,var(--b) 3px);box-shadow:0 0 6px 1px var(--b),0 0 16px 4px color-mix(in srgb,var(--b) 40%,transparent);transform:rotate(-8deg)}
.pst.l-lights .bulb::before{content:"";position:absolute;left:1.5px;top:-3px;width:4px;height:4px;border-radius:1px;background:#2A1D0C}
.pt6:hover .pst.l-lights .bulb{animation:pbulb 1.2s ease-in-out var(--d) infinite}
@keyframes pbulb{50%{filter:brightness(.55);box-shadow:0 0 2px 0 var(--b)}}
.pst.l-lights .pol{position:absolute;z-index:2;top:21px;width:58px;margin-left:-29px;padding:4px 4px 13px;background:#FBF8F1;border-radius:2px;box-shadow:0 14px 20px -10px rgba(0,0,0,.6);transform-origin:50% 0;transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.pst.l-lights .pol img{height:50px}
.pst.l-lights .p1{left:25%;transform:rotate(-7deg)}
.pst.l-lights .p2{left:73%;transform:rotate(6deg)}
.pst.l-lights .peg{position:absolute;left:50%;top:-6px;width:6px;height:13px;margin-left:-3px;border-radius:1.5px;background:linear-gradient(90deg,#C9A06A,#E8C792 50%,#B88C55)}
.pst.l-lights .tx{position:absolute;z-index:2;left:0;right:0;bottom:11px;top:auto;max-width:none;transform:none;text-align:center}
.pst.l-lights .tx em{display:inline;font:italic 700 24px/1 Fraunces,Georgia,serif;color:var(--gold);text-shadow:0 0 18px rgba(255,214,140,.35)}
.pst.l-lights .tx b{display:block;margin-top:4px;font-size:9px;letter-spacing:.3em;padding-left:.3em}
.pst.l-lights .pd.d{left:10px;top:auto;bottom:14px;width:14px}
.pst.l-lights .pd.e{left:auto;right:12px;bottom:18px;width:11px}
.pt6:hover .pst.l-lights .p1{transform:rotate(-2deg)}
.pt6:hover .pst.l-lights .p2{transform:rotate(1deg)}
/* Christmas · heads-up: a festive ticket */
.pst.l-ticket{background:radial-gradient(120% 100% at 0% 0%,#E0443E 0%,#B91C1C 50%,#5C0B0B 100%)}
.pst.l-ticket .pat{opacity:.7}
.pst.l-ticket .tktw{position:absolute;z-index:2;left:14px;right:14px;top:50%;margin-top:-47px;filter:drop-shadow(0 16px 18px rgba(40,0,0,.45));transform:rotate(-3deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.pst.l-ticket .tkt{display:flex;height:94px;border-radius:10px;background:linear-gradient(165deg,#FFFBF1,#F5E8D2);-webkit-mask:radial-gradient(circle at 44px 0,transparent 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 44px 100%,transparent 7px,#000 7.5px) bottom/100% 51% no-repeat;mask:radial-gradient(circle at 44px 0,transparent 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 44px 100%,transparent 7px,#000 7.5px) bottom/100% 51% no-repeat}
.pst.l-ticket .stub{flex:none;width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1.5px solid rgba(185,28,28,.16);color:#B91C1C;text-align:center}
.pst.l-ticket .stub small{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pst.l-ticket .stub b{font-size:26px;font-weight:900;line-height:1;letter-spacing:-.04em;color:#7A1414}
.pst.l-ticket .stub i{font-style:normal;font-size:9px;font-weight:700;color:#9A6A5A}
.pst.l-ticket .main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 8px 0 10px}
.pst.l-ticket .main small{font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#1F6B41}
.pst.l-ticket .main b{margin-top:2px;font-size:19px;font-weight:900;line-height:.98;letter-spacing:-.04em;color:#B91C1C}
.pst.l-ticket .main em{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:7px;height:19px;padding:0 7px;border-radius:10px;background:#1F6B41;color:#fff;font-style:normal;font-size:9px;font-weight:700;white-space:nowrap}
.pst.l-ticket .main em svg{width:10px;height:10px;flex:none}
.pst.l-ticket .pd.h{right:4px;top:12px;width:44px;z-index:4;transform:rotate(14deg)}
.pst.l-ticket .pd.s1{left:12px;top:10px;width:13px}
.pst.l-ticket .pd.s2{left:46%;bottom:7px;width:10px}
.pt6:hover .pst.l-ticket .tktw{transform:rotate(0deg) scale(1.03)}
/* New Year · offer: a gold seal over your latte */
.pst.l-seal{background:#080D24}
.pst.l-seal .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,13,36,.82) 0%,rgba(18,26,70,.45) 55%,rgba(8,13,36,.1) 100%)}
.pst.l-seal .pat{z-index:1;opacity:.7}
.pst.l-seal .seal{position:absolute;z-index:3;left:12px;top:50%;width:98px;height:98px;margin-top:-52px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));transform:rotate(-9deg);transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.pst.l-seal .seal svg{position:absolute;inset:0;width:100%;height:100%}
.pst.l-seal .st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1E2A5A}
.pst.l-seal .st b{font-size:31px;font-weight:900;line-height:.9;letter-spacing:-.06em}
.pst.l-seal .st b em{font-style:normal;font-size:.5em;vertical-align:.7em;margin-left:1px}
.pst.l-seal .st i{margin-top:1px;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.24em;padding-left:.24em}
.pst.l-seal .lab{position:absolute;z-index:3;right:12px;bottom:11px;padding:4px 8px;border-radius:7px;background:rgba(8,13,36,.72);box-shadow:0 0 0 1px rgba(233,196,106,.5);color:#F3D98E;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pst.l-seal .pd.a{left:104px;top:12px;width:14px;transform:none}
.pst.l-seal .pd.c{left:96px;bottom:30px;width:9px}
.pt6:hover .pst.l-seal .seal{transform:rotate(8deg) scale(1.06)}
/* New Year · show off: the year cut out of your photo */
.pst.l-cut{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(90% 70% at 50% 38%,#2A2F5E 0%,#141733 60%,#07091A 100%)}
.pst.l-cut .glow2{position:absolute;z-index:0;left:50%;top:38%;width:220px;height:110px;margin:-55px 0 0 -110px;border-radius:50%;background:radial-gradient(closest-side,rgba(233,196,106,.35),transparent);filter:blur(6px)}
.pst.l-cut .pat{opacity:.55}
.pst.l-cut .cut{position:relative;z-index:2;font-size:64px;font-weight:900;line-height:.86;letter-spacing:-.06em;padding-right:.04em;color:transparent;background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(243,217,142,.85);filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));transition:background-position 1.4s cubic-bezier(.32,.72,0,1),transform .8s cubic-bezier(.32,.72,0,1)}
.pst.l-cut .tx{position:relative;z-index:2;top:auto;right:auto;max-width:none;transform:none;margin-top:9px;text-align:center}
.pst.l-cut .tx em{display:inline;font:italic 700 18px/1 Fraunces,Georgia,serif;color:var(--gold)}
.pst.l-cut .tx b{display:inline;margin:0 0 0 5px;font-size:9px;letter-spacing:.24em}
.pst.l-cut .pd.n1{left:12px;top:12px;width:22px}
.pst.l-cut .pd.n2{right:14px;bottom:16px;width:13px}
.pt6:hover .pst.l-cut .cut{background-position:30% 70%;transform:scale(1.05)}
/* New Year · heads-up: a clock at 10 */
.pst.l-clock{background:radial-gradient(120% 100% at 100% 0%,#2C3A7A 0%,#1A2350 50%,#0B1030 100%)}
.pst.l-clock .stars{position:absolute;inset:0;z-index:0;background:radial-gradient(circle,rgba(255,255,255,.7) .8px,transparent 1.3px) 0 0/34px 30px,radial-gradient(circle,rgba(255,230,168,.6) 1px,transparent 1.5px) 17px 13px/46px 40px}
.pst.l-clock .face{position:absolute;z-index:2;left:12px;top:50%;width:80px;height:80px;margin-top:-40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFDF6,#F1E8D4);box-shadow:0 0 0 4px #E9C46A,0 0 0 5px rgba(0,0,0,.2),0 18px 26px -10px rgba(0,0,0,.6),0 0 40px rgba(233,196,106,.25)}
.pst.l-clock .tick{position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:rgba(30,42,90,.4);transform-origin:1px 35px;transform:rotate(var(--r))}
.pst.l-clock .tick:nth-child(3n+1){height:9px;width:3px;margin-left:-1.5px;transform-origin:1.5px 35px;background:#1E2A5A}
.pst.l-clock .hh,.pst.l-clock .mh{position:absolute;left:50%;bottom:50%;border-radius:3px;background:#1E2A5A;transform-origin:50% 100%}
.pst.l-clock .hh{width:4px;height:20px;margin-left:-2px;transform:rotate(-60deg)}
.pst.l-clock .mh{width:3px;height:28px;margin-left:-1.5px;transition:transform 1.4s cubic-bezier(.32,.72,0,1)}
.pst.l-clock .ctr{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#E9C46A;box-shadow:0 0 0 2px #1E2A5A}
.pst.l-clock .tx{position:absolute;z-index:2;left:104px;right:8px;top:50%;max-width:none;transform:translateY(-50%);text-align:left}
.pst.l-clock .tx small{display:block;height:auto;margin:0;padding:0;background:none;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E9C46A}
.pst.l-clock .tx b{margin-top:3px;font-size:25px;color:#fff}
.pst.l-clock .tx em{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:7px;background:#E9C46A;color:#141B42;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pst.l-clock .pd.n3{left:82px;top:12px;width:15px}
.pst.l-clock .pd.n4{left:14px;bottom:10px;width:10px}
.pt6:hover .pst.l-clock .mh{transform:rotate(360deg)}
/* Easter · offer: your photo in an egg */
.pst.l-egg{background:radial-gradient(120% 110% at 0% 0%,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)}
.pst.l-egg .eggw{position:absolute;z-index:2;left:24px;top:50%;width:84px;height:110px;margin-top:-58px;filter:drop-shadow(0 16px 18px rgba(80,40,120,.35));transform:rotate(-7deg);transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.pst.l-egg .egg{display:block;width:100%;height:100%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;overflow:hidden;box-shadow:inset 0 0 0 4px #fff;border:4px solid #fff}
.pst.l-egg .sticker{position:absolute;z-index:3;right:16px;top:20px;width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#9B6BFF,#7C3AED 70%);color:#fff;box-shadow:0 0 0 3px #fff,0 14px 20px -8px rgba(80,30,160,.55);transform:rotate(10deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.pst.l-egg .sticker b{font-size:27px;font-weight:900;line-height:.9;letter-spacing:-.06em}
.pst.l-egg .sticker b em{font-style:normal;font-size:.52em;vertical-align:.68em}
.pst.l-egg .sticker i{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.22em;padding-left:.22em;margin-top:1px}
.pst.l-egg .lab{position:absolute;z-index:3;right:12px;bottom:14px;padding:4px 8px;border-radius:7px;background:#fff;color:#7C3AED;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 12px -6px rgba(80,30,160,.4)}
.pst.l-egg .pd.e1{left:10px;bottom:10px;width:16px!important;transform:rotate(-14deg)}
.pst.l-egg .pd.e2{left:12px;top:11px;width:14px!important;transform:rotate(16deg)}
.pt6:hover .pst.l-egg .eggw{transform:rotate(3deg) scale(1.04)}
.pt6:hover .pst.l-egg .sticker{transform:rotate(-6deg) scale(1.06)}
/* Easter · show off: a three-photo collage with a ribbon */
.pst.l-col{background:linear-gradient(135deg,#FFF3C4,#FBD3E2 55%,#D9CCFB)}
.pst.l-col .cg{position:absolute;inset:6px;z-index:1;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.pst.l-col .cg>span{position:relative;overflow:hidden;border-radius:11px}
.pst.l-col .c1{grid-row:1/3}
.pst.l-col .cg img{transition:transform 1.1s cubic-bezier(.32,.72,0,1)}
.pst.l-col .ribbon{position:absolute;z-index:3;left:50%;bottom:16px;width:150px;height:34px;margin-left:-75px;filter:drop-shadow(0 8px 10px rgba(80,40,120,.35));transform:rotate(-4deg);transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.pst.l-col .ribbon svg{position:absolute;inset:0;width:100%;height:100%}
.pst.l-col .ribbon em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:1px;font:italic 700 17px/1 Fraunces,Georgia,serif;color:#5B2A86;white-space:nowrap}
.pst.l-col .pd.e4{right:10px;top:9px;width:17px!important;z-index:4;transform:rotate(14deg)}
.pt6:hover .pst.l-col .cg img{transform:scale(1.07)}
.pt6:hover .pst.l-col .ribbon{transform:rotate(0) scale(1.05)}
/* Easter · heads-up: a sign hanging from a peg */
.pst.l-sign{background:linear-gradient(170deg,#FFFDF5 0%,#F3ECFF 70%,#E9E0FF 100%)}
.pst.l-sign .pat{opacity:.5;background:repeating-linear-gradient(135deg,rgba(124,58,237,.05) 0 3px,transparent 3px 14px)}
.pst.l-sign .sgw{position:absolute;z-index:2;left:50%;top:6px;width:154px;margin-left:-77px;transform-origin:50% 8px;transform:rotate(-3deg);transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.pst.l-sign .strings{display:block;width:100%;height:34px}
.pst.l-sign .peg{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FDE68A,#E2B93B);box-shadow:0 2px 4px rgba(80,40,120,.35)}
.pst.l-sign .board{display:block;margin-top:-4px;padding:10px 10px 11px;border-radius:14px;text-align:center;background:linear-gradient(170deg,#FFF6D8,#FDE8A4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 16px 22px -12px rgba(80,40,120,.45)}
.pst.l-sign .board small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9A6B12}
.pst.l-sign .board b{display:block;margin-top:3px;font-size:22px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--c)}
.pst.l-sign .board em{display:inline-flex;align-items:center;gap:4px;margin-top:7px;height:20px;padding:0 8px;border-radius:10px;background:var(--c);color:#fff;font-style:normal;font-size:10px;font-weight:700;white-space:nowrap}
.pst.l-sign .board em svg{width:11px;height:11px}
.pst.l-sign .pd.e5{left:12px;bottom:10px;width:17px!important;transform:rotate(-12deg)}
.pst.l-sign .pd.e6{right:14px;bottom:14px;width:15px!important;transform:rotate(14deg)}
.pst.l-sign .pd.e7{right:34px;bottom:8px;width:12px!important;transform:rotate(-6deg)}
.pt6:hover .pst.l-sign .sgw{transform:rotate(2deg)}