/* Channel cards: real content inside the mocks */
.mock--meta{position:relative;display:grid;gap:18px;padding:22px 0 16px}
.split__head{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--muted-d);margin-bottom:8px}
.split__head span:first-child{color:var(--paper);font-weight:650}
.split__bar{display:flex;gap:3px;height:12px}
.split__bar i{display:block;width:33.3%;border-radius:99px;transition:width 1.4s var(--ease) .3s}
.in-view .split__bar i{width:var(--s)}
.split__a{background:#fafbf73d}
.split__b{background:var(--lime)}
.split__c{background:#8fa25a}
.split__keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:.74rem;color:var(--muted-d)}
.split__keys i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ad{display:grid;gap:8px;align-content:start;background:var(--ink-2);border:1px solid var(--line-d);border-radius:16px;padding:9px;font-size:.72rem;color:var(--muted-d);transition:opacity .5s,transform .5s var(--ease)}
.ad--b{border-color:var(--lime)}
.in-view .ad--a{animation:dim 6s 1.2s infinite}
.in-view .ad--b{animation:lift 6s 1.2s infinite}
.ad__top{display:flex;align-items:center;gap:7px;line-height:1.15;min-width:0}
.ad__top b{display:block;color:var(--paper);font-weight:650}
.ad__top small{font-size:.64rem}
.ad__logo{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--paper);color:var(--ink);font-style:normal;font-weight:800;font-size:.6rem}
.ad__art{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;display:grid;place-items:center;align-content:center;text-align:center}
.ad__art--sale{background:repeating-linear-gradient(135deg,#2f3829 0 14px,#283023 14px 28px);color:var(--paper);gap:4px}
.ad__art--sale b{font-stretch:62%;font-weight:880;font-size:clamp(2rem,3.6vw,3.3rem);line-height:.85;color:var(--sage)}
.ad__art--sale span{font-stretch:75%;font-weight:760;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.ad__art--sale small{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.ad__art--hero{background:radial-gradient(70% 70% at 62% 52%,#ecffb4,var(--lime) 55%,#9cc23c);color:var(--ink)}
.ad__art--hero svg{width:30%;height:52%;margin-left:28%;filter:drop-shadow(0 10px 12px rgba(23,26,22,.3))}
.ad__art--hero b{position:absolute;left:9px;top:8px;font-stretch:62%;font-weight:880;font-size:clamp(1.3rem,2.3vw,2rem);line-height:.86;text-align:left}
.ad__art--hero small{position:absolute;left:9px;right:9px;bottom:8px;font-size:.6rem;font-weight:700;text-align:left;line-height:1.2}
.ad__art--ugc{background:radial-gradient(60% 50% at 50% 38%,#6d7f45,#2f3a23 60%,#1b2016)}
.ad__time{position:absolute;right:7px;top:7px;font-size:.58rem;font-weight:700;background:rgba(0,0,0,.5);color:#fff;padding:2px 6px;border-radius:99px}
.ad__play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(250,251,247,.92);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.ad__play svg{width:14px;height:14px;margin-left:3px;color:var(--ink)}
.ad__subs{position:absolute;left:8px;right:8px;bottom:8px;font-size:.6rem;font-weight:650;line-height:1.5;color:#fff;text-align:left}
.ad__subs span{background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ad__cta{display:flex;justify-content:space-between;align-items:center;gap:6px;background:rgba(250,251,247,.06);border-radius:8px;padding:6px 7px;font-size:.66rem;color:var(--paper)}
.ad__cta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad__cta em{flex:none;font-style:normal;font-weight:700;background:rgba(250,251,247,.16);padding:3px 7px;border-radius:6px}
.ad--b .ad__cta em{background:var(--lime);color:var(--ink)}
.ad__stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:2px}
.ad__stats div{display:grid}
.ad__stats dt{font-size:.6rem}
.ad__stats dd{color:var(--paper);font-stretch:80%;font-weight:760;font-size:1rem}
.ad--a .ad__stats dd{color:var(--muted-d)}
.ad--b .ad__stats dd{color:var(--lime)}
.ad .chip{font-size:.64rem}

.mock--tt{display:flex;justify-content:center;padding-top:10px}
.tt{width:min(196px,70%);aspect-ratio:9 / 17.5;border-radius:28px;padding:7px;background:#2b3127;border:1px solid var(--line-d);transform:rotate(-4deg);box-shadow:0 30px 50px rgba(0,0,0,.4)}
.tt__screen{position:relative;height:100%;border-radius:22px;overflow:hidden;color:#fff;background:radial-gradient(70% 42% at 50% 36%,#62773a,#2a331f 62%,#141813)}
.tt__tabs{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:center;gap:10px;font-size:.6rem;color:rgba(255,255,255,.65)}
.tt__tabs b{color:#fff;border-bottom:2px solid #fff;padding-bottom:2px}
.tt__prod{position:absolute;left:50%;top:15%;width:30%;height:30%;translate:-50% 0;color:var(--lime);filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.tt__hook{position:absolute;left:10px;right:36px;top:49%;font-stretch:75%;font-weight:800;font-size:.84rem;line-height:1.45}
.tt__hook span{background:#fff;color:#111;padding:2px 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:opacity .35s}
.tt__rail{position:absolute;right:6px;bottom:64px;display:grid;gap:10px;justify-items:center;font-size:.54rem;font-weight:700}
.tt__rail li{display:grid;justify-items:center;gap:1px}
.tt__rail svg{width:20px;height:20px;color:#fff}
.tt__av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);border:2px solid #fff;color:var(--ink);font-style:normal;font-size:.56rem;font-weight:800}
.tt__meta{position:absolute;left:10px;right:40px;bottom:14px;display:grid;gap:3px;font-size:.58rem;line-height:1.3}
.tt__shop{display:inline-flex;align-items:center;gap:4px;justify-self:start;background:rgba(250,251,247,.18);padding:3px 6px;border-radius:5px;font-weight:650;white-space:nowrap}
.tt__shop svg{width:10px;height:10px;color:#fff}
.tt__shop b{color:var(--lime)}
.tt__user{font-weight:800;font-size:.64rem}
.tt__sound{display:flex;align-items:center;gap:4px;opacity:.85}
.tt__sound svg{width:9px;height:9px;color:#fff}
.tt__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25)}
.tt__bar i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.in-view .tt__bar i{animation:prog 3.2s linear infinite}

.mock--snap{display:flex;justify-content:center;gap:4%;padding:14px 0 6px}
.snap{position:relative;width:48%;max-width:180px;aspect-ratio:9 / 16;border:2px solid var(--ink);border-radius:18px;overflow:hidden;padding:9px;display:flex;flex-direction:column;gap:7px;font-size:.6rem;line-height:1.2}
.snap--1{background:radial-gradient(80% 50% at 50% 55%,#33402a,var(--ink) 70%);color:var(--paper);transform:rotate(-3deg)}
.snap--2{background:var(--paper);color:var(--ink);transform:rotate(3deg);margin-top:16px}
.in-view .snap--1{animation:bob 4s ease-in-out infinite}
.in-view .snap--2{animation:bob 4s 2s ease-in-out infinite}
.snap__prog{display:flex;gap:3px}
.snap__prog i{flex:1;height:2px;border-radius:2px;background:currentColor;opacity:.25}
.snap__prog i.on{opacity:1}
.snap__who{display:flex;align-items:center;gap:5px}
.snap__who i{width:16px;height:16px;border-radius:50%;background:var(--lime);border:1.5px solid currentColor}
.snap__who b{font-weight:750}
.snap__who small{opacity:.6}
.snap__drop,.snap__clock{margin:auto 0;display:grid;gap:4px}
.snap__drop small,.snap__clock small{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.snap__drop b{font-stretch:62%;font-weight:880;font-size:4.2rem;line-height:.78;color:var(--lime)}
.snap__clock b{font-stretch:72%;font-weight:860;font-size:1.3rem;line-height:1;font-variant-numeric:tabular-nums}
.snap__big{font-stretch:66%;font-weight:860;font-size:1.4rem;line-height:.92;margin-top:6px}
.snap__cta{text-align:center;background:var(--lime);color:var(--ink);font-weight:800;font-size:.64rem;border-radius:99px;padding:7px 4px}
.snap--2 .snap__cta{background:var(--ink);color:var(--lime)}
@property --sec{syntax:"<integer>";initial-value:59;inherits:false}
.snap__tick{--sec:59;counter-reset:sec var(--sec);animation:tick 60s steps(60,end) infinite}
.snap__tick:after{content:counter(sec,decimal-leading-zero)}
@keyframes tick{from{--sec:59}to{--sec:0}}

.mock--shop{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:end;padding-bottom:16px}
.cro__cap{font-size:.78rem;color:var(--muted);margin-bottom:10px}
.cro ol{display:grid;gap:8px}
.cro__big{margin-top:18px;max-width:34ch;font-size:.92rem;line-height:1.35;color:var(--muted)}
.cro__big b{display:block;font-stretch:66%;font-weight:860;font-size:clamp(2rem,3vw,2.6rem);line-height:1;color:var(--ink)}
.cro li{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:12px;font-size:.82rem;font-weight:650}
.cro i{position:relative;height:28px;border-radius:8px;background:var(--sage);overflow:hidden}
.cro i:before{content:"";position:absolute;inset:0;width:var(--w);background:var(--ink);border-radius:8px;transform-origin:left;transform:scaleX(.03);transition:transform 1.1s var(--ease)}
.in-view .cro i:before{transform:none}
.cro li:nth-child(2) i:before{transition-delay:.1s}
.cro li:nth-child(3) i:before{transition-delay:.2s}
.cro li:nth-child(4) i:before{transition-delay:.3s}
.cro li:nth-child(5) i:before{transition-delay:.4s}
.cro .is-end i:before{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pdp{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:start;background:#fff;border:1.5px solid var(--ink);border-radius:20px;padding:12px;box-shadow:0 18px 40px rgba(23,26,22,.1)}
.pdp__img{position:relative;aspect-ratio:4 / 5;border-radius:12px;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 45%,#ecffb4,var(--lime) 60%,#9cc23c)}
.pdp__img svg{width:40%;height:55%;color:var(--ink)}
.pdp__tag{position:absolute;left:6px;bottom:6px;font-size:.58rem;font-weight:750;background:var(--ink);color:var(--lime);padding:2px 7px;border-radius:99px}
.pdp__body{display:grid;gap:6px;font-size:.74rem}
.pdp__name{font-weight:750;font-size:.88rem;line-height:1.2}
.pdp__price{font-stretch:75%;font-weight:840;font-size:1.35rem;line-height:1}
.pdp__pay{justify-self:start;background:var(--sage);border-radius:7px;padding:4px 8px;font-weight:650;font-size:.68rem}
.pdp__btn{background:var(--ink);color:var(--paper);text-align:center;border-radius:99px;padding:8px;font-weight:750}
.pdp__ship{font-size:.64rem;color:var(--muted)}
.pdp__notes{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px}
.pdp__notes span{font-size:.64rem;font-weight:700;border:1px solid var(--ink);border-radius:99px;padding:2px 8px}
.pdp__notes span:before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--ink);vertical-align:1px}

.mock--wa{width:100%;max-width:460px;border:1px solid var(--line-d);border-radius:18px;overflow:hidden;background:#20261d;margin-top:auto}
.wa__head{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--ink);font-size:.8rem;line-height:1.15}
.wa__head i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--ink);font-style:normal;font-weight:800;font-size:.66rem}
.wa__head b{display:block;font-weight:700}
.wa__head small{font-size:.68rem;color:var(--muted-d)}
.wa__body{display:grid;gap:8px;padding:12px}
.wa__body .bubble{max-width:90%}
.bubble time{float:right;display:inline-flex;align-items:center;gap:3px;margin:7px 0 -3px 10px;font-size:.6rem;line-height:1;opacity:.55}
.bubble time svg{width:14px;height:10px;color:#3a7bd5}
.wa__day{justify-self:center;font-size:.64rem;color:var(--muted-d);background:rgba(250,251,247,.08);padding:3px 10px;border-radius:99px}
.wa__card{display:grid;grid-template-columns:52px 1fr;gap:6px 10px;align-items:center}
.wa__img{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:radial-gradient(70% 60% at 50% 45%,#ecffb4,var(--lime) 60%,#9cc23c)}
.wa__img svg{width:42%;height:62%;color:var(--ink)}
.wa__card p{font-size:.8rem;line-height:1.3}
.wa__btn{grid-column:1 / -1;text-align:center;font-weight:750;font-size:.8rem;color:#1f7a4d;border-top:1px solid var(--line);padding-top:7px}

@media (min-width: 901px){.card--shop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(24px,3.4vw,56px);row-gap:14px}
.card--shop .card__top{grid-column:1 / -1}
.card--shop .card__title,.card--shop .card__copy{grid-column:1}
.card--shop .mock--shop{display:contents}
.card--shop .cro{grid-column:1;align-self:end;margin-top:14px;padding-bottom:6px}
.card--shop .pdp{grid-column:2;grid-row:2 / span 3;align-self:center;justify-self:center;width:100%;max-width:330px;grid-template-columns:1fr}
.card--shop .pdp__img{aspect-ratio:16 / 10}
.card--shop .mock__tag{right:clamp(22px,2.4vw,32px);bottom:10px}
}
@media (max-width: 900px){.mock--shop{grid-template-columns:1fr}
.pdp{max-width:380px}
}
@media (max-width: 760px){.board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.board::-webkit-scrollbar{display:none}
.ad{scroll-snap-align:start}
.ad__art--sale b{font-size:2.6rem}
.ad__art--hero b{font-size:1.7rem}
.cro li{grid-template-columns:92px 1fr}
}