/* c-mailing_v8 (из mailing_v5): один экран как слайд. Слева экраны программы с автосменой, справа две большие цифры и ответ Sid. Uses tokens.css variables. */
.c-mailing_v8{background:var(--page);color:var(--text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;max-width:1440px;margin:0 auto;padding:clamp(18px,3.2vw,44px) var(--pad) clamp(14px,2vw,28px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}
.c-mailing_v8 *,.c-mailing_v8 *::before,.c-mailing_v8 *::after{box-sizing:border-box}
.c-mailing_v8 :where(p,h2,figure,blockquote){margin:0}
.c-mailing_v8 :focus-visible{outline:2px solid var(--heading);outline-offset:3px}

.c-mailing_v8 .mv6-head{flex:none;margin-bottom:clamp(14px,2.6vw,36px)}
.c-mailing_v8 .mv6-title{font-weight:600;font-size:clamp(26px,3.6vw,48px);line-height:1.05;letter-spacing:-.035em;color:var(--heading);max-width:20ch}

.c-mailing_v8 .mv6-grid{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-bottom:6vh}

/* showcase */
.c-mailing_v8 .mv6-show{flex:none;display:flex;flex-direction:column;min-width:0}
.c-mailing_v8 .mv6-browser{border:1px solid var(--line-2);border-radius:var(--radius-sm);overflow:hidden;background:#f5f5f7;box-shadow:0 18px 50px -24px rgba(17,18,20,.28)}
.c-mailing_v8 .mv6-bar{height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;background:var(--page);border-bottom:1px solid var(--line-2)}
.c-mailing_v8 .mv6-bar>i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.c-mailing_v8 .mv6-url{margin-left:8px;flex:1;max-width:280px;height:16px;border-radius:999px;background:var(--sunken);font:500 10px/16px var(--mono);color:var(--faint);padding:0 9px;white-space:nowrap;overflow:hidden}
.c-mailing_v8 .mv6-url b{font-weight:500;color:var(--text-2)}
.c-mailing_v8 .mv6-screens{position:relative;aspect-ratio:16/9;background:#f5f5f7;overflow:hidden}
.c-mailing_v8 .mv6-scr{position:absolute;top:0;left:-17.5%;width:117.5%;height:auto;opacity:0;transition:opacity .6s var(--ease)}
.c-mailing_v8 .mv6-scr.is-on{opacity:1}
.c-mailing_v8 .mv6-tabs{display:flex;gap:2px;margin-top:6px}
.c-mailing_v8 .mv6-tabs button{flex:1;position:relative;min-height:36px;border:0;background:none;padding:8px 2px;font:500 12px/1.2 var(--font);color:var(--text-3);cursor:pointer;text-align:left;transition:color .3s var(--ease)}
.c-mailing_v8 .mv6-tabs button[aria-selected="true"]{color:var(--heading)}
.c-mailing_v8 .mv6-tabs i{position:absolute;left:0;right:4px;top:0;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.c-mailing_v8 .mv6-tabs i::after{content:"";position:absolute;inset:0;background:var(--heading);transform:scaleX(0);transform-origin:left}
.c-mailing_v8 .mv6-tabs button[aria-selected="true"] i::after{transform:scaleX(1)}
.c-mailing_v8.is-playing .mv6-tabs button[aria-selected="true"] i::after{animation:mv6-prog var(--mv6-dur,4.5s) linear both}
.c-mailing_v8.is-paused .mv6-tabs button[aria-selected="true"] i::after{animation-play-state:paused}
@keyframes mv6-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c-mailing_v8 .mv6-tl{display:none}

/* side: two big numbers + reply card */
.c-mailing_v8 .mv6-side{flex:none;display:flex;flex-direction:column;gap:16px;min-width:0}
.c-mailing_v8 .mv6-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-mailing_v8 .mv6-stat{display:flex;flex-direction:column;gap:4px}
.c-mailing_v8 .mv6-stat b{font-weight:600;font-size:clamp(40px,11vw,96px);line-height:.95;letter-spacing:-.05em;color:var(--heading);white-space:nowrap;font-variant-numeric:tabular-nums}
.c-mailing_v8 .mv6-stat span{font-size:13px;line-height:1.3;color:var(--text-3)}
.c-mailing_v8 .mv6-quote{padding:12px 14px;border-radius:var(--radius-sm);background:var(--sunken)}
.c-mailing_v8 .mv6-quote p{font-size:14px;line-height:1.4;color:var(--heading);letter-spacing:-.01em}
.c-mailing_v8 .mv6-quote figcaption{margin-top:10px;display:flex;align-items:center;gap:10px}
.c-mailing_v8 .mv6-av{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--heading);color:var(--page);display:inline-flex;align-items:center;justify-content:center;font:600 14px/1 var(--font)}
.c-mailing_v8 .mv6-who{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.3;color:var(--text-3)}
.c-mailing_v8 .mv6-who b{font-size:13.5px;color:var(--heading);font-weight:600}

/* reveal */
.c-mailing_v8.is-anim .mv6-stat,.c-mailing_v8.is-anim .mv6-quote{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.c-mailing_v8.is-anim .mv6-stat+.mv6-stat{transition-delay:.12s}
.c-mailing_v8.is-anim .mv6-quote{transition-delay:.25s}
.c-mailing_v8.is-anim.is-in .mv6-stat,.c-mailing_v8.is-anim.is-in .mv6-quote{opacity:1;transform:none}

/* desktop: two columns */
@media (min-width:900px){
  .c-mailing_v8 .mv6-tl{display:inline}.c-mailing_v8 .mv6-ts{display:none}
  .c-mailing_v8 .mv6-grid{padding-bottom:0;flex-direction:row;gap:clamp(32px,4vw,72px);align-items:center}
  .c-mailing_v8 .mv6-show{flex:1.6 1 0}
  .c-mailing_v8 .mv6-side{flex:1 1 0;max-width:420px;gap:clamp(22px,3.4vh,40px)}
  .c-mailing_v8 .mv6-nums{grid-template-columns:1fr;gap:clamp(18px,3vh,32px)}
  .c-mailing_v8 .mv6-stat b{font-size:clamp(56px,6.2vw,104px)}
  .c-mailing_v8 .mv6-stat span{font-size:16px}
  .c-mailing_v8 .mv6-bar{height:32px;gap:6px;padding:0 14px}
  .c-mailing_v8 .mv6-bar>i{width:10px;height:10px}
  .c-mailing_v8 .mv6-url{height:20px;font-size:11.5px;line-height:20px;margin-left:12px}
  .c-mailing_v8 .mv6-tabs{margin-top:10px}
  .c-mailing_v8 .mv6-tabs button{font-size:14px;padding:10px 2px 6px}
  .c-mailing_v8 .mv6-screens{aspect-ratio:16/10}
  .c-mailing_v8 .mv6-scr{left:0;width:100%}
  .c-mailing_v8 .mv6-quote{padding:16px 18px}
  .c-mailing_v8 .mv6-quote p{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .c-mailing_v8 .mv6-scr,.c-mailing_v8 .mv6-stat,.c-mailing_v8 .mv6-quote{transition:none}
  .c-mailing_v8 .mv6-tabs i::after{animation:none!important}
}