/* One shared page backdrop, native text, and a steady device silhouette. */
.phone-showcase { margin-top: 64px; padding-bottom: 32px; }
.phone-showcase::before { inset: 0; background: radial-gradient(ellipse at 74% 47%,#dce2be88,transparent 65%); }
.phone-showcase-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.phone-showcase-copy { padding-top: 0; }
.phone-showcase h2 { font-size: clamp(34px,3.8vw,51px); margin-bottom: 20px; }
.flow-intro { color:#5c5e52; font-size:17px; line-height:1.55; max-width:390px; }
.flow-steps { display:flex; list-style:none; padding:0; gap:25px; margin:28px 0 12px; counter-reset:step; }
.flow-steps li { color:#626653; font:12px var(--font-mono); padding-bottom:9px; border-bottom:2px solid #afb4a1; }
.flow-steps li::before { counter-increment:step; content:'0' counter(step) ' '; font-size:10px; }
.flow-steps .is-current { color:#303918; border-color:#667d22; }
.flow-steps .is-done { border-color:#b5c442; }
.flow-context { color:#555a48; font-size:14px; line-height:1.5; min-height:42px; max-width:395px; margin-bottom:20px; }
.film-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin-bottom:24px; }
.film-tab { min-height:59px; padding:10px 0; gap:8px; }
.film-tab-label { font-size:17px; }.film-tab-number { font-size:9px; }.film-tab-caption,.film-tab-arrow { display:none; }
.phone-film { aspect-ratio:auto; padding:24px 0 28px; margin:0; }
.live-phone { width:min(100%,366px); height:716px; margin:auto; position:relative; padding:8px; border-radius:53px; background:linear-gradient(120deg,#73766e,#191d19 18%,#363a33 53%,#0e110d 85%,#62675b); box-shadow:0 0 0 1px #a4a99a,0 0 0 3px #34382e,16px 24px 42px -18px #3d432d57,0 38px 44px -35px #22291488; }
.live-phone::before { content:''; position:absolute; width:3px; height:66px; left:-5px; top:145px; border-radius:3px; background:#4a4e43; box-shadow:0 78px #4a4e43; }
.live-phone::after { content:''; position:absolute; width:3px; height:89px; right:-5px; top:176px; border-radius:3px; background:#353a2d; }
.live-screen { height:100%; overflow:hidden; border-radius:46px; background:#eeeede; display:flex; flex-direction:column; font-family:Arial,Helvetica,sans-serif; color:#242923; }
.live-status { height:48px; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:space-between; padding:5px 24px 0; font-size:12px; font-weight:700; background:#f7f7ed; }
.live-island { position:absolute; width:100px; height:26px; left:50%; top:12px; transform:translateX(-50%); border-radius:20px; background:#121611; }
.live-header { display:flex; gap:9px; padding:11px 12px 13px; align-items:center; background:#f7f7ed; border-bottom:1px solid #d9dece; flex-shrink:0; }
.live-back { font:32px/1 Arial; color:#4c6b3e; }.live-header img { border-radius:50%; background:#e3e6c2; object-fit:cover; }.live-header strong { display:block; font-size:14px; font-weight:600; }.live-header div > span { display:block; font-size:11px; color:#5e6855; margin-top:4px; }.live-more { margin-left:auto; font-size:21px; }
.live-chat { flex:1; min-height:0; overflow:auto; padding:14px 13px 10px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c0c6b1 transparent; background:radial-gradient(ellipse at 90% 20%,#e3e8d0,transparent 80%); }
.live-day { font-size:10px; text-align:center; color:#65705a; margin-bottom:17px; }
#live-messages { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.live-bubble { padding:12px 13px 10px; border-radius:3px 14px 14px; background:#fffef7; box-shadow:0 1px 2px #26331913; font-size:14px; line-height:1.48; width:94%; flex-shrink:0; animation:message-in .28s ease-out both; }
.live-bubble.is-you { align-self:flex-end; background:#d9e9b6; border-radius:14px 3px 14px 14px; width:auto; max-width:90%; }
.live-bubble .transcript-who { font:11px/1.4 Arial; color:#4d6838; margin-bottom:5px; }.live-bubble time { font-size:9px; color:#67715e; }.live-bubble h4 { font:600 14px/1.4 Arial; margin:0 0 6px; }.live-bubble p { margin:0; }.live-bubble .transcript-location { color:#66705e; font-size:11px; margin-bottom:7px; }.live-bubble .a-list { list-style:none; padding:0; }.live-bubble .quote { margin-top:5px; border-left:2px solid #a7b785; padding-left:8px; }.live-bubble .stars { color:#795d11; }
.live-typing { font-size:11px; color:#5c684e; margin:14px 0 2px; }.live-typing span { margin-left:8px; letter-spacing:3px; }.live-typing[hidden] { display:none; }
.live-compose { padding:9px 13px 4px; background:#f7f7ed; }.live-compose button { width:100%; min-height:42px; border:1px solid #c6d2b4; border-radius:22px; background:#e9efd9; color:#344728; font:12px Arial; cursor:pointer; }.live-compose button:hover { background:#dce9c2; }
.live-home { height:4px; width:105px; margin:9px auto 10px; background:#22271e; border-radius:4px; flex-shrink:0; }
.film-transport,#scene-chat,.film-feedback { width:min(100%,366px); max-width:none; margin-left:auto; margin-right:auto; }.film-transport { margin-top:0; gap:12px; }.film-transport button { white-space:nowrap; font-size:12px; }.film-position { font-size:9px; }.film-feedback { font-size:12px; line-height:1.5; }
.live-chat:focus-visible,.live-compose button:focus-visible { outline:2px solid #526d2b; outline-offset:-3px; }
@keyframes message-in { from { opacity:0; translate:0 9px; } to { opacity:1; translate:0 0; } }
@media(max-width:1024px) { .phone-showcase-layout { gap:26px; }.film-nav { gap:0 12px; }.film-tab-label { font-size:15px; }.live-phone { width:min(100%,340px); height:680px; }.phone-showcase h2 { font-size:36px; } }
@media(max-width:760px) { .phone-showcase { margin-top:32px; }.phone-showcase::before { inset:20% 0 0; background:radial-gradient(ellipse at 50% 60%,#dce2be88,transparent 65%); }.phone-showcase-layout { gap:12px; }.phone-showcase-copy { padding:0; }.phone-showcase h2 { font-size:38px; }.flow-intro { font-size:16px; }.flow-steps { margin-top:22px; }.flow-context { min-height:42px; }.film-nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0 8px; }.film-tab { padding:8px 4px; min-height:46px; }.film-tab-number { display:none; }.film-tab-label { font-size:12px; }.live-phone { width:min(calc(100% - 14px),350px); height:690px; }.phone-film { padding:24px 0; }.film-transport,#scene-chat,.film-feedback { width:calc(100% - 24px); }.film-example-note { font-size:10px; }.live-bubble { font-size:14px; } }
@media(max-width:360px) { .phone-showcase h2 { font-size:32px; }.live-phone { height:650px; border-radius:43px; }.live-screen { border-radius:36px; }.live-header { gap:6px; padding-inline:8px; }.live-header strong { font-size:12px; }.live-chat { padding-inline:10px; }.live-bubble { padding:10px; }.flow-steps { gap:20px; }.film-position { display:none; } }
@media(prefers-reduced-motion:reduce) { .live-bubble { animation:none; }.live-chat { scroll-behavior:auto; } }
.phone-showcase:not(.is-enhanced) .live-phone { display:none; }