/* ChachlaPay presentation of the interactive withdrawal story. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-Medium.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Inter-Bold.woff2') format('woff2')}
body {
  --bg:var(--cashier-bg-canvas);
  --paper:var(--cashier-bg-surface);
  --ink:var(--cashier-text-primary);
  --muted:var(--cashier-text-secondary);
  --line:var(--cashier-border-subtle);
  --green:var(--cashier-text-accent);
  --green-dark:var(--cashier-action-primary);
  --amber:var(--cashier-status-pending-text);
  --amber-bg:var(--cashier-status-pending-bg);
  --violet:var(--cashier-status-info-text);
  --violet-bg:var(--cashier-status-info-bg);
  --shadow:var(--cashier-shadow-card);
  --font:var(--cashier-font-family-ui);
  background:var(--cashier-bg-canvas);
  color:var(--cashier-text-primary);
}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cashier-focus-ring);outline-offset:3px;box-shadow:0 0 0 1px var(--cashier-focus-gap)}
button:disabled{opacity:.55}
button:active:not(:disabled){transform:none}
.site-header{height:96px;border-color:var(--cashier-border-subtle)}
.wordmark{gap:12px}
.wordmark img{display:block;width:214px;height:auto}
.wordmark-divider{background:var(--cashier-border-subtle);margin-left:12px}
.wordmark-caption{color:var(--cashier-text-secondary);font-size:12px}
.simulation-pill{color:var(--cashier-text-accent);border-color:var(--cashier-border-subtle);background:var(--cashier-bg-surface);font-size:11px}
.simulation-pill>span{background:var(--cashier-text-accent)}
.text-button{min-height:44px;color:var(--cashier-text-secondary)}
.text-button:hover{color:var(--cashier-text-primary)}
.hero{padding-block:48px 40px}
.eyebrow{color:var(--cashier-text-accent)}
.eyebrow-line{background:var(--cashier-text-accent)}
h1{font-weight:600;letter-spacing:-.04em}
h1>span{color:var(--cashier-text-secondary)}
.hero-aside{max-width:390px;padding-right:0}
.hero-aside p{font-size:14px}
.hero-aside .hero-small{color:var(--cashier-text-secondary);font-size:12px}
.experience{background:var(--cashier-bg-canvas);border-color:var(--cashier-border-subtle);box-shadow:none;border-radius:20px}
.experience-toolbar{background:var(--cashier-bg-surface);border-color:var(--cashier-border-subtle)}
.control-label{color:var(--cashier-text-secondary)}
.segmented{background:var(--cashier-bg-canvas);border-color:var(--cashier-border-control)}
.segmented button{color:var(--cashier-text-secondary);min-height:38px;font-size:12px}
.segmented button:hover{background:var(--cashier-bg-raised);color:var(--cashier-text-primary)}
.segmented button[aria-pressed=true]{color:var(--cashier-text-primary);background:var(--cashier-bg-selected);box-shadow:inset 0 -2px var(--cashier-text-accent)}
.story-heading{padding-block:24px}
.story-heading h2{font-size:17px}
.story-number,.story-subtitle,.perspective-number,.perspective-label>span:last-child,.perspective-caption{color:var(--cashier-text-secondary)}
.story-subtitle{font-size:12px}
.icon-button{width:44px;height:44px;color:var(--cashier-text-secondary)}
.icon-button:hover{background:var(--cashier-bg-raised);color:var(--cashier-text-primary)}
.perspective-label h3{font-size:13px;font-weight:600}
.perspective-caption{font-size:11px}
.customer-stage{background:var(--cashier-color-cool-porcelain);background-image:none;border-radius:12px}
.phone {
  --amber:var(--cashier-status-pending-text);
  --amber-bg:var(--cashier-status-pending-bg);
  --violet:var(--cashier-status-info-text);
  --violet-bg:var(--cashier-status-info-bg);
  color:var(--cashier-text-primary);background:var(--cashier-bg-surface);
  border-color:var(--cashier-bg-surface);box-shadow:0 6px 24px rgb(24 33 58 / 12%);
}
.phone-island,.phone-home{background:var(--cashier-text-primary)}
.phone-brand{border-color:var(--cashier-border-subtle)}
.mini-logo{background:var(--cashier-color-dark-ink);color:var(--cashier-color-white)}
.phone-brand>div>span{color:var(--cashier-text-secondary)}
.phone-avatar{background:var(--cashier-bg-raised);border-color:var(--cashier-border-subtle);color:var(--cashier-text-secondary)}
.customer-icon{color:var(--cashier-status-pending-text);background:var(--cashier-status-pending-bg)}
.customer-icon:after{border-color:var(--cashier-border-subtle)}
.tone-success .customer-icon{background:var(--cashier-status-success-bg);color:var(--cashier-status-success-text)}
.tone-review .customer-icon{background:var(--cashier-status-pending-bg);color:var(--cashier-status-pending-text)}
.tone-neutral .customer-icon{background:var(--cashier-status-info-bg);color:var(--cashier-status-info-text)}
.customer-small-label,.customer-amount span,.customer-description,.customer-account-heading,.balance-row,.phone-footer{color:var(--cashier-text-secondary)}
.customer-description{font-size:12px;line-height:1.55;max-width:210px}
.customer-content h4{font-size:15px}
.customer-amount{font-variant-numeric:tabular-nums lining-nums}
.customer-progress span{background:var(--cashier-border-subtle)}
.customer-progress span.done{background:var(--cashier-text-accent)}
.customer-progress span.current{background:var(--cashier-text-accent);box-shadow:0 0 0 1px var(--cashier-bg-surface)}
.customer-account{background:var(--cashier-bg-raised);border-color:var(--cashier-border-subtle)}
.customer-account-heading>span:last-child{border-color:var(--cashier-border-control)}
.balance-row strong{color:var(--cashier-text-primary)}
.balance-row.held strong{color:var(--cashier-status-pending-text)}
.phone-footer{font-size:9px}
.operator-card,.ai-card{background:var(--cashier-bg-surface);border-color:var(--cashier-border-subtle);box-shadow:none;border-radius:12px}
.operation-symbol{background:var(--cashier-bg-raised);border-color:var(--cashier-border-subtle);color:var(--cashier-text-accent)}
.small-label,.operator-top h4>span,.operation-meta,.state-grid span,.timeline-heading>span,.event-first-row time,.event-detail,.event-source,.operator-footer{color:var(--cashier-text-secondary)}
.operator-top h4{font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.status-badge{background:var(--cashier-status-pending-bg);color:var(--cashier-status-pending-text);font-size:10px}
.status-badge.success{background:var(--cashier-status-success-bg);color:var(--cashier-status-success-text)}
.status-badge.review{background:var(--cashier-status-pending-bg);color:var(--cashier-status-pending-text)}
.status-badge.neutral{background:var(--cashier-status-info-bg);color:var(--cashier-status-info-text)}
.meta-dot{background:var(--cashier-text-secondary)}
.state-grid,.state-grid>div+div{border-color:var(--cashier-border-subtle)}
.state-grid strong{color:var(--cashier-text-primary)}
.state-grid strong.waiting{color:var(--cashier-status-pending-text)}
.state-grid strong.success{color:var(--cashier-status-success-text)}
.timeline-scroll,.ai-answer{scrollbar-color:var(--cashier-border-control) transparent}
.timeline li:not(:last-child):before{background:var(--cashier-border-subtle)}
.event-marker{background:var(--cashier-status-success-bg);border-color:var(--cashier-status-success-bg);color:var(--cashier-status-success-text)}
.event-marker.waiting,.event-marker.review{background:var(--cashier-status-pending-bg);border-color:var(--cashier-status-pending-bg);color:var(--cashier-status-pending-text)}
.event-button:hover{background:var(--cashier-bg-raised)}
.event-first-row strong,.timeline li:last-child .event-first-row strong{color:var(--cashier-text-primary);font-size:12px}
.event-detail{font-size:11px}
.event-source{border-color:var(--cashier-border-subtle);font-size:9px}
.operator-footer{background:var(--cashier-bg-raised);border-color:var(--cashier-border-subtle);font-size:11px}
.ai-card{border-color:#54498b}
.ai-top{border-color:var(--cashier-border-subtle)}
.ai-symbol{background:var(--cashier-bg-selected);border-color:var(--cashier-border-subtle);color:var(--cashier-text-accent)}
.ai-top h4{font-size:13px;font-weight:600}
.ai-top>div>span{color:var(--cashier-text-secondary)}
.ai-status-dot{background:var(--cashier-text-accent)}
.query-avatar{background:var(--cashier-bg-raised);color:var(--cashier-text-secondary)}
.ai-query p{background:var(--cashier-bg-raised);border-color:var(--cashier-border-subtle);color:var(--cashier-text-primary);font-size:12px}
.ai-answer{border-color:var(--cashier-border-subtle)}
.answer-kicker{color:var(--cashier-text-accent);font-size:9px}
.ai-answer h5{font-size:19px;font-weight:600;color:var(--cashier-text-primary)}
.answer-summary,.next-action p{color:var(--cashier-text-secondary);font-size:12px}
.ai-facts li{color:var(--cashier-text-primary);font-size:12px}
.fact-bullet{background:var(--cashier-evidence)}
.evidence-citation{border-color:var(--cashier-evidence);background:var(--cashier-evidence-bg);color:var(--cashier-evidence);min-width:26px;height:26px;font-size:11px}
.evidence-citation:hover{background:var(--cashier-bg-raised)}
.next-action{border-color:var(--cashier-border-subtle)}
.next-action>span{color:var(--cashier-text-accent);font-size:10px}
.question-choices{border-color:var(--cashier-border-subtle)}
.question-choices button{background:var(--cashier-bg-surface);color:var(--cashier-text-secondary);border-color:var(--cashier-border-control);min-height:36px;font-size:11px}
.question-choices button:hover,.question-choices button[aria-pressed=true]{background:var(--cashier-bg-selected);border-color:var(--cashier-text-accent);color:var(--cashier-text-primary)}
.ai-disclosure{background:var(--cashier-bg-raised);color:var(--cashier-text-secondary);border-color:var(--cashier-border-subtle);font-size:10px}
.playback{background:var(--cashier-bg-surface);border-color:var(--cashier-border-subtle)}
.primary-button{background:var(--cashier-action-primary);color:var(--cashier-action-primary-text);border-color:var(--cashier-action-primary);min-height:44px;font-size:12px}
.primary-button:hover{background:var(--cashier-action-primary-hover);box-shadow:none;border-color:var(--cashier-action-primary-hover)}
.primary-button:active:not(:disabled){background:var(--cashier-action-primary-active)}
.step-button{color:var(--cashier-text-secondary)}
.step-button:not(:last-child):before{background:var(--cashier-border-control)}
.step-button .step-dot{background:var(--cashier-bg-surface);border-color:var(--cashier-border-control);width:18px;height:18px;font-size:9px}
.step-button .step-label{color:var(--cashier-text-secondary);font-size:10px}
.step-button.past .step-dot{background:var(--cashier-bg-selected);color:var(--cashier-text-accent);border-color:var(--cashier-text-accent)}
.step-button.past:before{background:var(--cashier-text-accent)}
.step-button[aria-current=step] .step-dot{background:var(--cashier-action-primary);border-color:var(--cashier-action-primary);color:var(--cashier-action-primary-text);box-shadow:0 0 0 3px var(--cashier-bg-selected)}
.step-button[aria-current=step] .step-label{color:var(--cashier-text-primary)}
.step-button:hover .step-dot{border-color:var(--cashier-text-accent)}
.next-button{color:var(--cashier-text-accent);font-size:12px;min-height:44px}
.simulation-note{background:var(--cashier-bg-canvas);color:var(--cashier-text-secondary);border-color:var(--cashier-border-subtle);font-size:11px}
.simulation-note>span:last-child{font-size:9px}
.simulation-dot{background:var(--cashier-text-accent)}
.closing>p,.closing>div p>span{color:var(--cashier-text-secondary)}
.closing>p strong,.closing>div strong{color:var(--cashier-text-primary)}
.closing>div>span{color:var(--cashier-evidence)}
.closing>div strong{font-size:12px}
.closing>div p>span{font-size:12px}
.site-footer{color:var(--cashier-text-secondary);font-size:11px}
.footer-separator{color:var(--cashier-border-control)}
dialog{background:var(--cashier-bg-surface);border-color:var(--cashier-border-control);color:var(--cashier-text-primary);box-shadow:var(--cashier-shadow-overlay)}
dialog::backdrop{background:rgb(11 16 32 / 75%);backdrop-filter:blur(5px)}
#dialog-content{color:var(--cashier-text-secondary);font-size:14px}
#dialog-content dl{background:var(--cashier-bg-raised);font-size:12px}
#dialog-content dt{color:var(--cashier-text-secondary);font-size:10px}
#dialog-content dd{color:var(--cashier-text-primary)}
.toast{background:var(--cashier-bg-raised);color:var(--cashier-text-primary);border:1px solid var(--cashier-border-control);box-shadow:var(--cashier-shadow-overlay)}
.skip-link{background:var(--cashier-action-primary);color:var(--cashier-action-primary-text)}
.share-input{background:var(--cashier-bg-canvas);border-color:var(--cashier-border-control);color:var(--cashier-text-primary)}
body.embed{background:var(--cashier-bg-canvas)}
body.embed .experience{border:0;border-radius:0}
@keyframes evidence-flash{0%,40%{background:var(--cashier-evidence-bg)}100%{background:transparent}}
@media(min-width:901px) and (max-width:1150px){.status-badge{font-size:10px}.operator-top{flex-wrap:wrap}.status-badge{margin-left:0}.operation-meta{font-size:9px}}
@media(max-width:900px){.hero-aside{max-width:290px}.ai-answer{border-color:var(--cashier-border-subtle)}.wordmark-caption,.wordmark-divider{display:none}.site-header{gap:16px}.header-actions{gap:16px}}
@media(max-width:600px){
  .site-header{height:80px}.wordmark img{width:180px}.simulation-pill{font-size:9px;padding:6px 8px;gap:5px}.header-actions{gap:0}
  .hero{padding-block:32px}.hero-aside{max-width:none}.hero-aside p{font-size:14px}h1{font-size:40px}
  .segmented button{font-size:11px;min-height:40px}.story-heading h2{font-size:15px}.perspective-label h3{font-size:13px}
  .question-choices{border-color:var(--cashier-border-subtle)}.question-choices button{min-height:40px;font-size:11px}
  .step-button .step-label{font-size:9px}.simulation-note{font-size:10px;align-items:flex-start}.simulation-note>span:last-child{font-size:8px}
  .customer-stage{padding-block:16px;height:auto;min-height:565px}.customer-content{min-height:365px}.phone{min-height:523px}
  .ai-card{height:auto;min-height:560px}.ai-answer{overflow:visible}.site-footer{font-size:11px}.closing>div p>span{font-size:12px}
}
@media(max-width:360px){.site-header{height:auto;min-height:80px;flex-wrap:wrap;gap:4px;padding-block:12px}.simulation-pill{margin-left:5px}.step-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(forced-colors:active){button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid Highlight}.segmented button[aria-pressed=true],.question-choices button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-3px}.step-button[aria-current=step] .step-dot{border:2px solid Highlight}}

/* Keep the story controls beside the context they change. */
.playback{border-bottom:1px solid var(--cashier-border-subtle)}
.playback-controls{flex-shrink:0}
.moment-context{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 18px}
.moment-context p{display:flex;align-items:center;gap:12px;margin:0}
.moment-context p>span{color:var(--cashier-text-accent);font-size:9px;font-weight:600;letter-spacing:1.1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.moment-context strong{font-size:12px;font-weight:600}
.moment-context>span{font-size:11px;color:var(--cashier-text-secondary)}
.perspective-switcher{display:none}
.perspective[hidden]{display:none}
.evidence-hint{margin:-6px 18px 13px;font-size:10px;line-height:1.5;color:var(--cashier-text-secondary)}
.demo-about{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:0;border:0;background:transparent;color:var(--cashier-text-secondary);font-size:11px;min-height:32px}
.demo-about:hover{color:var(--cashier-text-primary)}
.demo-about svg{width:14px;height:14px}
.simulation-note{align-items:center}
.simulation-note>span:first-child{line-height:1.6}
.simulation-dot{flex-shrink:0}
dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.dialog-heading{position:sticky;top:-24px;background:var(--cashier-bg-surface);z-index:1;padding-block:8px}
.toast{max-width:calc(100% - 32px);text-align:center}
@media(max-width:900px){.moment-context{padding-inline:18px}.moment-context>span{display:none}}
@media(max-width:600px){
  .playback{padding:14px 13px;gap:16px}
  .step-track{padding-top:0}
  .moment-context{padding:18px 14px 14px}
  .moment-context p{gap:10px;flex-wrap:wrap}
  .moment-context strong{font-size:12px}
  .perspective-switcher{display:flex;margin:0 13px 18px;padding:4px;border:1px solid var(--cashier-border-control);border-radius:9px;background:var(--cashier-bg-surface);gap:4px}
  .perspective-switcher button{flex:1;min-width:0;min-height:44px;padding:8px 4px;border:0;border-radius:5px;background:transparent;color:var(--cashier-text-secondary);font-size:11px;font-weight:600}
  .perspective-switcher button[aria-selected=true]{background:var(--cashier-bg-selected);color:var(--cashier-text-primary);box-shadow:inset 0 -2px var(--cashier-text-accent)}
  .perspectives{gap:0}
  .perspective:focus-visible{outline:2px solid var(--cashier-focus-ring);outline-offset:5px;border-radius:8px}
  .operator-card{height:590px}
  .evidence-hint{margin-inline:20px;font-size:11px}
  .evidence-citation{min-width:36px;height:36px;margin-left:6px;font-size:12px;vertical-align:middle}
  .question-choices button{min-height:44px}
  .simulation-note{flex-direction:column;align-items:flex-start;gap:4px;padding-block:12px}
  .demo-about{min-height:44px;font-size:11px}
  dialog{width:calc(100% - 24px);padding:20px;border-radius:14px}
  .dialog-heading{top:-20px}
  dialog h2{font-size:23px}
}
@media(forced-colors:active){.perspective-switcher button[aria-selected=true]{outline:2px solid Highlight;outline-offset:-3px}}
@media(max-width:380px){
  .playback{column-gap:8px}
  .playback-controls{gap:3px}
  .playback .primary-button{padding-inline:12px}
  .operator-top{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 10px}
  .operator-top .status-badge{grid-column:2;justify-self:start;margin-left:0}
  .operator-top h4{white-space:nowrap}
}