/* Matte graphite objects, with separate motion for connections, layers and signals. */
.orchestration-model { width:100%; max-width:660px; margin-inline:auto; position:relative; isolation:isolate; --model-lift:-4px; --model-tilt:.4deg; --model-duration:9s; }
.model-object { position:relative; aspect-ratio:3/2; transform-origin:50% 60%; animation:model-suspension var(--model-duration) ease-in-out infinite; }
.model-artwork { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.model-motion { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.model-signal { stroke:#ffd092; stroke-width:4; stroke-linecap:round; stroke-dasharray:5 95; animation:model-signal 4s linear infinite; animation-delay:var(--signal-delay,0s); }
.orchestration-model--overview { max-width:720px; --model-lift:-3px; --model-tilt:0deg; --model-duration:12s; }
.orchestration-model--connect { --model-lift:-3px; --model-tilt:0deg; --model-duration:10s; }
.orchestration-model--platform { --model-lift:-3px; --model-tilt:0deg; --model-duration:8s; }
.orchestration-model--routing { --model-lift:-3px; --model-tilt:-.35deg; --model-duration:11s; }
.orchestration-model--cards { --model-lift:-5px; --model-tilt:1deg; --model-duration:10s; }
.orchestration-model--bank { --model-lift:-3px; --model-tilt:0deg; --model-duration:12s; }
.orchestration-model--wallet { --model-lift:-5px; --model-tilt:-.6deg; --model-duration:9s; }
.family-heading .orchestration-model { max-width:420px; margin-top:24px; }
.solutions-tabs .solutions-payments .solution-chapter { align-items:center; }
@keyframes model-suspension { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(var(--model-lift)) rotate(var(--model-tilt)); } }
@keyframes model-signal { to { stroke-dashoffset:-100; } }
/* About tells three chapters, then opens into a single branded values stage. */
.about-stories { padding-block:24px 48px; }
.about-narrative { display:grid; gap:0; }
.about-chapter { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,6vw,96px); padding-block:56px; }
.about-chapter-copy { display:grid; gap:24px; max-width:560px; }
.about-chapter h2 { font-size:clamp(32px,3.4vw,50px); font-weight:500; line-height:1.12; letter-spacing:-.045em; }
.about-chapter p { font-size:16px; line-height:1.85; color:#bcbcbc; }
.about-chapter-art { min-width:0; position:relative; padding:16px; }
.about-chapter:nth-child(odd) .about-chapter-art { grid-column:1; grid-row:1; }
.about-chapter:nth-child(odd) .about-chapter-copy { grid-column:2; }
.about-chapter--1 { background:radial-gradient(ellipse at 25% 50%,#ff790008,transparent 65%); }
.about-values { padding-block:24px 96px; }
.about-values-frame { position:relative; display:grid; grid-template-columns:.65fr 1.35fr; gap:40px; padding:48px; border:1px solid #ffffff18; border-radius:32px; background:linear-gradient(120deg,#1b1916b0,#0d0d0ce8 65%); overflow:hidden; }
.about-values-art { position:relative; display:grid; place-items:center; min-width:0; align-self:stretch; }
.about-values-art img { width:100%; max-width:300px; height:auto; position:relative; z-index:1; animation:about-mark 10s ease-in-out infinite; mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent); }
.about-values-orbit { position:absolute; width:95%; aspect-ratio:1; border:1px solid #ff79001c; border-radius:50%; transform:rotateX(55deg) rotateZ(-25deg); }
.about-values-content { min-width:0; }
.about-value-panel { position:relative; padding-top:40px; min-height:350px; display:grid; align-content:start; gap:24px; }
.about-value-panel h2 { max-width:580px; font-size:clamp(32px,3.3vw,48px); font-weight:500; line-height:1.12; letter-spacing:-.045em; }
.about-value-copy p { font-size:16px; line-height:1.85; color:#bcbcbc; }
.about-value-copy p+p { margin-top:20px; }
@keyframes about-mark { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
.orchestration-model:not(.motion-visible) *,.about-values-art:not(.motion-visible) * { animation-play-state:paused; }
@media(max-width:1000px) {
 .about-chapter { gap:32px; padding-block:40px; }
 .about-chapter p { font-size:15px; }
 .about-values-frame { grid-template-columns:.4fr 1fr; padding:32px; gap:24px; }
}
@media(max-width:650px) {
 .orchestration-model { max-width:520px; }
 .about-stories { padding-block:8px 24px; }
 .about-chapter { grid-template-columns:1fr; gap:16px; padding-block:32px; }
 .about-chapter-copy { gap:20px; }
 .about-chapter-art { padding:0; }
 .about-chapter:nth-child(odd) .about-chapter-copy,.about-chapter:nth-child(odd) .about-chapter-art { grid-column:auto; grid-row:auto; }
 .about-values { padding-block:16px 56px; }
 .about-values-frame { grid-template-columns:1fr; padding:24px; gap:0; border-radius:24px; }
 .about-values-art { position:absolute; top:110px; right:-45px; width:220px; opacity:.12; pointer-events:none; }
 .about-values-content { position:relative; z-index:1; }
 .about-value-panel { min-height:390px; padding-top:24px; }
 .about-value-copy p { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
 .orchestration-model *,.about-values-art * { animation:none!important; }
 .model-signal { opacity:0; }
}
/* Assembled scenes keep surfaces, typography and motion in one coordinate frame. */
.orchestration-model--assembled { aspect-ratio:640/460; }
.assembled-scene.model-motion { position:relative; display:block; width:100%; height:auto; overflow:visible; }
.scene-face { stroke:#686968; stroke-width:1; }
.scene-side { fill:#121313; stroke:#343535; stroke-width:1; }
.scene-tile--brand .scene-face { stroke:#a16a36; }
.scene-label { fill:#bcbcbc; font-family:var(--font); font-size:16px; }
.scene-label--accent { fill:#d09a60; font-size:14px; }
.scene-icon { fill:none; stroke:#c3c0b9; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.scene-icon--muted { opacity:.4; }
.scene-wire { stroke:#6e4c2e; stroke-width:2; stroke-linecap:round; }
.scene-packet { stroke:#ffb365; stroke-width:3; stroke-linecap:round; stroke-dasharray:13 87; animation:scene-transfer 3.6s linear infinite; animation-delay:var(--packet-delay,0s); }
.scene-status { fill:#ff7900; animation:scene-status 3.6s ease-in-out infinite; animation-delay:var(--status-delay,0s); }
.scene-divider { stroke:#ffffff14; }
.scene-module { fill:#171819; stroke:#ffffff16; }
.scene-phone { animation:scene-phone 8s ease-in-out infinite; transform-origin:50% 50%; }
.phone-method { fill:#202122; stroke:#555653; stroke-width:1; }
.phone-signal { stroke:#ff9b41; }
.phone-signal path { animation:scene-status 2.8s ease-in-out infinite; }
.phone-signal path:nth-child(2) { animation-delay:.3s; }
.phone-signal path:nth-child(3) { animation-delay:.6s; }
/* Align the category heading with the provider list, not the combined height of the illustration. */
.brand-tabs .payment-family { align-items:start; }
.family-heading { position:relative; padding-top:30px; }
.family-heading .family-kicker { position:absolute; top:5px; left:0; }
.family-heading h2 { margin-top:0; }
.family-heading .orchestration-model { margin-top:32px; max-width:480px; }
@keyframes scene-transfer { 0% { stroke-dashoffset:13; opacity:0; } 8%,82% { opacity:1; } 100% { stroke-dashoffset:-100; opacity:0; } }
@keyframes scene-status { 0%,100% { opacity:.4; } 45%,65% { opacity:1; } }
@keyframes scene-phone { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media(prefers-reduced-motion:reduce) { .scene-packet { display:none; } }

.orchestration-model--bank.orchestration-model--assembled { aspect-ratio:640/300; }

.orchestration-model--bank .scene-packet { animation-name:bank-transfer; animation-duration:7.2s; }
@keyframes bank-transfer { 0% { stroke-dashoffset:13; opacity:0; } 5% { opacity:1; } 40% { stroke-dashoffset:-100; opacity:1; } 45%,100% { stroke-dashoffset:-100; opacity:0; } }

/* Keep the next category and values stage in the alternating page rhythm. */
@media(min-width:651px) {
 .payment-family#family-APM { grid-template-columns:1.2fr .8fr; }
 #family-APM .family-heading { grid-column:2; grid-row:1; }
 #family-APM .family-methods { grid-column:1; grid-row:1; }
 .about-values-frame { grid-template-columns:1.35fr .65fr; }
 .about-values-content { grid-column:1; grid-row:1; }
 .about-values-art { grid-column:2; grid-row:1; }
}