/* Email & SMS visuals. Everything prefixed .v-es- */

/* ---------- Hero: email card + phone text thread ---------- */
.v-es-hero { width: 100%; max-width: 440px; justify-self: end; container-type: inline-size; }
.v-es-stage { position: relative; width: 100%; aspect-ratio: 42 / 47; font-size: calc(100cqw / 42); }

.v-es-av { flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--volt); color: var(--ink); font: 800 1.1em/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.v-es-av-sm { width: 2.6em; height: 2.6em; font-size: .95em; }

/* Email card */
.v-es-mail { position: absolute; left: 0; top: 2.4em; width: 23.5em; background: var(--bone); color: var(--ink); border-radius: .6em; box-shadow: 0 1.6em 3.2em -1.2em rgba(0,0,0,.7); overflow: hidden; transform: rotate(-3deg); transform-origin: 70% 30%; }
.v-es-mail-bar { display: flex; align-items: center; gap: .45em; padding: .8em 1.2em; background: #dcdbd2; border-bottom: 1px solid #cfcec4; }
.v-es-mail-bar i { width: .7em; height: .7em; border-radius: 50%; background: #b9b8ae; }
.v-es-mail-bar span { margin-left: .6em; font: 500 .95em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5d5c55; }
.v-es-mail-head { display: flex; align-items: center; gap: .9em; padding: 1.3em 1.4em .4em; }
.v-es-mail-head div { display: grid; gap: .15em; min-width: 0; }
.v-es-mail-head b { font: 700 1.3em/1.1 var(--body); }
.v-es-mail-head small { font-size: 1.05em; color: #6b6a62; }
.v-es-mail-head em { margin-left: auto; align-self: start; font: 500 .95em/1 var(--mono); font-style: normal; color: #6b6a62; }
.v-es-subj { margin: .7em 1.4em 1em; max-width: 13em; font: 700 1.45em/1.2 var(--body); letter-spacing: -.01em; }
.v-es-mail-body { display: grid; gap: .8em; justify-items: start; margin: 0 1.4em 1.6em; padding: 1.2em; background: #fff; border-radius: .4em; border: 1px solid #dcdbd2; }
.v-es-hero-img { width: 100%; height: 6.4em; border-radius: .3em; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.v-es-hero-img svg { width: 40%; height: auto; fill: var(--volt); opacity: .9; }
.v-es-mail-body strong { font: 800 1.5em/1.1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.v-es-line { display: block; width: 100%; height: .6em; border-radius: .3em; background: #e3e2da; }
.v-es-short { width: 70%; }
.v-es-btn { margin-top: .3em; padding: .75em 1.2em; background: var(--volt); color: var(--ink); font: 700 1.05em/1 var(--body); border-radius: .3em; }

/* Phone */
.v-es-phone { position: absolute; right: 0; top: 6.4em; z-index: 2; width: 20.5em; padding: .8em; background: var(--slate-2); border: 1px solid #3a3a40; border-radius: 3em; box-shadow: 0 2em 4em -1.4em rgba(0,0,0,.85); transform: rotate(3deg); }
.v-es-screen { position: relative; height: 38.5em; overflow: hidden; background: var(--ink-2); border-radius: 2.3em; }
.v-es-notch { position: absolute; top: .8em; left: 50%; width: 6.5em; height: 1.7em; transform: translateX(-50%); background: var(--slate-2); border-radius: 1em; }
.v-es-thread-head { display: grid; justify-items: center; gap: .4em; padding: 3.4em 1em 1em; border-bottom: 1px solid var(--line); }
.v-es-thread-head b { font: 600 1.1em/1 var(--body); color: var(--bone); }
.v-es-thread { display: flex; flex-direction: column; gap: .6em; padding: 1em 1.1em; }
.v-es-day { align-self: center; margin: .4em 0 .1em; font: 500 .85em/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.v-es-thread p { margin: 0; max-width: 84%; padding: .7em .95em; font: 400 1.12em/1.35 var(--body); border-radius: 1.2em; }
.v-es-in { align-self: flex-start; background: var(--slate-2); color: var(--bone); border-bottom-left-radius: .3em !important; }
.v-es-out { align-self: flex-end; background: var(--volt); color: var(--ink); font-weight: 600 !important; border-bottom-right-radius: .3em !important; }

/* Channel tags */
.v-es-tag { position: absolute; z-index: 3; padding: .55em .85em; font: 500 .95em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--volt); border: 1px solid var(--volt); }
.v-es-tag-mail { left: 1.2em; top: 0; }
.v-es-tag-sms { right: -.4em; bottom: 1.6em; }

@media (max-width: 860px) { .v-es-hero { justify-self: start; max-width: 400px; } }
@media (max-width: 600px) { .v-es-hero { max-width: 360px; justify-self: center; margin-top: 8px; } }

/* ---------- Automated sequence timeline ---------- */
.v-es-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.v-es-step { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.v-es-when { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 18px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--volt); }
/* rail + dot */
.v-es-when::before { content: ""; position: absolute; left: 0; right: -14px; bottom: 0; height: 2px; background: var(--line); }
.v-es-when::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 10px; height: 10px; background: var(--volt); }
.v-es-end .v-es-when::before { right: 0; }
.v-es-card { padding: 18px 18px 20px; background: var(--ink-2); border: 1px solid var(--line); display: grid; align-content: start; gap: 10px; }
.v-es-kind { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--display); font-stretch: 125%; letter-spacing: -.01em; color: var(--bone); }
.v-es-kind svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--volt); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.v-es-card p { margin: 0; font-size: 15px; line-height: 1.45; color: #bdbcb3; }
.v-es-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-es-chips span { padding: 6px 9px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--line); background: var(--slate); }
.v-es-trigger .v-es-card { background: var(--slate); }
.v-es-trigger .v-es-kind { color: var(--mute); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.v-es-end .v-es-card { border-color: var(--volt); }
.v-es-end .v-es-kind svg { stroke-width: 2; }

@media (max-width: 960px) {
  .v-es-flow { grid-template-columns: 1fr; gap: 0; max-width: 520px; padding-left: 28px; }
  .v-es-flow::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 30px; width: 2px; background: var(--line); }
  .v-es-step { gap: 10px; padding-bottom: 22px; }
  .v-es-when { padding-bottom: 0; }
  .v-es-when::before { display: none; }
  .v-es-when::after { left: -28px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .v-es-end { padding-bottom: 0; }
}