/* Orderly story scenes: reach, control, AI finds you, start. No background card: the animation sits on the page and follows light/dark. Site font only. */
.ost { --o-ink: #1B1511; --o-mut: #6F665E; --o-panel: #FFFFFF; --o-line: #DDD6CE; --o-alt: #F4F0EB; --o-track: #E9E3DC; --o-bubme: #FFE2C7; --o-bot: #F4F0EB; --o-head: #1B1511; color: var(--o-ink); background: transparent; }
[data-bs-theme="dark"] .ost { --o-ink: #F1EDF7; --o-mut: #9A92A8; --o-panel: #1E1628; --o-line: #3A2D48; --o-alt: #2C2238; --o-track: #33283F; --o-bubme: #7A3A0B; --o-bot: #251B30; --o-head: #FFFFFF; }
.ost__head { text-align: center; max-width: 680px; margin: 0 auto 26px; }
.ost__eyebrow { display: block; font: 600 13px/1 var(--primary-font), sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #E8450A; margin-bottom: 14px; }
.ost__head h2 { color: var(--o-head); margin: 0 0 12px; } .ost__head p { color: var(--o-mut); margin: 0; }
.ost__frame { max-width: 860px; margin: 0 auto; }
.ost__stage { padding: 0; }
.ost__svg { display: block; width: 100%; height: auto; }
.ost__live { padding: 4px 6px 8px; min-height: 52px; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.35; color: var(--o-mut); font-weight: 500; text-align: center; }
.ost__live b { color: #E8450A; font-weight: 700; }
.ost__bar { display: flex; justify-content: center; gap: 10px; padding: 0 0 6px; }
.ost__btn { border: 0; border-radius: 999px; padding: 11px 18px; min-height: 40px; background: var(--o-alt); color: var(--o-ink); font: 600 13px/1 var(--primary-font), sans-serif; cursor: pointer; }
.ost__btn:hover { background: var(--o-track); }
/* chat + widgets (control) */
.ost-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; align-items: start; padding: 14px; }
.ost-phone { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 430px; }
.ost-ph-head { background: var(--o-alt); padding: 12px 14px; display: flex; gap: 10px; align-items: center; color: var(--o-ink); }
.ost-ph-head b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; } .ost-ph-head small { display: block; font-size: 12px; color: var(--o-mut); line-height: 1.2; }
.ost-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #FF8A14, #D4123F); flex: none; }
.ost-ph-body { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.ost-bub { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.38; color: var(--o-ink); opacity: 0; }
.ost-bub.me { align-self: flex-end; background: var(--o-bubme); border-top-right-radius: 3px; }
.ost-bub.bot { align-self: flex-start; background: var(--o-bot); border-top-left-radius: 3px; }
.ost-side { display: flex; flex-direction: column; gap: 12px; }
.ost-wcard { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.ost-wcard.on { border-color: #FF8A14; box-shadow: 0 0 0 3px rgba(255, 138, 20, .18); }
.ost-wcard h4 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-mut); font-weight: 600; display: flex; justify-content: space-between; }
.ost-track { height: 12px; border-radius: 99px; background: var(--o-track); overflow: hidden; } .ost-track i { display: block; height: 100%; border-radius: 99px; background: #FF8A14; }
.ost-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ost-tile { border-radius: 10px; border: 1px solid var(--o-line); background: var(--o-alt); text-align: center; padding: 10px 0; font-size: 13px; color: var(--o-mut); }
.ost-tile.busy { border-color: #7A4A22; color: #C98A55; } .ost-tile.new { border-color: #FF8A14; background: #FF8A14; color: #1A1020; font-weight: 700; opacity: 0; }
/* steps (start) */
.ost-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; padding: 14px; }
.ost-step { background: var(--o-panel); border: 2px solid var(--o-line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; opacity: .5; }
.ost-step h3 { margin: 0; font-size: 20px; color: var(--o-head); }
.ost-n { font-size: 12px; color: var(--o-mut); letter-spacing: .08em; display: flex; justify-content: space-between; font-weight: 600; }
.ost-done { color: #3DDC97; opacity: 0; }
.ost-mi { display: flex; justify-content: space-between; background: var(--o-alt); border-radius: 10px; padding: 8px 12px; font-size: 14px; opacity: 0; }
.ost-sw { width: 76px; height: 40px; border-radius: 99px; background: var(--o-track); position: relative; align-self: center; } .ost-sw i { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: #9A92A8; }
.ost-toast { background: rgba(61, 220, 151, .14); border: 1px solid #3DDC97; color: var(--o-ink); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; opacity: 0; }
@media (max-width: 575px) { .ost { padding-top: 48px !important; padding-bottom: 48px !important; } .ost__live { padding: 4px 16px 6px; } }

/* qr + kiosk scenes */
.ost-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; align-items: start; padding: 14px; }
.ost-trio > * { min-width: 0; }
.ost-colhead { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-mut); font-weight: 600; margin-bottom: 10px; }
.ost-tq { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }
.ost-ph2 { min-height: 390px; }
.ost-bub.ok { background: rgba(61, 220, 151, .16); border: 1px solid #3DDC97; }
.ost-qb { display: inline-block; margin-top: 7px; background: #FF8A14; color: #1A1020; font-weight: 700; border-radius: 999px; padding: 7px 14px; font-size: 13px; transition: transform .12s; }
.ost-kd { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.ost-kd h4 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-mut); font-weight: 600; }
.ost-ticket { background: #FFF9EC; color: #1A1020; border: 1px solid #E8DFC9; border-radius: 6px; padding: 12px 14px; font-size: 14px; line-height: 1.5; font-weight: 600; opacity: 0; }
.ost-pill { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; border-radius: 99px; padding: 5px 13px; border: 1px solid #FF8A14; color: #E8450A; opacity: 0; }
[data-bs-theme="dark"] .ost-pill { color: #FF8A14; }
.ost-pill.paid { border-color: #3DDC97; color: #14935A; } [data-bs-theme="dark"] .ost-pill.paid { color: #3DDC97; }
.ost-board { display: flex; gap: 10px; opacity: 0; }
.ost-board div { flex: 1; border-radius: 12px; padding: 10px; text-align: center; font-weight: 700; font-size: 22px; background: var(--o-alt); color: var(--o-ink); }
.ost-board small { display: block; font-size: 12px; font-weight: 600; color: var(--o-mut); letter-spacing: .06em; }
.ost-kiosk { width: 100%; max-width: 330px; margin: 0 auto; background: var(--o-panel); border: 3px solid var(--o-line); border-radius: 26px; padding: 12px; height: 500px; position: relative; overflow: hidden; }
.ost-kh { font-weight: 700; font-size: 16px; color: var(--o-head); height: 30px; }
.ost-kview { position: absolute; inset: 52px 12px 12px; display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.ost-kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ost-kt { background: var(--o-alt); border: 2px solid var(--o-line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 100px; font-size: 14px; color: var(--o-ink); }
.ost-kt small { color: var(--o-mut); font-size: 13px; }
.ost-dish { height: 34px; border-radius: 8px; opacity: .9; }
.ost-kt.pick { border-color: #FF8A14; background: rgba(255, 138, 20, .14); }
.ost-kcart { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--o-alt); border: 1px solid var(--o-line); border-radius: 14px; padding: 10px 12px; font-size: 14px; color: var(--o-ink); }
.ost-kbtn { background: #FF8A14; color: #1A1020; font-weight: 700; border-radius: 999px; padding: 8px 16px; transition: transform .12s; } .ost-kbtn.tap { transform: scale(.93); }
.ost-kpay { justify-content: center; gap: 14px; }
.ost-ctr { text-align: center; color: var(--o-mut); font-size: 14px; }
.ost-big { font-size: 56px; font-weight: 700; color: var(--o-head); text-align: center; line-height: 1; }
.ost-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--o-track); border-top-color: #FF8A14; margin: 0 auto; animation: ostsp .9s linear infinite; }
@keyframes ostsp { to { transform: rotate(360deg); } }
.ost-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 138, 20, .85); box-shadow: 0 0 0 6px rgba(255, 138, 20, .22); pointer-events: none; z-index: 5; opacity: 0; }
@media (max-width: 767px) { .ost-trio, .ost-duo, .ost-steps { padding: 6px 0; } .ost-kiosk { max-width: none; } .ost-phone { min-height: 400px; } .ost-step { min-height: 0; } }
.ost-trio { max-width: 920px; margin-inline: auto; }