/* Velonify service visuals: animated sample UIs in the service page heroes.
   Markup is generated per page; behaviour lives in /assets/js/visuals.js. */

/* Hero layout with a visual on the right */
.hero-vz { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 64px; align-items: center; }
.hero-vz > .hero-copy { max-width: none !important; }
.is-desktop .hero-vz h1 { font-size: clamp(40px, 3.9vw, 58px) !important; }
.is-desktop .hero-vz .hero-copy > p { font-size: 19px !important; }
.is-mobile .hero-vz { display: flex; flex-direction: column; align-items: stretch; gap: 44px; }

/* Window chrome */
.vz { container-type: inline-size; position: relative; color: #FFFFFF; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: vzIn .9s cubic-bezier(.16,1,.3,1) .35s both; }
@keyframes vzIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.vz-bar { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.vz-dots { display: flex; gap: 6px; } .vz-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.vz-url { flex: 1; min-width: 0; max-width: 260px; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255,255,255,0.07); font-size: 12.5px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; }
.vz-note { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.vz-body { position: relative; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.vz p, .vz ul { margin: 0; }
.vz ul { list-style: none; padding: 0; }
.vz b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vz-h { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C5D8E6; }
.vz-sub { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); margin-bottom: 8px !important; }
.vz-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.vz-in { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s cubic-bezier(.16,1,.3,1); }
.vz.on .vz-in { opacity: 1; transform: none; transition-delay: calc(.5s + var(--i, 0) * 110ms); }

.vz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vz-tile { border: 1px solid rgba(255,255,255,0.14); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vz-tile > span { font-size: 11.5px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-tile strong { font-family: 'Krona One', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.1; color: #C5D8E6; white-space: nowrap; }
.vz-tile strong b { font-weight: 400; }

/* Live feed: newest row on top */
.vz-feed { --row: 27px; position: relative; height: calc(var(--row) * var(--rows, 4)); overflow: hidden; }
.vz-feed li { height: var(--row); display: grid; align-items: center; gap: 10px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.vz-feed li > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-feed .vz-new { animation: vzRow .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes vzRow { from { opacity: 0; transform: translateY(-10px); background: rgba(197,216,230,0.16); } 40% { background: rgba(197,216,230,0.16); } to { opacity: 1; transform: none; background: transparent; } }

/* Pause loops while off screen */
.vz-idle *, .vz-idle *::before, .vz-idle *::after { animation-play-state: paused !important; }

/* ---------- Migration ---------- */
.vm-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.vm-sys { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.vm-to { background: #C5D8E6; border-color: #C5D8E6; color: #2C0E18; }
.vm-pipe { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0 6px, transparent 6px 12px); }
.vm-pipe i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; background: #C5D8E6; opacity: 0; }
.vz.on .vm-pipe i { animation: vmPacket 1.8s linear infinite; animation-delay: calc(var(--i) * -0.6s); }
@keyframes vmPacket { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.vm-feed li { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
.vm-feed em { font-style: normal; color: #90D5FF; }
.vm-feed s { text-decoration: none; color: rgba(255,255,255,0.5); }
.vm-feed span { color: #C5D8E6; }
.vm-plot { position: relative; height: 92px; }
.vm-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vm-plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vm-grid { stroke: rgba(255,255,255,0.08); stroke-dasharray: 3 4; }
.vm-with { stroke: #C5D8E6; stroke-width: 2.5; }
.vm-without { stroke: rgba(255,255,255,0.35); stroke-width: 1.5; stroke-dasharray: 4 4; }
.vm-draw { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(.65,0,.35,1); }
.vz.on .vm-draw { clip-path: inset(0 0 0 0); transition-delay: 1.3s; }
.vm-live { position: absolute; top: -6px; bottom: 0; left: 55%; border-left: 1.5px dashed rgba(255,255,255,0.45); }
.vm-live span { position: absolute; top: -12px; left: 0; transform: translateX(-50%); padding: 2px 7px; background: #C5D8E6; color: #2C0E18; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.vm-legend { display: flex; gap: 16px; margin-top: 10px !important; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.vm-legend i { display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; }
.vm-legend .l1 { border-top: 2.5px solid #C5D8E6; } .vm-legend .l2 { border-top: 1.5px dashed rgba(255,255,255,0.5); }

/* ---------- Tracking ---------- */
.vt-map { position: relative; height: 176px; }
.vt-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt-lines path { fill: none; stroke: rgba(197,216,230,0.35); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.vt-node { position: absolute; transform: translateY(-50%); box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.22); background: #2C0E18; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.vt-node small { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.55); }
.vt-shop { left: 0; top: 50%; width: 22%; }
.vt-hub { left: 40%; top: 50%; width: 20%; border-color: #C5D8E6; background: #C5D8E6; color: #2C0E18; }
.vt-hub small { color: rgba(44,14,24,0.65); }
.vt-dst { left: 78%; width: 22%; }
.vt-dst::after { content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #90D5FF; opacity: 0; transition: opacity .3s; }
.vz.on .vt-dst::after { opacity: 1; transition-delay: calc(1.4s + var(--k) * .2s); }
.vt-pk { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #C5D8E6; box-shadow: 0 0 10px #C5D8E6; opacity: 0; }
.vz.on .vt-pk { animation: vtPk 1.6s linear infinite; animation-delay: var(--d); }
@keyframes vtPk { 0% { left: var(--x1); top: var(--y1); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: var(--x2); top: var(--y2); opacity: 0; } }
.vt-cmp { display: flex; flex-direction: column; gap: 9px; }
.vt-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.vt-row > span { color: rgba(255,255,255,0.7); white-space: nowrap; }
.vt-row b { text-align: right; }
.vt-bar { position: relative; height: 8px; background: rgba(255,255,255,0.08); }
.vt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.35); transition: width 1.4s cubic-bezier(.33,1,.68,1); }
.vt-row.hi .vt-bar i { background: #C5D8E6; }
.vz.on .vt-bar i { width: var(--w); transition-delay: calc(.9s + var(--k) * .2s); }
.vt-feed li { grid-template-columns: 118px 64px minmax(0, 1fr); }
.vt-feed .ev { color: #C5D8E6; }
.vt-feed .ok { color: #90D5FF; text-align: right; }

/* ---------- Performance marketing ---------- */
.vp-list { display: flex; flex-direction: column; gap: 10px; }
.vp-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px 92px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; font-size: 12.5px; }
.vp-ch { grid-row: 1 / span 2; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid rgba(255,255,255,0.3); }
.vp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.vp-list b { text-align: right; }
.vp-tag { justify-self: end; padding: 3px 7px; font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.vp-up { background: #C5D8E6; border-color: #C5D8E6; color: #2C0E18; }
.vp-down { color: rgba(255,255,255,0.45); border-style: dashed; }
.vz.on .vp-tag { opacity: 1; transform: none; transition-delay: calc(2.4s + var(--k) * .15s); }
.vp-bud { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 11px; color: rgba(255,255,255,0.55); }
.vp-bud span { position: relative; height: 5px; background: rgba(255,255,255,0.08); }
.vp-bud span i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--b); background: rgba(197,216,230,0.7); transition: width 1.3s cubic-bezier(.65,0,.35,1); }
.vz.on .vp-bud span i { width: var(--a); transition-delay: calc(1.3s + var(--k) * .1s); }
.vp-bud em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.vp-chart { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; height: 76px; }
.vp-chart li { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.vp-chart i { flex: 1; height: var(--h); background: #C5D8E6; transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.vp-chart i.s { background: rgba(255,255,255,0.25); }
.vz.on .vp-chart i { transform: none; transition-delay: calc(.8s + var(--k) * 70ms); }
.vp-legend { display: flex; gap: 16px; margin-top: 8px !important; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.vp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: #C5D8E6; }
.vp-legend i.s { background: rgba(255,255,255,0.25); }

/* ---------- E-mail flows ---------- */
.ve-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ve-flow { display: flex; flex-direction: column; align-items: center; }
.ve-node { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.22); background: #2C0E18; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ve-node small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.ve-node.t { border-color: #C5D8E6; background: #C5D8E6; color: #2C0E18; } .ve-node.t small { color: rgba(44,14,24,0.6); }
.ve-node.q { width: auto; padding: 6px 14px; border-radius: 999px; }
.ve-node.end { color: rgba(255,255,255,0.55); border-style: dashed; }
.ve-node em { float: right; font-style: normal; font-size: 11px; color: #90D5FF; }
.ve-link { width: 2px; height: 16px; background: repeating-linear-gradient(180deg, rgba(197,216,230,0.8) 0 4px, transparent 4px 8px); background-size: 2px 8px; }
.vz.on .ve-link { animation: veFlow .8s linear infinite; }
@keyframes veFlow { to { background-position: 0 8px; } }
.ve-fork { box-sizing: border-box; width: 50%; height: 14px; border: 2px dashed rgba(197,216,230,0.6); border-bottom: 0; }
.ve-branches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
.ve-branch { display: flex; flex-direction: column; align-items: center; }
.ve-branch > span { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.55); margin: 4px 0; }
.ve-flow > *, .ve-branch > * { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s cubic-bezier(.16,1,.3,1); }
.vz.on .ve-flow > *, .vz.on .ve-branch > * { opacity: 1; transform: none; transition-delay: calc(.6s + var(--s) * 120ms); }
.ve-side { display: flex; flex-direction: column; gap: 8px; }
.ve-side .vz-tiles { grid-template-columns: minmax(0, 1fr); }
.ve-feed { --row: 30px; }
.ve-feed li { grid-template-columns: 8px minmax(0, 1fr); font-size: 11.5px; }
.ve-feed li i { width: 6px; height: 6px; border-radius: 50%; background: #90D5FF; }

/* ---------- Conversion optimisation ---------- */
.vc-tabs { display: flex; gap: 8px; }
.vc-tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.22); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.7); transition: border-color .25s, background-color .25s, color .25s; }
.vc-tab:hover { border-color: #C5D8E6; color: #FFFFFF; }
.vc-tab:focus-visible { outline: 2px solid #C5D8E6; outline-offset: 3px; }
.vc-tab b { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; font-size: 11px; }
.vc-tab.on { border-color: #C5D8E6; background: rgba(197,216,230,0.14); color: #FFFFFF; }
.vc-tab.on b { background: #C5D8E6; border-color: #C5D8E6; color: #2C0E18; }
.vc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vc-page { position: relative; background: #FBF8F9; color: #2C0E18; padding: 10px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 10px; }
.vc-page::before { content: ""; grid-column: 1 / -1; height: 6px; background: linear-gradient(90deg, #2C0E18 0 18%, transparent 18% 70%, rgba(44,14,24,0.2) 70% 100%); }
.vc-img { position: relative; aspect-ratio: 3 / 4; background: #C5D8E6; display: grid; place-items: center; }
.vc-img svg { width: 56%; height: auto; color: #45142D; }
.vc-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vc-l { height: 6px; background: rgba(44,14,24,0.14); }
.vc-title { height: 9px; width: 85%; background: #2C0E18; }
.vc-stars { display: flex; gap: 2px; font-size: 10px; color: #45142D; letter-spacing: 1px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .4s; }
.vc-price { font-size: 13px; font-weight: 800; }
.vc-ship { font-size: 9.5px; font-weight: 700; padding: 3px 5px; background: rgba(69,20,45,0.1); color: #45142D; max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height .5s, opacity .4s, padding .5s; }
.vc-desc { display: flex; flex-direction: column; gap: 5px; max-height: 60px; overflow: hidden; transition: max-height .6s cubic-bezier(.65,0,.35,1); }
.vc-cta { height: 22px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(44,14,24,0.25); color: #FFFFFF; transition: background-color .4s; }
.vc-trust { display: flex; gap: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .4s; }
.vc-trust i { flex: 1; height: 5px; background: rgba(44,14,24,0.18); }
.vc-heat { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,80,60,0.55), rgba(255,170,60,0.3) 45%, transparent 70%); animation: vcHeat 2.4s ease-in-out infinite alternate; transition: opacity .5s; }
@keyframes vcHeat { from { transform: scale(.9); } to { transform: scale(1.1); } }
.vc-pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; display: grid; place-items: center; border-radius: 50%; background: #45142D; color: #FFFFFF; font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 3px rgba(197,216,230,0.9); transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.vz.on .vc-pin { transform: scale(1); transition-delay: calc(1.1s + var(--k) * .3s); }
/* variant B */
.vc-b .vc-stars { max-height: 14px; opacity: 1; }
.vc-b .vc-ship { max-height: 20px; opacity: 1; padding-top: 3px; padding-bottom: 3px; }
.vc-b .vc-desc { max-height: 11px; }
.vc-b .vc-cta { background: #45142D; }
.vc-b .vc-trust { max-height: 5px; opacity: 1; }
.vc-b .vc-heat { opacity: 0; }
.vz.on.vc-b .vc-pin { transform: scale(0); transition-delay: 0s; }
.vc-notes { display: grid; }
.vc-notes > div { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; transition: opacity .4s, visibility 0s; }
.vc-notes .nb { opacity: 0; visibility: hidden; }
.vc-b .vc-notes .na { opacity: 0; visibility: hidden; }
.vc-b .vc-notes .nb { opacity: 1; visibility: visible; }
.vc-find { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.85); }
.vc-find b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #45142D; box-shadow: 0 0 0 2px rgba(197,216,230,0.9); font-size: 10.5px; }
.vc-res { border: 1px solid rgba(197,216,230,0.45); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.vc-res span { font-size: 11.5px; color: rgba(255,255,255,0.6); }
.vc-res strong { font-family: 'Krona One', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 26px; color: #C5D8E6; }
.vc-res strong b { font-weight: 400; }
.vc-ok { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.8); }
.vc-ok li::before { content: "✓"; color: #90D5FF; margin-right: 8px; }
.vc-meta { font-size: 11.5px; color: rgba(255,255,255,0.55); }

/* ---------- Narrow windows (phones, small laptops) ---------- */
@container (max-width: 460px) {
  .vz-body { padding: 18px 16px 20px; gap: 14px; }
  .vz-note { font-size: 9.5px; letter-spacing: 0.06em; }
  .vz-tile { padding: 9px 8px; }
  .vz-tile > span { font-size: 10.5px; }
  .vz-tile strong { font-size: 14px; }
  .vm-sys { padding: 7px 9px; font-size: 12px; }
  .vm-feed li { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; font-size: 11px; }
  .vt-map { height: 164px; }
  .vt-node { padding: 6px 7px; font-size: 11px; white-space: normal; line-height: 1.2; }
  .vt-node small { font-size: 9px; }
  .vt-shop, .vt-dst { width: 24%; } .vt-dst { left: 76%; } .vt-hub { left: 39%; width: 22%; }
  .vt-dst::after { display: none; }
  .vt-row { grid-template-columns: 78px minmax(0, 1fr) 36px; font-size: 11.5px; }
  .vt-feed li { grid-template-columns: 96px 56px minmax(0, 1fr); gap: 6px; font-size: 11px; }
  .vp-list li { grid-template-columns: 22px minmax(0, 1fr) 34px 84px; column-gap: 8px; font-size: 12px; }
  .vp-tag { font-size: 9.5px; padding: 3px 5px; }
  .ve-grid { grid-template-columns: minmax(0, 1fr); }
  .ve-side .vz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ve-feed { display: none; }
  .vc-grid { grid-template-columns: minmax(0, 1fr); }
  .vc-page { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .vc-tab { padding: 0 10px; font-size: 12px; }
}

/* ---------- Case showcase: live shop in device frames ---------- */
.cs { position: relative; padding: 0 64px 24px; background: linear-gradient(#2C0E18 0 42%, #FFFFFF 42%); }
.cs-stage { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 90px 0 0; }
.cs-laptop { margin: 0; animation: csUp 1s cubic-bezier(.16,1,.3,1) .2s both; }
.cs-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; border: 14px solid #16090E; border-bottom-width: 18px; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 1.5px rgba(197,216,230,0.28), 0 50px 90px -40px rgba(44,14,24,0.55); }
.cs-screen img, .cs-phone-screen img { display: block; width: 100%; height: auto; }
.cs-base { position: relative; height: 18px; margin: 0 -5%; background: linear-gradient(#D9D4D6, #B9B2B5); border-radius: 0 0 14px 14px; }
.cs-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 7px; margin-left: -8%; background: #A9A1A5; border-radius: 0 0 8px 8px; }
.cs-phone { position: absolute; right: 0; bottom: -40px; width: 24%; margin: 0; animation: csSide 1.1s cubic-bezier(.16,1,.3,1) .45s both; }
.cs-phone-screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; background: #111; border: 9px solid #16090E; border-radius: 38px; box-shadow: 0 0 0 1.5px rgba(197,216,230,0.28), 0 40px 70px -25px rgba(44,14,24,0.6); }
.cs-phone-screen::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 8px; width: 32%; height: 18px; margin-left: -16%; background: #16090E; border-radius: 12px; }
.cs-cap { margin: 72px auto 0; max-width: 1080px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.6); }
.cs-cap::before { content: ""; width: 8px; height: 8px; background: #45142D; }
.cs-cap a { color: #45142D; font-weight: 700; border-bottom: 1.5px solid currentColor; }
@keyframes csUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes csSide { from { opacity: 0; transform: translate(40px, 40px); } to { opacity: 1; transform: none; } }

/* e-mail variant: two phones with the mail scrolling by itself */
.cs-mails { display: flex; justify-content: center; align-items: flex-start; gap: 56px; max-width: 1080px; margin: 0 auto; }
.cs-mail { margin: 0; width: 300px; display: flex; flex-direction: column; gap: 18px; animation: csUp 1s cubic-bezier(.16,1,.3,1) calc(.2s + var(--k) * .2s) both; }
.cs-mail:nth-child(2) { margin-top: 72px; }
.cs-mail .cs-phone-screen { background: #FFFFFF; display: flex; flex-direction: column; }
.cs-mail-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cs-mail-body img { animation: csScroll 16s ease-in-out infinite; animation-delay: calc(1.5s + var(--k) * 2s); }
@keyframes csScroll { 0%, 12% { transform: translateY(0); } 50%, 62% { transform: translateY(calc(-100% + var(--h, 560px))); } 100% { transform: translateY(0); } }
.cs-mail figcaption { display: flex; flex-direction: column; gap: 4px; }
.cs-mail figcaption b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-family: 'Krona One', 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 16px; color: #000000; }
.cs-mail figcaption span { font-size: 14px; color: rgba(0,0,0,0.6); }
.cs-mail-app { display: flex; align-items: center; gap: 10px; padding: 34px 14px 10px; border-bottom: 1px solid #ECE7E9; font-size: 11px; color: #555; }
.cs-mail-app i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #F0692A; color: #FFF; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; }
.cs-mail-app strong { display: block; color: #111; font-size: 12px; }

.is-mobile .cs { padding: 0 20px 8px; background: linear-gradient(#2C0E18 0 38%, #FFFFFF 38%); }
.is-mobile .cs-stage { padding: 0 38px 0 0; }
.is-mobile .cs-screen { border-width: 7px 7px 9px; border-radius: 10px 10px 0 0; }
.is-mobile .cs-base { height: 9px; border-radius: 0 0 8px 8px; }
.is-mobile .cs-phone { width: 30%; bottom: -24px; }
.is-mobile .cs-phone-screen { border-width: 5px; border-radius: 18px; }
.is-mobile .cs-phone-screen::before { top: 4px; height: 8px; border-radius: 6px; }
.is-mobile .cs-cap { margin-top: 48px; font-size: 13px; }
.is-mobile .cs-mails { gap: 14px; }
.is-mobile .cs-mail { width: calc(50% - 7px); gap: 12px; }
.is-mobile .cs-mail:nth-child(2) { margin-top: 40px; }
.is-mobile .cs-mail .cs-phone-screen { border-width: 5px; border-radius: 20px; }
.is-mobile .cs-mail-app { padding: 18px 8px 6px; gap: 6px; font-size: 9px; }
.is-mobile .cs-mail-app i { width: 18px; height: 18px; font-size: 8px; }
.is-mobile .cs-mail-app strong { font-size: 9.5px; }
.is-mobile .cs-mail figcaption b { font-size: 13px; }
.is-mobile .cs-mail figcaption span { font-size: 12px; }
.cs-mails + .cs-cap { justify-content: center; }