/* Visual stories. Presentation only; shared application styles stay untouched. */
:root {
  --cta-height: 52px;
  --cta-radius: 12px;
  --cta-type: 14px;
}
.button,
.hero-actions .button,
.price-card > .button,
.demo-banner .button,
.nav-links > .button {
  min-height: var(--cta-height);
  padding: 14px 24px;
  border-radius: var(--cta-radius);
  font-size: var(--cta-type);
  font-weight: 750;
  line-height: 1.4;
  gap: 14px;
  text-align: center;
}
.button-secondary { background: var(--accent); color: white; border-color: var(--accent); }
.button-secondary:hover { background: #12543d; }
.button .nb-icon { width: 20px; height: 20px; }
.button:disabled { opacity: .7; transform: none; }
.story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-copy > .button { margin-top: 4px; }
.story-copy .disclaimer { max-width: 460px; }
.ai-disclosure { display: flex; align-items: flex-start; gap: 8px; max-width: 720px; margin: 10px 4px 0; color: #61736a; font-size: 12px; line-height: 1.55; }
.ai-disclosure .material-symbols-rounded { flex: 0 0 auto; margin-top: 1px; color: var(--accent); font-size: 16px; }
.story-visual { min-width: 0; }
.scene-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; margin-top: 8px; padding-left: 3px; }
.scene-caption > small { color: var(--muted); font-size: 10px; line-height: 1.7; }
.scene-replay { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--accent); background: white; border: 1px solid var(--line); border-radius: 12px; }
.scene-replay:hover { background: var(--mint); }
.scene-replay .nb-icon { width: 19px; height: 19px; }
.local-qr-note { margin: 0 3px; max-width: 490px; font-size: 10px; line-height: 1.7; }

/* A printable QR, not an icon. Never crop, distort or animate its actual pixels. */
.portal-demo { isolation: isolate; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; padding: 32px 20px; border-radius: 28px; overflow: hidden; }
.portal-scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; z-index: -2; }
.portal-demo::before { content: ''; position: absolute; inset: 0; background: #142a2045; z-index: -1; }
.qr-step { gap: 18px; position: relative; z-index: 1; }
.qr-card { width: 128px; background: white; padding: 10px 8px 16px; border-radius: 17px; box-shadow: 0 12px 30px #0c241d24; position: relative; }
.qr-card::after { content: ''; position: absolute; inset: -5px; border: 2px solid #b5e0cc; border-radius: 21px; pointer-events: none; opacity: 0; }
.qr-symbol { display: block; width: 112px; height: 112px; border-radius: 0; background: white; }
.qr-symbol img { width: 100%; height: 100%; object-fit: contain; }
.qr-card strong { display: block; font-size: 12px; line-height: 1.5; margin-top: 8px; }
.qr-direction { margin: 0; width: 42px; height: 42px; display: grid; place-items: center; background: white; color: var(--accent); border-radius: 50%; font-size: 23px; }
.portal-preview { position: relative; z-index: 1; min-width: 0; box-shadow: 0 18px 50px #11271f40; }
.portal-preview-agent { position: relative; }
.portal-preview .app-avatar > .og-brand-mark { width: 68%; height: 68%; filter: brightness(0) invert(1); }
.hero-real-brand > span > .og-brand-mark { width: 74%; height: 74%; }
.widget-mini-ask > .og-brand-mark { width: 24px; height: 24px; flex: none; }
.portal-preview-agent::after { content: ''; position: absolute; inset: -3px; border: 2px solid #176b4d; border-radius: 15px; opacity: 0; pointer-events: none; }
.portal-preview-cover { height: 177px; }

/* The chat itself explains translation. No extra fake compose box below it. */
.language-route { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; color: var(--accent); }
.language-route > span { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 650; }
.language-route b { display: grid; place-items: center; width: 40px; height: 40px; background: white; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.language-route > .nb-icon { width: 22px; height: 22px; }
.translation-demo .conversation-preview { box-shadow: 0 12px 32px #173c2710; }
.translation-demo .preview-compose { display: none; }
.translation-demo .hc-transcript { padding: 24px 20px; gap: 22px; }
.translation-demo .hc-message { max-width: 95%; }
.translation-demo .hc-message-body { font-size: 15px; }
.translation-demo .guest-delivery { margin: 18px 0 0 45px; padding: 17px 20px; border: 1px solid #bed8ca; border-radius: 16px; background: #e5f1e9; }
.translation-demo .guest-delivery > p { font-size: 16px; }

/* Scene 03 has the exact same copy/visual grid as 01; 02 remains reversed. */
.ticket-scene { border-radius: 28px; background: #edf2ee; overflow: hidden; padding-bottom: 24px; }
.ticket-photo { position: relative; height: 280px; }
.ticket-photo img { width: 100%; height: 100%; object-fit: cover; }
.ticket-photo > span { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 8px; border: 1px solid #ffffff65; background: #14281fcf; color: white; padding: 8px 12px; border-radius: 9px; font-size: 11px; }
.ticket-scene .ticket-preview { position: relative; margin: -48px 24px 0; background: white; padding: 23px; border: 1px solid #dae5de; box-shadow: 0 12px 35px #18352210; }
.ticket-scene .ticket-preview-head { flex-wrap: nowrap; gap: 12px; }
.ticket-scene .ticket-preview-head strong { font-size: 16px; }
.ticket-scene .ticket-preview-head .icon-box { width: 42px; height: 42px; border-radius: 12px; font-size: 19px; }
.ticket-scene .ticket-preview > p { font-size: 14px; margin: 18px 0; }
.ticket-status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; border-block: 1px solid var(--line); padding: 13px 0; }
.ticket-status { display: grid; align-items: center; min-width: 90px; }
.ticket-status > .tag { grid-area: 1/1; justify-content: center; gap: 5px; min-height: 30px; }
.ticket-status-new { opacity: 0; pointer-events: none; }
.ticket-timeline { display: grid; gap: 16px; margin-top: 20px; }
.ticket-timeline > span { display: flex; gap: 10px; align-items: center; }
.ticket-timeline > span > .nb-icon { color: var(--accent); width: 21px; height: 21px; }
.ticket-timeline strong { display: block; font-size: 11px; font-weight: 650; }
.ticket-timeline small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Three visual examples replace the former all-text list of Pro extras. */
.pro-extension { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 48px; margin-top: 62px; }
.pro-extension-title { display: block; grid-column: 1/-1; margin-bottom: 5px; }
.pro-extension-title .eyebrow { margin-bottom: 12px; }
.pro-extension-title h3 { font-size: 28px; }
.extension-item { display: flex; flex-direction: column; min-width: 0; border: 0; padding: 0; }
.extension-visual { position: relative; display: block; aspect-ratio: 1.5; width: 100%; overflow: hidden; border-radius: 18px; background: var(--soft); margin: 0 0 21px; flex-shrink: 0; }
.extension-visual > img { width: 100%; height: 100%; object-fit: cover; }
.extension-item h4 { font-size: 18px; margin: 0; }
.extension-item > p { font-size: 14px; line-height: 1.7; margin-top: 10px; }
.extension-item > .button { margin-top: 21px; align-self: flex-start; }
.extension-visual.widget-mini { max-width: none; display: flex; flex-direction: column; border: 1px solid #c6dcd0; }
.extension-visual .widget-mini-cover { flex: 1; padding: 24px 24px 38px; }
.extension-visual .widget-mini-cover strong { font-size: clamp(22px, 2.1vw, 30px); }
.extension-visual .widget-mini-cover small { font-size: 8px; margin-bottom: 16px; }
.extension-visual .widget-mini-ask { font-size: 12px; padding: 15px; margin: -22px 17px 17px; gap: 10px; }
.extension-visual .widget-mini-ask > .nb-icon { font-size: 22px; }
.extension-overlay { position: absolute; inset: auto 14px 14px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: #fffffffa; padding: 13px; color: var(--accent); }
.extension-overlay > .nb-icon { width: 30px; height: 30px; padding: 5px; background: var(--mint); border-radius: 9px; }
.extension-overlay strong { display: block; font-size: 12px; }
.extension-overlay small { display: block; font-size: 9px; margin-top: 3px; color: var(--muted); }
.review-question { position: absolute; left: 25px; right: 25px; bottom: 19px; padding: 17px; background: white; border-radius: 14px; text-align: center; }
.review-question > strong { display: block; font-size: 13px; }
.review-stars { display: flex; justify-content: center; gap: 9px; margin-top: 10px; }
.review-stars svg { width: 23px; height: 23px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.ownership-note > .button, .pilot-strip > .button, .return-addon > .button { margin-left: auto; flex-shrink: 0; }
.pricing-footnote { margin-top: 22px; }
.faq-more { margin-top: 28px; }

/* Finite motion: play once on entry, then only when the reader requests replay. */
@keyframes scene-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-ring { 0%, 100% { opacity: 0; transform: scale(1); } 35%, 65% { opacity: 1; transform: scale(1.03); } }
@keyframes scene-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes scene-new { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scene-sync { from { transform: rotate(0); } to { transform: rotate(180deg); } }
[data-story-motion].is-playing .qr-card::after { animation: scene-ring 1.2s ease both; }
[data-story-motion].is-playing .qr-direction > .nb-icon { animation: scene-arrow .8s .65s ease both; }
[data-story-motion].is-playing .portal-preview-agent::after { animation: scene-ring 1.3s 1.15s ease both; }
[data-story-motion].is-playing .language-route > .nb-icon { animation: scene-sync .7s .8s ease both; }
[data-story-motion].is-playing .hc-message.user { animation: scene-enter .6s ease both; }
[data-story-motion].is-playing .hc-message.host { animation: scene-enter .6s 1s ease both; }
[data-story-motion].is-playing .guest-delivery { animation: scene-enter .6s 2s ease both; }
[data-story-motion].is-playing .ticket-preview { animation: scene-enter .6s ease both; }
[data-story-motion].is-playing .ticket-status-new { animation: scene-new 2s ease both; }
[data-story-motion].is-playing .ticket-status > .tag:first-child { animation: scene-enter .5s 1.8s ease both; }
[data-story-motion].is-playing .ticket-accepted { animation: scene-enter .6s 2s ease both; }

@media (max-width: 1050px) and (min-width: 801px) {
  .portal-demo { grid-template-columns: 102px minmax(0, 1fr); padding: 26px 12px; gap: 12px; }
  .qr-card { width: 102px; padding: 6px 3px 12px; }
  .qr-symbol { width: 96px; height: 96px; }
  .qr-card strong { font-size: 11px; }
  .portal-preview-cover h3 { font-size: 22px; }
  .portal-preview-header small { display: none; }
  .ticket-scene .ticket-preview { margin-inline: 16px; padding: 19px; }
}
@media (max-width: 800px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-visual { width: 100%; max-width: 580px; margin-inline: auto; }
  .portal-demo { grid-template-columns: 128px minmax(0, 300px); gap: 28px; padding: 32px 25px; }
  .story-copy { text-align: left; }
  .pro-extension { gap: 24px 18px; }
  .extension-item h4 { font-size: 15px; }
  .extension-item > p { font-size: 12px; }
  .extension-visual { aspect-ratio: 1.1; }
  .extension-visual .widget-mini-cover { padding: 17px 14px 25px; }
  .extension-visual .widget-mini-cover strong { font-size: 21px; }
  .extension-visual .widget-mini-cover small { font-size: 6px; margin-bottom: 9px; }
  .extension-visual .widget-mini-ask { font-size: 10px; padding: 10px; margin-inline: 9px; }
  .extension-overlay { inset-inline: 9px; padding: 10px; }
  .extension-overlay > .nb-icon { display: none; }
  .review-question { inset-inline: 10px; padding: 12px; }
  .review-stars { gap: 4px; }
  .review-stars svg { width: 20px; height: 20px; }
  .ownership-note > .button, .pilot-strip > .button, .return-addon > .button { margin-left: 0; }
}
@media (max-width: 540px) {
  :root { --cta-type: 13px; }
  .button, .hero-actions .button, .price-card > .button, .demo-banner .button, .nav-links > .button { padding-inline: 18px; gap: 10px; }
  .story-copy > .button { max-width: 100%; }
  .portal-demo { display: flex; flex-direction: column; padding: 22px 16px; gap: 20px; border-radius: 22px; }
  .portal-scene-photo { object-position: 25% center; }
  .qr-step { flex-direction: row; width: 100%; max-width: 300px; justify-content: space-between; gap: 15px; }
  .qr-card { display: flex; align-items: center; gap: 9px; width: auto; padding: 7px 14px 7px 7px; border-radius: 15px; }
  .qr-symbol { width: 96px; height: 96px; flex-shrink: 0; }
  .qr-card strong { font-size: 12px; margin: 0; text-align: left; }
  .qr-direction { flex-shrink: 0; width: 36px; height: 36px; font-size: 20px; transform: rotate(90deg); }
  .portal-preview { width: 100%; max-width: 300px; }
  .portal-preview-header strong { font-size: 12px; }
  .portal-preview-header small { font-size: 8px; }
  .portal-preview-cover { height: 165px; }
  .portal-preview-agent strong { font-size: 12px; }
  .portal-preview-agent small { font-size: 8px; }
  .portal-preview-actions strong { font-size: 9px; }
  .portal-preview-nav { font-size: 7px; }
  .scene-caption { gap: 9px; }
  .scene-caption > small, .local-qr-note { font-size: 9px; }
  .translation-demo .hc-thread-head { padding: 15px 12px; }
  .translation-demo .hc-transcript { padding: 20px 12px; gap: 18px; }
  .translation-demo .hc-message-body { font-size: 14px; }
  .translation-demo .guest-delivery { margin-left: 20px; padding: 15px; }
  .translation-demo .guest-delivery > p { font-size: 14px; }
  .ticket-photo { height: 240px; }
  .ticket-scene { border-radius: 22px; padding-bottom: 16px; }
  .ticket-scene .ticket-preview { margin-inline: 12px; padding: 18px 15px; }
  .ticket-scene .ticket-preview-head .icon-box { width: 35px; height: 35px; font-size: 17px; flex-shrink: 0; }
  .ticket-scene .ticket-preview-head strong { font-size: 14px; }
  .ticket-scene .ticket-preview-head small { font-size: 9px; }
  .ticket-scene .ticket-preview > p { font-size: 13px; }
  .ticket-photo > span { top: 16px; left: 16px; font-size: 10px; }
  .pro-extension { grid-template-columns: minmax(0, 1fr); margin-top: 35px; padding-top: 30px; gap: 32px; }
  .pro-extension-title { margin: 0; }
  .pro-extension-title h3 { font-size: 25px; max-width: 330px; }
  .extension-item { padding: 0; border: 0; }
  .extension-visual { aspect-ratio: 1.5; margin-bottom: 17px; }
  .extension-item h4 { font-size: 19px; }
  .extension-item > p { font-size: 14px; margin-top: 9px; }
  .extension-visual .widget-mini-cover { padding: 24px 22px 32px; }
  .extension-visual .widget-mini-cover strong { font-size: 28px; }
  .extension-visual .widget-mini-cover small { font-size: 8px; }
  .extension-visual .widget-mini-ask { margin-inline: 16px; padding: 13px; font-size: 12px; }
  .extension-overlay { inset-inline: 15px; padding: 13px; }
  .extension-overlay > .nb-icon { display: inline-flex; }
  .review-question { inset-inline: 25px; padding: 15px; }
  .review-stars { gap: 9px; }
  .review-stars svg { width: 23px; height: 23px; }
  .pricing-footnote { gap: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-story-motion] *, [data-story-motion] *::after { animation: none !important; }
  .scene-replay { display: none !important; }
}