/* Gang Sheet Builder Messenger promo page. Layered on landing.css, same as dtf.css.
   Outside the phone: the landing palette. Inside the phone: the app's own palette
   (bg #0f0f1a, cards #1a1a2e, accent #6366f1, text #e2e8f0, muted #94a3b8, danger #ef4444), copied from
   native-app-messenger/www/css/messenger.css so the mockup is the real UI, not a generic chat. */

.msg-page { background: var(--dark-bg); color: var(--gray-200); }
.msg-page a:focus-visible, .msg-page button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.msg-nav .nav-logo-icon { flex-shrink: 0; }
.msg-nav .nav-logo-icon img { width: 36px; height: 36px; border-radius: 9px; display: block; }
.msg-nav .nav-logo { color: #fff; min-width: 0; }
.msg-nav-short { display: none; }
.msg-nav-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-nav .nav-cta { flex-shrink: 0; }
.msg-nav .nav-cta .btn { white-space: nowrap; }
.msg-nav { background: rgba(10,10,26,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.05); }

/* ---------- Hero ---------- */
.msg-hero { padding: 120px 0 60px; isolation: isolate; }
.hero.msg-hero .container { display: grid; gap: 44px; align-items: center; } /* (0,3,0) beats landing.css .hero .container */
.hero.msg-hero .container > * { min-width: 0; }
.msg-hero-glow { position: absolute; max-width: 100%; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.msg-hero-glow--a { width: 560px; height: 560px; right: -160px; top: 8%; background: radial-gradient(circle at 40% 40%, rgba(139,92,246,.6), rgba(236,72,153,.3) 45%, transparent 70%); animation: msgDrift 14s ease-in-out infinite; }
.msg-hero-glow--b { width: 420px; height: 420px; left: -140px; bottom: -80px; background: radial-gradient(circle, rgba(59,130,246,.45), transparent 68%); animation: msgDrift 18s ease-in-out infinite reverse; }
@keyframes msgDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-30px, 24px, 0) scale(1.08); } }
.msg-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* eyebrow pill with the live dot (same shape as landing.css .hero-badge / .hero-badge-dot) */
.msg-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-300); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; margin-bottom: 18px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.msg-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: msgPing 2.2s ease-out infinite; flex-shrink: 0; }
@keyframes msgPing { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.msg-hero .hero-title { letter-spacing: -.02em; }
.msg-hero .hero-subtitle { max-width: 54ch; }
.msg-cta { margin-top: 12px; position: relative; max-width: 100%; white-space: normal; flex-wrap: wrap; }
.msg-cta .msg-cta-soon { display: none; }
.msg-cta.is-soon { background: rgba(255,255,255,.1); box-shadow: none; animation: none; cursor: default; }
.msg-cta.is-soon:hover { transform: none; box-shadow: none; }
.msg-cta.is-soon .msg-cta-soon { display: inline-block; margin-left: 10px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--violet); }
.msg-hero-alt { margin-top: 14px; color: var(--gray-400); font-size: 14px; }
.msg-hero-alt a { color: var(--gray-200); text-decoration: underline; text-underline-offset: 3px; }
.msg-hero-proof { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 30px 0 0; padding: 0; color: var(--gray-400); font-size: 14px; font-weight: 500; }
.msg-hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-accent); box-shadow: 0 0 10px rgba(139,92,246,.7); flex-shrink: 0; }

/* staggered reveal on load */
.msg-reveal { animation: msgReveal .9s cubic-bezier(.2,.7,.2,1) both; }
.msg-reveal:nth-child(1) { animation-delay: .05s; }
.msg-reveal:nth-child(2) { animation-delay: .18s; }
.msg-reveal:nth-child(3) { animation-delay: .32s; }
.msg-reveal:nth-child(4) { animation-delay: .46s; }
.msg-reveal:nth-child(5) { animation-delay: .6s; }
@keyframes msgReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.msg-hero-visual { animation: msgPhoneIn 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes msgPhoneIn { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Hero visual: three sources feeding one phone ---------- */
.msg-hero-visual { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 0 0; }
.msg-sources { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.msg-source { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--gray-200); font-size: 13px; font-weight: 600; white-space: nowrap; position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.msg-source-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--gradient-accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.msg-source-ico svg { width: 15px; height: 15px; }

.msg-phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.msg-phone-wrap::before { content: ""; position: absolute; left: 50%; top: 46%; width: 120%; height: 86%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(99,102,241,.5), rgba(139,92,246,.2) 55%, transparent 100%); filter: blur(30px); z-index: 0; pointer-events: none; }
.msg-phone-float { position: relative; z-index: 1; max-width: 100%; animation: msgHover 7s ease-in-out infinite; }
@keyframes msgHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- The phone ---------- */
.msg-phone {
  position: relative; z-index: 1; font-size: 12px; width: 23.6em; max-width: 100%;
  padding: .75em; border-radius: 3.9em; background: linear-gradient(160deg, #2a2a3a, #0b0b14 60%);
  box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.9), 0 0 60px rgba(99,102,241,.18);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  line-height: 1.4; text-align: left; transform-origin: 50% 50%;
}
.msg-phone::before { /* left side buttons */
  content: ""; position: absolute; left: -.28em; top: 9em; width: .28em; height: 3.2em; border-radius: .2em 0 0 .2em; background: #23232f; box-shadow: 0 5em 0 #23232f, 0 -3.6em 0 -0.6em #23232f;
}
.msg-ph-btn-r { position: absolute; right: -.28em; top: 12em; width: .28em; height: 5em; border-radius: 0 .2em .2em 0; background: #23232f; }
.msg-phone::after { /* specular edge on the bezel */
  content: ""; position: absolute; inset: 0; border-radius: 3.9em; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(255,255,255,.05));
}
.msg-ph-screen { position: relative; aspect-ratio: 9 / 19.4; width: 100%; border-radius: 3.2em; background: #0f0f1a; overflow: hidden; color: #e2e8f0; box-shadow: inset 0 0 1.2em rgba(0,0,0,.6); }
/* punch-hole front camera, as Android phones have it (the live platform) */
.msg-ph-cam { position: absolute; top: 1.05em; left: 50%; transform: translateX(-50%); width: 1.1em; height: 1.1em; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 .18em #0b0b14, 0 0 0 .12em rgba(255,255,255,.06); z-index: 30; }
.msg-hero-prereq { margin-top: 10px; color: var(--gray-400); font-size: 14px; }
.msg-hero-prereq a { color: var(--gray-200); text-decoration: underline; text-underline-offset: 3px; }
.msg-ph-status { position: absolute; top: 0; left: 0; right: 0; height: 3.4em; display: flex; align-items: center; justify-content: space-between; padding: .55em 1.9em 0; font-size: .95em; font-weight: 600; z-index: 20; }
.msg-ph-status-r { display: inline-flex; align-items: center; gap: .45em; }
.msg-ph-signal { display: inline-flex; align-items: flex-end; gap: .12em; height: .9em; }
.msg-ph-signal i { display: block; width: .22em; background: #fff; border-radius: .05em; }
.msg-ph-signal i:nth-child(1) { height: 35%; } .msg-ph-signal i:nth-child(2) { height: 55%; } .msg-ph-signal i:nth-child(3) { height: 75%; } .msg-ph-signal i:nth-child(4) { height: 100%; }
.msg-ph-wifi { width: 1.1em; height: 1.1em; }
.msg-ph-batt { position: relative; width: 1.9em; height: .95em; border: .1em solid rgba(255,255,255,.55); border-radius: .28em; padding: .1em; }
.msg-ph-batt::after { content: ""; position: absolute; right: -.3em; top: 50%; transform: translateY(-50%); width: .14em; height: .4em; background: rgba(255,255,255,.55); border-radius: 0 .1em .1em 0; }
.msg-ph-batt i { display: block; width: 100%; height: 100%; background: #fff; border-radius: .12em; }

/* lock screen: the loop opens here and cross-fades back to it at the end */
.msg-ph-lock { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; padding-top: 9.5em; background: radial-gradient(120% 70% at 30% 10%, #3b3f8f 0%, #1e1b4b 40%, #0f0f1a 100%); opacity: 1; transition: opacity .45s ease; }
.msg-ph-lock::after { content: ""; position: absolute; bottom: .8em; left: 50%; width: 36%; height: .35em; border-radius: .35em; background: rgba(255,255,255,.7); transform: translateX(-50%); }
.msg-ph-lock-clock { font-size: 5.2em; font-weight: 600; letter-spacing: -.03em; color: #fff; line-height: 1; }
.msg-ph-lock-date { color: rgba(255,255,255,.75); font-weight: 500; font-size: 1.05em; margin-top: .4em; }
.msg-phone.s3 .msg-ph-lock, .msg-phone.is-static .msg-ph-lock { opacity: 0; }

/* views: the inbox is the root view; conversation and Shops slide over it, as in the app */
.msg-ph-view { position: absolute; left: 0; right: 0; bottom: 0; top: 3.4em; display: flex; flex-direction: column; background: #0f0f1a; z-index: 1; }
.msg-ph-view--chat, .msg-ph-view--shops { transform: translateX(102%); transition: transform .5s cubic-bezier(.2,.75,.2,1); box-shadow: -1em 0 2em rgba(0,0,0,.45); }
.msg-ph-view--chat { z-index: 2; }
.msg-ph-view--shops { z-index: 3; }
.msg-phone.s3 .msg-ph-view--chat, .msg-phone.is-static .msg-ph-view--chat { transform: none; }
.msg-phone.s13 .msg-ph-view--chat { transform: translateX(102%); }
.msg-phone.s15 .msg-ph-view--shops { transform: none; }

.msg-ph-subhead { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .75em 1em; background: #1a1a2e; border-bottom: 1px solid #334155; color: #e2e8f0; }
.msg-ph-title { font-size: 1em; font-weight: 600; margin: 0; line-height: 1.2; display: inline-flex; align-items: center; gap: .3em; }
.msg-ph-subhead svg { flex-shrink: 0; color: #cbd5e1; }
.msg-ph-subhead-gap { width: 1.5em; flex-shrink: 0; }

/* inbox rows (from .chat-inbox-row) */
.msg-ph-inbox { display: flex; flex-direction: column; overflow: hidden; }
.msg-ph-row { display: flex; align-items: center; gap: .7em; padding: .8em .9em; border-bottom: 1px solid #334155; background: #0f0f1a; }
.msg-ph-avatar { width: 2.9em; height: 2.9em; border-radius: 50%; background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; flex-shrink: 0; }
.msg-ph-avatar--2 { background: #0ea5e9; } .msg-ph-avatar--3 { background: #14b8a6; } .msg-ph-avatar--4 { background: #22c55e; } .msg-ph-avatar--5 { background: #ec4899; } .msg-ph-avatar--6 { background: #f59e0b; } .msg-ph-avatar--7 { background: #a855f7; } .msg-ph-avatar--8 { background: #f43f5e; }
.msg-ph-row-info { flex: 1; min-width: 0; }
.msg-ph-row-name { font-weight: 600; font-size: .92em; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-ph-row-prev { font-size: .8em; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15em; }
.msg-ph-row--live .msg-ph-row-prev { color: #e2e8f0; font-weight: 500; }
.msg-ph-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: .3em; flex-shrink: 0; min-height: 2.6em; justify-content: center; }
.msg-ph-row-time { font-size: .7em; color: #94a3b8; }
.msg-ph-row-badge { min-width: 1.7em; height: 1.7em; border-radius: 1em; background: #6366f1; color: #fff; font-size: .78em; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 .45em; }
.msg-ph-chip { display: inline-block; margin-left: .2em; padding: .05em .5em; border-radius: .7em; font-size: .62em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.msg-ph-chip--web { background: rgba(56,189,248,.18); color: #7dd3fc; }
.msg-ph-chip--app { background: rgba(167,139,250,.18); color: #c4b5fd; }
/* the unread badge ticks 1 to 2 when the second message lands (s14) */
.msg-ph-badge-b { display: none; }
.msg-phone.s14 .msg-ph-badge-a, .msg-phone.is-static .msg-ph-badge-a { display: none; }
.msg-phone.s14 .msg-ph-badge-b, .msg-phone.is-static .msg-ph-badge-b { display: inline; }
.msg-phone.s14 .msg-ph-row--live .msg-ph-row-badge { animation: msgBadgePop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes msgBadgePop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* push banners: heads-up card below the status bar */
.msg-ph-banner { position: absolute; top: 3.6em; left: .65em; right: .65em; z-index: 40; display: flex; gap: .7em; align-items: center; padding: .75em .85em; border-radius: 1.4em; background: rgba(34,34,52,.94); box-shadow: 0 .8em 2em rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-150%); opacity: 0; transition: transform .55s cubic-bezier(.2,.9,.2,1.05), opacity .35s; }
.msg-ph-banner img { width: 2.9em; height: 2.9em; border-radius: .8em; flex-shrink: 0; }
.msg-ph-banner-body { min-width: 0; flex: 1; }
.msg-ph-banner-top { display: flex; justify-content: space-between; gap: .5em; font-size: .62em; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.msg-ph-banner-top span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-ph-banner-title { font-size: .85em; font-weight: 700; color: #fff; margin-top: .1em; }
.msg-ph-banner-text { font-size: .78em; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-ph-banner.is-on { transform: none; opacity: 1; }
.msg-phone.s1 .msg-ph-banner--1 { transform: none; opacity: 1; }
.msg-phone.s2 .msg-ph-banner--1 { transform: scale(.97); }
.msg-phone.s3 .msg-ph-banner--1 { transform: translateY(-150%); opacity: 0; }
.msg-phone.s12 .msg-ph-banner--2 { transform: none; opacity: 1; }
.msg-phone.s13 .msg-ph-banner--2 { transform: translateY(-150%); opacity: 0; }
/* composed final frame: the second customer's push sits clear of the thread header so "Jess M." stays readable */
.msg-phone.is-static .msg-ph-banner--2 { top: 6.5em; transform: none; opacity: 1; }
/* the tap ripple on the banner (s2) */
.msg-ph-tap { position: absolute; left: 62%; top: 55%; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255,255,255,.55); transform: translate(-50%,-50%) scale(0); opacity: 0; pointer-events: none; }
.msg-phone.s2 .msg-ph-tap { animation: msgTap .5s ease-out both; }
@keyframes msgTap { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }
/* the buzz: once for each push (two identical keyframes so the second one restarts the animation) */
.msg-phone.s1 { animation: msgBuzz .42s linear; }
.msg-phone.s12 { animation: msgBuzz2 .42s linear; }
@keyframes msgBuzz { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(.7deg); } 40% { transform: rotate(-.7deg); } 60% { transform: rotate(.5deg); } 80% { transform: rotate(-.4deg); } }
@keyframes msgBuzz2 { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(.7deg); } 40% { transform: rotate(-.7deg); } 60% { transform: rotate(.5deg); } 80% { transform: rotate(-.4deg); } }

/* conversation (from .chat-messages / .chat-msg-bubble) */
.msg-ph-messages { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .9em; position: relative; overflow: hidden; }
.msg-ph-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.msg-ph-slot-in { min-height: 0; overflow: hidden; }
.msg-ph-msg { display: flex; flex-direction: column; max-width: 82%; opacity: 0; transform: translateY(.6em) scale(.94); transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
.msg-ph-msg--theirs { align-self: flex-start; align-items: flex-start; transform-origin: 0 100%; }
.msg-ph-msg--mine { align-self: flex-end; align-items: flex-end; transform-origin: 100% 100%; }
.msg-ph-msg.is-on { opacity: 1; transform: none; }
.msg-ph-bubble { position: relative; padding: .7em 1em; border-radius: 1.3em; font-size: .86em; line-height: 1.4; word-break: break-word; }
.msg-ph-msg--mine .msg-ph-bubble { background: #6366f1; color: #fff; border-bottom-right-radius: .35em; }
.msg-ph-msg--theirs .msg-ph-bubble { background: #1a1a2e; color: #e2e8f0; border-bottom-left-radius: .35em; }
.msg-ph-msgtime { font-size: .66em; color: #94a3b8; margin-top: .3em; padding: 0 .4em; }
.msg-ph-bubble--img { padding: .35em; }
.msg-ph-art { width: 9.5em; aspect-ratio: 1; border-radius: .9em; background: #fff; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%), linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%); background-size: 1em 1em; background-position: 0 0, .5em .5em; }
.msg-ph-art-ring { width: 68%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 210deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); display: flex; align-items: center; justify-content: center; box-shadow: 0 .3em .8em rgba(0,0,0,.25); }
.msg-ph-art-ring span { width: 78%; aspect-ratio: 1; border-radius: 50%; background: #0f0f1a; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; font-size: 1.05em; line-height: 1; letter-spacing: .04em; }
.msg-ph-quote { padding: .45em .7em; margin-bottom: .4em; border-left: 2px solid rgba(255,255,255,.4); border-radius: .35em; background: rgba(255,255,255,.1); }
.msg-ph-quote-who { font-size: .72em; font-weight: 600; color: rgba(255,255,255,.85); }
.msg-ph-quote-text { font-size: .76em; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15em; }
.msg-ph-typing { display: inline-flex; align-items: center; gap: .35em; align-self: flex-start; background: #1a1a2e; padding: .8em 1.1em; border-radius: 1.3em; border-bottom-left-radius: .35em; opacity: 0; transform: translateY(.4em); transition: opacity .3s, transform .3s; }
.msg-ph-typing i { display: block; width: .6em; height: .6em; border-radius: 50%; background: #94a3b8; animation: msgTypingDot 1.4s infinite ease-in-out; }
.msg-ph-typing i:nth-child(2) { animation-delay: .2s; } .msg-ph-typing i:nth-child(3) { animation-delay: .4s; }
.msg-ph-typing.is-on { opacity: 1; transform: none; }
@keyframes msgTypingDot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* timeline: s1 push, s2 tap, s3 thread opens (first message + typing), s4 artwork, s5 my reply, s6 typing, s7 their reply,
   s8 long-press, s9 picker, s10 pick, s11 chip, s12 second push, s13 back to inbox, s14 badge tick, s15 Shops, s16 shop badge tick.
   Classes are cumulative, so each "off" rule sits after the "on" rule it overrides. */
.msg-phone.s3 .msg-ph-slot--m1, .msg-phone.s4 .msg-ph-slot--m2, .msg-phone.s5 .msg-ph-slot--m3, .msg-phone.s7 .msg-ph-slot--m4,
.msg-phone.is-static .msg-ph-slot--m1, .msg-phone.is-static .msg-ph-slot--m2, .msg-phone.is-static .msg-ph-slot--m3, .msg-phone.is-static .msg-ph-slot--m4 { grid-template-rows: 1fr; }
.msg-phone.s3 .msg-ph-slot--m1 .msg-ph-msg, .msg-phone.s4 .msg-ph-slot--m2 .msg-ph-msg, .msg-phone.s5 .msg-ph-slot--m3 .msg-ph-msg, .msg-phone.s7 .msg-ph-slot--m4 .msg-ph-msg,
.msg-phone.is-static .msg-ph-msg { opacity: 1; transform: none; }
.msg-phone.s3 .msg-ph-slot--m1 .msg-ph-msg { transition-delay: .25s; }
.msg-phone.s3 .msg-ph-slot--typing { grid-template-rows: 1fr; }
.msg-phone.s3 .msg-ph-typing { opacity: 1; transform: none; transition-delay: .4s; }
.msg-phone.s4 .msg-ph-slot--typing { grid-template-rows: 0fr; }
.msg-phone.s4 .msg-ph-typing { opacity: 0; transition-delay: 0s; }
.msg-phone.s6 .msg-ph-slot--typing { grid-template-rows: 1fr; }
.msg-phone.s6 .msg-ph-typing { opacity: 1; transform: none; }
.msg-phone.s7 .msg-ph-slot--typing { grid-template-rows: 0fr; }
.msg-phone.s7 .msg-ph-typing { opacity: 0; }

/* long-press, picker, reaction chip (from .chat-reaction-picker / .chat-reaction-chip) */
.msg-ph-touch { position: absolute; left: 55%; top: 50%; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 .4em rgba(255,255,255,.12); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s; pointer-events: none; }
.msg-phone.s8 .msg-ph-touch { opacity: 1; transform: scale(1); }
.msg-phone.s8 .msg-ph-msg--m4 .msg-ph-bubble { transform: scale(.96); box-shadow: 0 0 0 .25em rgba(99,102,241,.35); }
.msg-ph-msg--m4 .msg-ph-bubble { transition: transform .25s, box-shadow .25s; }
.msg-phone.s10 .msg-ph-touch { opacity: 0; }
.msg-phone.s10 .msg-ph-msg--m4 .msg-ph-bubble { transform: none; box-shadow: none; }
.msg-ph-picker { position: absolute; left: 1em; bottom: 5.3em; display: flex; gap: .1em; padding: .3em .4em; border-radius: 2em; background: #252540; box-shadow: 0 .4em 1.4em rgba(0,0,0,.45); z-index: 5; opacity: 0; transform: scale(.75); transform-origin: 15% 100%; transition: opacity .18s, transform .22s cubic-bezier(.3,1.5,.5,1); }
.msg-ph-picker span { width: 2.35em; height: 2.35em; display: flex; align-items: center; justify-content: center; font-size: 1.1em; border-radius: 50%; transition: background .15s, transform .15s; }
.msg-ph-picker-txt { color: #cbd5e1; font-size: .95em; }
.msg-ph-picker.is-on, .msg-phone.s9 .msg-ph-picker { opacity: 1; transform: scale(1); }
.msg-phone.s10 .msg-ph-picker-pick, .msg-ph-picker-pick.is-on { background: rgba(139,92,246,.35); transform: scale(1.15); }
.msg-phone.s11 .msg-ph-picker { opacity: 0; transform: scale(.75); }
.msg-ph-reactions { display: flex; gap: .3em; padding: 0 .3em; height: 0; overflow: visible; transition: height .3s, margin .3s; }
.msg-ph-reactions.is-on, .msg-phone.s11 .msg-ph-reactions, .msg-phone.is-static .msg-ph-reactions { height: 1.9em; margin-top: .2em; }
.msg-ph-reaction { display: inline-flex; align-items: center; gap: .2em; padding: .15em .5em; border-radius: .8em; background: rgba(139,92,246,.15); border: 1.5px solid #6366f1; font-size: .74em; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.msg-ph-reaction.is-on, .msg-phone.s11 .msg-ph-reaction, .msg-phone.is-static .msg-ph-reaction { transform: scale(1); }

/* input bar (from .chat-input-bar) */
.msg-ph-inputbar { display: flex; align-items: center; gap: .55em; padding: .7em .8em 1.5em; background: #1a1a2e; border-top: 1px solid #334155; }
.msg-ph-attach { width: 2.6em; height: 2.6em; border-radius: 50%; background: #252540; color: #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 1.1em; flex-shrink: 0; }
.msg-ph-input { flex: 1; border: 1px solid #334155; border-radius: 2em; padding: .65em 1.1em; font-size: .86em; background: #1a1a2e; color: #94a3b8; white-space: nowrap; overflow: hidden; }
.msg-ph-send { width: 2.9em; height: 2.9em; border-radius: 50%; background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Settings, Shops (from .shop-row / .msg-badge in the app: indigo badge per conversation, red corner badge per shop) */
.msg-ph-shops { display: flex; flex-direction: column; padding: .4em 0; }
.msg-ph-shop { display: flex; align-items: center; gap: .9em; padding: .85em 1.1em; color: #e2e8f0; }
.msg-ph-shop--active { background: rgba(139,92,246,.12); }
.msg-ph-shop--active .msg-ph-row-name::after { content: "•"; margin-left: .5em; color: #a78bfa; }
.msg-ph-shop-avatar { position: relative; width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1em; flex-shrink: 0; }
.msg-ph-shop-avatar--2 { background: linear-gradient(135deg, #ec4899, #f59e0b); }
.msg-ph-shop-avatar--3 { background: linear-gradient(135deg, #0ea5e9, #22c55e); }
.msg-ph-shop .msg-ph-row-name { font-size: .95em; }
.msg-ph-shop .msg-ph-row-prev { font-size: .78em; color: rgba(255,255,255,.5); }
.msg-ph-shop-arrow { flex-shrink: 0; color: rgba(255,255,255,.3); }
.msg-ph-shop-badge { position: absolute; top: -.35em; right: -.35em; display: flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: .75em; background: #ef4444; color: #fff; font-size: .68em; font-weight: 700; box-shadow: 0 0 0 2px #0f0f1a; }
.msg-phone.s16 .msg-ph-shop-badge--tick .msg-ph-badge-a { display: none; }
.msg-phone.s16 .msg-ph-shop-badge--tick .msg-ph-badge-b { display: inline; }
.msg-phone.s16 .msg-ph-shop-badge--tick { animation: msgTick .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes msgTick { 0% { transform: scale(.6); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.msg-ph-shop-add { display: flex; align-items: center; gap: .6em; padding: 1em 1.1em; color: #818cf8; font-weight: 600; font-size: .9em; }
.msg-ph-shop-add span { width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px dashed #818cf8; display: flex; align-items: center; justify-content: center; }

/* loop reset: the lock screen fades back over whatever is showing, then the classes are cleared with transitions off (no blank frame) */
.msg-phone.is-fading .msg-ph-lock { opacity: 1; }
.msg-phone.is-resetting, .msg-phone.is-resetting * { transition: none !important; animation: none !important; }

.msg-ph-caption { position: relative; z-index: 1; margin: 22px auto 0; max-width: 34ch; text-align: center; font-size: 14px; color: var(--gray-400); min-height: 2.6em; transition: opacity .3s; }
.msg-ph-caption.is-swap { opacity: 0; }

/* ---------- The sale you would have missed ---------- */
.msg-missed { padding: 60px 0; background: var(--dark-mid); text-align: center; }
.msg-missed .section-title { color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; }
.msg-missed-line { font-size: 20px; margin: 16px auto 28px; max-width: 42ch; line-height: 1.5; color: var(--gray-300); }
.msg-missed-line em { color: #fff; font-style: italic; }
.msg-contrast { list-style: none; display: grid; gap: 12px; max-width: 900px; margin: 0 auto 20px; text-align: left; }
.msg-contrast li { padding: 16px 18px; border-radius: var(--radius-md); background: var(--dark-card); border: 1px solid var(--dark-card-border); color: var(--gray-300); font-size: 15px; line-height: 1.55; }
.msg-contrast li span { display: block; font-weight: 700; color: #fff; margin-bottom: 4px; font-size: 16px; }
.msg-contrast-win { position: relative; background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(139,92,246,.16), rgba(236,72,153,.12)); border-color: rgba(139,92,246,.55); box-shadow: 0 0 40px rgba(139,92,246,.15); }
.msg-contrast-win span { background: var(--gradient-accent-h); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.msg-footnote { color: var(--gray-400); font-size: 13px; }

/* ---------- Three doors in, one inbox ---------- */
.msg-flow-sec { padding: 70px 0; }
.msg-flow-sec .section-title { color: #fff; }
.msg-flow-sec .section-subtitle { color: var(--gray-400); }
.msg-flow { max-width: 820px; margin: 0 auto; }
.msg-flow-sources { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.msg-flow-sources li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--dark-card); border: 1px solid var(--dark-card-border); }
.msg-flow-sources li strong { color: #fff; font-size: 16px; }
.msg-flow-sources li > span:last-child { color: var(--gray-400); font-size: 14px; }
.msg-flow-chip { align-self: flex-start; margin: 0 0 6px; font-size: 11px; }
.msg-flow-lines { position: relative; height: 44px; }
.msg-flow-lines svg { display: none; width: 100%; height: 100%; overflow: visible; }
.msg-flow-lines path { fill: none; stroke: url(#msg-line-grad); stroke-width: 2; stroke-dasharray: 6 8; animation: msgDash 1.6s linear infinite; }
@keyframes msgDash { to { stroke-dashoffset: -28; } }
.msg-flow-vline { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, rgba(59,130,246,.35), var(--pink)); }
.msg-flow-target { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.14), rgba(236,72,153,.12)); border: 1px solid rgba(139,92,246,.45); box-shadow: 0 0 60px rgba(139,92,246,.18); }
.msg-flow-target img { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 10px 24px rgba(236,72,153,.35); }
.msg-flow-target strong { display: block; color: #fff; font-size: 20px; margin-bottom: 4px; }
.msg-flow-target span { color: var(--gray-300); font-size: 15px; }

/* ---------- Steps ---------- */
.msg-steps { padding: 70px 0; background: var(--dark-mid); }
.msg-steps .section-title { color: #fff; }
.msg-steps .section-subtitle { color: var(--gray-400); }
.msg-steps-grid { list-style: none; display: grid; gap: 32px; }
.msg-steps-grid li { text-align: center; }
.msg-steps-grid h3 { color: #fff; font-size: 18px; margin-bottom: 6px; }
.msg-steps-grid p { color: var(--gray-400); font-size: 15px; max-width: 34ch; margin: 0 auto; }
.msg-step-art { position: relative; font-size: 11px; width: 100%; max-width: 250px; aspect-ratio: 4 / 3.4; margin: 0 auto 16px; border-radius: 18px; overflow: hidden; background: #0f0f1a; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03); display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 1em; color: #e2e8f0; isolation: isolate; }
.msg-step-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 70% 20%, rgba(99,102,241,.22), transparent 55%); pointer-events: none; }
.msg-step-art--1 { justify-content: flex-start; padding-top: 6.4em; }
.msg-step-art--1 .msg-ph-banner { top: .9em; left: .9em; right: .9em; }
.msg-ph-row--dim { border-radius: .9em; border: 1px solid #334155; opacity: .85; }
.msg-step-art--2 .msg-ph-msg { max-width: 88%; }
.msg-step-art--2 .msg-ph-typing { opacity: 1; transform: none; }
.msg-ph-viewer { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.msg-ph-art--big { width: 11.5em; border-radius: 1.2em; transform: scale(1.12) rotate(-3deg); }
.msg-ph-zoom { position: absolute; z-index: 2; top: .9em; right: .9em; padding: .25em .65em; border-radius: 1em; background: rgba(255,255,255,.14); color: #fff; font-size: .8em; font-weight: 700; letter-spacing: .03em; }
.msg-ph-finger { position: absolute; z-index: 2; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 0 0 .45em rgba(255,255,255,.1); }
.msg-ph-finger--a { left: 27%; top: 63%; animation: msgPinchA 2.6s ease-in-out infinite; }
.msg-ph-finger--b { left: 60%; top: 24%; animation: msgPinchB 2.6s ease-in-out infinite; }
@keyframes msgPinchA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.4em, 1.4em); } }
@keyframes msgPinchB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.4em, -1.4em); } }
.msg-step-art--4 { justify-content: flex-end; padding-bottom: 2.4em; }
.msg-step-art--4 .msg-ph-msg { max-width: 92%; }
.msg-step-art--4 .msg-ph-picker { left: .6em; bottom: 7.6em; }

/* ---------- What you get / Built for ---------- */
.msg-get { padding: 60px 0; }
.msg-get .section-title { color: #fff; }
.msg-two { display: grid; gap: 40px; }
.msg-checks { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.msg-checks li { padding-left: 28px; position: relative; color: var(--gray-300); }
.msg-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.msg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.msg-chips li { padding: 8px 14px; border-radius: 999px; background: var(--dark-card); border: 1px solid var(--dark-card-border); font-size: 14px; color: var(--gray-200); }
.msg-owner-note { margin-top: 28px; padding: 20px 22px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.12)); border: 1px solid rgba(139,92,246,.35); color: var(--gray-300); line-height: 1.6; }
.msg-owner-note strong { color: #fff; }

/* ---------- Download ---------- */
.msg-download { padding: 70px 0; background: var(--dark-mid); }
.msg-download .section-title { color: #fff; }
.msg-download .section-subtitle { color: var(--gray-400); }
.msg-download .section-subtitle strong { color: var(--gray-200); }
.msg-platforms { display: grid; gap: 18px; }
.msg-card { padding: 24px; border-radius: var(--radius-lg); background: var(--dark-card); border: 1px solid var(--dark-card-border); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.msg-card--connect { align-items: stretch; justify-content: flex-start; }
.msg-card h3 { color: #fff; margin-bottom: 14px; }
.msg-note { color: var(--gray-400); font-size: 13px; margin-top: 12px; }
body[data-platform="ios"] .msg-card[data-platform="ios"], body[data-platform="android"] .msg-card[data-platform="android"] { border-color: var(--violet); box-shadow: var(--shadow-glow); }
.msg-badge { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 10px 18px 10px 44px; border-radius: 10px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); position: relative; line-height: 1.1; min-width: 180px; transition: transform var(--transition), box-shadow var(--transition); }
.msg-badge[href]:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139,92,246,.35); }
.msg-badge::before { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); background: #fff; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.msg-badge--apple { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.4 12.6c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.9C6.1 6.9 4.5 7.9 3.6 9.5c-1.8 3.2-.5 7.9 1.3 10.5.9 1.3 1.9 2.7 3.3 2.6 1.3-.1 1.8-.9 3.4-.9s2 .9 3.4.8c1.4 0 2.3-1.3 3.2-2.6 1-1.5 1.4-2.9 1.4-3-.1 0-2.7-1-2.7-4.1zM14 5.2c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.2 1.1.1 2.3-.6 3-1.5z'/></svg>"); }
.msg-badge--google { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 2.5v19l10-9.5L3 2.5zm12 8l-2.5 2.4 2.5 2.4L20 13c.8-.5.8-1.5 0-2l-5-2.5zM4.5 1.3l10 9.5 2.6-2.5L4.5 1.3zm0 21.4l12.6-7.2-2.6-2.5-10 9.7z'/></svg>"); }
.msg-badge-small { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.msg-badge-big { font-size: 18px; font-weight: 700; }
.msg-soon { display: none; }
.msg-badge.is-soon { cursor: default; }
.msg-badge.is-soon > .msg-badge-small, .msg-badge.is-soon > .msg-badge-big, .msg-badge.is-soon::before { opacity: .55; }
.msg-badge.is-soon .msg-soon { display: block; position: absolute; top: -10px; right: -10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; opacity: 1; }
.msg-card--connect { text-align: left; background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(139,92,246,.12)); border-color: rgba(139,92,246,.35); }
.msg-card--connect h3 { text-align: center; }
.msg-connect { list-style: none; counter-reset: msgc; display: grid; gap: 10px; }
.msg-connect li { counter-increment: msgc; position: relative; padding-left: 36px; color: var(--gray-200); font-size: 15px; line-height: 1.45; }
.msg-connect li::before { content: counter(msgc); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-accent); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ---------- FAQ ---------- */
.msg-faq { padding: 60px 0 80px; }
.msg-faq .section-title { color: #fff; text-align: center; }
.msg-faq-list { max-width: 720px; margin: 24px auto 0; border-bottom: 1px solid var(--dark-card-border); }
.msg-faq-q { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--dark-card-border); color: #fff; font: inherit; font-weight: 600; padding: 16px 32px 16px 0; cursor: pointer; position: relative; }
.msg-faq-q::after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--gray-400); font-size: 22px; transition: transform .25s; }
.msg-faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.msg-faq-a { padding: 0 0 16px; color: var(--gray-400); }
.msg-faq-a a { color: var(--gray-200); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.msg-footer { padding: 40px 0; text-align: center; color: var(--gray-400); font-size: 14px; }
.msg-footer a { color: var(--gray-300); }
.msg-footer-copy { margin-top: 8px; }

/* ---------- Breakpoints (768 / 1024, as dtf.css) ---------- */
@media (min-width: 768px) {
  .msg-phone { font-size: 12.6px; }
  .msg-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .msg-platforms { grid-template-columns: repeat(3, 1fr); }
  .msg-two { grid-template-columns: 1fr 1fr; }
  .msg-contrast { grid-template-columns: repeat(3, 1fr); }
  .msg-contrast li { padding: 20px; }
  .msg-flow-sources { grid-template-columns: repeat(3, 1fr); }
  .msg-flow-lines { height: 110px; }
  .msg-flow-lines svg { display: block; }
  .msg-flow-vline { display: none; }
}
@media (min-width: 1024px) {
  .msg-hero { padding: 150px 0 90px; }
  .hero.msg-hero .container { grid-template-columns: 1fr 1.1fr; }
  .msg-hero .hero-title { font-size: clamp(38px, 4.4vw, 54px); }
  .msg-hero-proof { justify-content: flex-start; }
  .msg-phone { font-size: 13.6px; }
  .msg-hero-visual { padding-top: 0; flex-direction: row; align-items: center; justify-content: center; gap: 0; }
  /* the three sources stack beside the phone, each with a glowing line feeding into it */
  .msg-sources { flex-direction: column; align-items: flex-end; gap: 26px; flex-shrink: 0; }
  .msg-source { padding-right: 18px; }
  .msg-source::after { content: ""; position: absolute; left: 100%; top: 50%; width: 30px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.25), #6366f1); transform: translateY(-50%); }
  .msg-source::before { content: ""; position: absolute; left: calc(100% + 26px); top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #6366f1; transform: translateY(-50%); box-shadow: 0 0 10px #6366f1, 0 0 20px rgba(99,102,241,.6); }
  .msg-phone-wrap { margin-left: 30px; }
  .msg-steps-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .msg-step-art { max-width: 240px; }
}
@media (max-width: 480px) {
  .msg-nav .nav-logo { font-size: 16px; gap: 8px; }
  .msg-nav-long { display: none; }
  .msg-nav-short { display: inline; }
  .msg-eyebrow { font-size: 11px; letter-spacing: .02em; text-align: left; }
  .msg-nav .nav-cta .btn { padding: 8px 14px; font-size: 13px; }
  .msg-phone { font-size: 11.4px; }
  .msg-cta { width: 100%; }
}

/* ---------- Reduced motion: the phone rests on its composed final frame, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .msg-reveal, .msg-hero-visual, .msg-hero-glow, .msg-live-dot, .msg-phone-float, .msg-phone, .msg-ph-typing i, .msg-ph-finger, .msg-ph-tap, .msg-flow-lines path, .msg-ph-row-badge, .msg-ph-shop-badge { animation: none !important; }
  .msg-phone, .msg-phone * { transition: none !important; }
  .msg-ph-typing i { transform: scale(1); opacity: 1; }
  .msg-cta, .btn-primary, .gradient-text { animation: none !important; }
}