/* RCS message previews; all common Hero content retains shared template styling. */
.rcs-preview { width:min(100%,290px);min-width:0;margin:16px auto; }
.rcs-preview .chat-shell { position:relative;display:flex;flex-direction:column;box-sizing:border-box;height:620px;padding:30px 7px 22px;border:1px solid #647692;border-radius:36px;background:#0b1221;box-shadow:0 18px 40px #0005,inset 0 0 0 2px #293953;color:#f1f5ff; }
.rcs-preview .chat-shell::before { content:"";position:absolute;width:60px;height:14px;top:9px;left:calc(50% - 30px);border-radius:12px;background:radial-gradient(circle at 48px 7px,#526682 0 2px,transparent 3px),#020611; }
.rcs-preview .chat-shell>header { border-radius:15px 15px 0 0;background:#1b2942;padding:12px;font-size:13px;font-weight:650; }
/* Keep the hardware fixed as browser zoom changes the CSS viewport height. */
.rcs-preview .chat-feed { display:flex;flex-direction:column-reverse;flex:1;min-height:0;height:auto;overflow:auto;overscroll-behavior:contain;padding:12px;border-radius:0 0 15px 15px;background:#111d33;scrollbar-width:none; }
.rcs-preview .chat-shell > :is(.rcs-phone-contact,.rcs-composer) { flex-shrink:0; }
.rcs-preview .chat-messages { flex:none;min-width:0;font-size:13px;line-height:1.45; }
.rcs-preview .bubble { width:fit-content;max-width:88%;margin:7px 0;padding:8px 11px;border-radius:12px 12px 12px 4px;background:#283950;color:#fff; }
.rcs-preview .out { margin-left:auto;border-radius:12px 12px 4px 12px;background:#2458be; }
.rcs-preview :is(.card,.ticket) { background:#f8faff;color:#111d35;border-radius:12px;overflow:hidden;margin:8px 0; }
.rcs-preview .media { position:relative;isolation:isolate;height:70px;background:#19366f;color:#fff;padding:10px 12px; }
.rcs-preview .media svg { position:absolute;inset:0;width:100%;height:100%;z-index:-1; }
.rcs-preview .details,.rcs-preview .stub { padding:12px; }
.rcs-preview .route,.rcs-preview .stub,.rcs-preview .ticket header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.rcs-preview .route strong { font-size:clamp(20px,2vw,30px);line-height:1; }
.rcs-preview .route small { display:block;color:#465873; }
.rcs-preview .route i { flex:1;border-top:1px dashed #8ca5d1; }
.rcs-preview .chip { display:inline-block;padding:4px 7px;margin:6px 3px 0 0;border-radius:5px;background:#e2ebff;color:#1746a6;font-size:11px;font-weight:650; }
.rcs-preview .seat-grid,.rcs-preview .meal-cards { display:grid;gap:5px; }
.rcs-preview .seat-grid { grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;text-align:center; }
.rcs-preview .seat-grid span { background:#edf3ff;padding:4px;border-radius:4px; }
.rcs-preview .seat-grid .selected,.rcs-preview .ticket header { background:#2458be;color:#fff; }
.rcs-preview .meal-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rcs-preview .meal-image { display:grid;place-items:center;min-height:48px;background:#e7effc;color:#244477;text-align:center; }
.rcs-preview .meal-image svg { width:100%;height:48px; }
.rcs-preview .ticket header { padding:9px 12px;font-size:11px; }
.rcs-preview .stub { border-top:1px dashed #9bb0d3;font-size:11px; }
.rcs-preview .chat-highlight { display:none;position:absolute;top:56px;right:12px;width:min(190px,80%);padding:10px 12px;border:1px solid #7594ca;border-radius:10px;background:#223b65;color:#fff;box-shadow:0 10px 24px #0005;z-index:2;pointer-events:none;font-size:13px; }
.rcs-preview .chat-highlight small { display:block;color:#ccdbf6; }
.rcs-preview figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(prefers-reduced-motion:no-preference){
 .rcs-preview .chat-shell.is-playing .chat-messages>* { animation:rcs-chat-enter .42s ease-out both;animation-delay:var(--message-delay,0s); }
 .rcs-preview .chat-shell.is-playing .chat-highlight { display:block;animation:rcs-chat-highlight 2s 4.8s ease both; }
 .rcs-preview .chat-shell.is-playing .chat-highlight--boarding { animation-delay:20.7s; }
 @keyframes rcs-chat-enter { from { display:none;opacity:0;transform:translateY(7px); } to { opacity:1;transform:translateY(0); } }
 @keyframes rcs-chat-highlight { 0%,100% { visibility:hidden;opacity:0;transform:translateY(4px); } 15%,76% { visibility:visible;opacity:1;transform:none; } }
}
@media(min-width:1150px){.rcs-preview .chat-highlight{right:-42px}}
@media(max-width:760px){.rcs-preview{width:min(100%,280px)}}
/* Scenario copy and card geometry are owned by product-scenarios.css. */
[data-product="rcs"] .sms-scenario .sms-scenario-visual { position: relative; }
@media(max-width:760px){
 [data-product="rcs"] .sms-scenario .sms-scenario-visual { min-height:225px; }
}
.rcs-story { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.rcs-story figure { margin: 0; }
.rcs-story img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.rcs-story figcaption { font-size: 18px; color: #010c3d; line-height: 1.5; margin-top: 20px; }
@media(min-width:761px) { [data-product="rcs"] .sms-scenario:last-child:nth-child(odd) { grid-template-rows: auto; } }
@media(max-width:760px) { [data-product="rcs"] .sms-scenario { grid-template-rows: auto auto; } .rcs-story { grid-template-columns: 1fr; gap: 28px; } }



/* Compose a complete RCS scene around the device, within the hero's grid. */
.rcs-preview--scene { container-type:inline-size; width:100%; max-width:600px; margin:16px auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:center; }
.rcs-preview__device { grid-column:1 / -1; width:min(100%,290px); justify-self:center; }
.rcs-preview--scene .chat-shell { margin-bottom:0; }
.rcs-preview--scene .chat-shell > .rcs-phone-contact { background:#192941; color:#f1f5ff; border-color:#30415d; border-radius:8px 8px 0 0; }
.rcs-preview--scene .rcs-phone-name small { color:#adbfda; }
.rcs-preview--scene .rcs-phone-back { color:#a8c8ff; }
.rcs-preview--scene .rcs-phone-status { color:#d9e4f5; }
.rcs-scene__sender,.rcs-scene__media { min-width:0; padding:14px; border-radius:12px; background:#edf3fc; color:#132b52; }
.rcs-scene__sender > svg { width:25px; height:25px; color:#33735e; margin-bottom:12px; }
.rcs-scene__sender strong,.rcs-scene__media strong { display:block; font-size:13px; font-weight:550; line-height:1.4; }
.rcs-scene__sender > span,.rcs-scene__media > span { display:block; margin-top:7px; font-size:10px; line-height:1.5; color:#4b6080; }
.rcs-scene__sender small { display:block; margin-top:5px; font-size:9px; color:#4b6080; }
.rcs-scene__thumbnails { display:flex; gap:5px; margin-bottom:12px; }
.rcs-scene__thumbnails img { min-width:0; width:calc(50% - 2.5px); height:59px; object-fit:cover; border-radius:6px; }
.rcs-scene__actions { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:12px; padding-top:4px; font-size:11px; color:#4b6080; }
.rcs-scene__actions b { background:#edf3fc; color:#2458be; padding:6px 10px; border-radius:6px; font-size:11px; font-weight:500; }
.rcs-scene__actions svg { width:17px; height:17px; color:#7b99c3; }
@media(min-width:1400px) {
 .rcs-preview--scene { grid-template-columns:minmax(0,1fr) 290px minmax(0,1fr); gap:12px; align-items:start; }
 .rcs-preview__device { grid-column:2; grid-row:1; }
 .rcs-scene__sender { grid-column:1; grid-row:1; align-self:start; margin-top:110px; padding:14px 12px; box-shadow:0 14px 28px -20px #18345b55; }
 .rcs-scene__media { grid-column:3; grid-row:1; align-self:end; margin-bottom:115px; padding:12px; background:#fff; box-shadow:0 14px 28px -20px #18345b55; }
 .rcs-preview--scene .chat-highlight { left:calc(100% + 12px); right:auto; bottom:auto; top:82px; width:calc((100cqw - 314px) / 2); max-width:none; box-sizing:border-box; padding:12px; font-size:12px; line-height:1.4; border:0; background:#dce9ff; color:#132b52; }
 .rcs-preview--scene .chat-highlight small { color:#4b6080; font-size:10px; }
 .rcs-scene__actions { margin-top:2px; }
}
@media(max-width:1399px) {
 .rcs-scene__sender,.rcs-scene__media { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 8px; }
 .rcs-scene__sender > svg { flex:none; width:18px; height:18px; margin:0; }
 .rcs-scene__sender > span,.rcs-scene__sender small,.rcs-scene__media > span,.rcs-scene__thumbnails { display:none; }
 .rcs-scene__sender strong,.rcs-scene__media strong { font-size:11px; }
 .rcs-preview--scene .chat-highlight { display:none !important; }
}