.playbook-flow{position:relative;isolation:isolate;margin:0 4px;border-radius:36px;background:#f4f4f2;color:#202020;overflow:hidden}
.playbook-flow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% 45%,#e6e4e44d,transparent 55%),radial-gradient(ellipse at 12% 90%,#fff,transparent 50%);pointer-events:none}
.flow-layout{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(36px,6vw,100px);max-width:1320px;margin:auto;padding:32px clamp(32px,6vw,92px)}
.flow-copy{padding:80px 0;position:relative;z-index:1}
.flow-eyebrow{display:flex;align-items:center;gap:9px;color:#318640;font-size:11px;font-weight:700;letter-spacing:1.1px;margin:0 0 24px}
.flow-eyebrow>span{width:7px;height:7px;border-radius:50%;background:#6aba69;box-shadow:0 0 0 4px #72bf701a}
.playbook-flow #index-title{font-size:clamp(42px,4.6vw,66px);line-height:1.06;font-weight:600;letter-spacing:-.065em;margin:0 0 26px}
.flow-mark{display:inline-grid;place-items:center;width:.79em;height:.85em;vertical-align:.03em;margin:0 .03em;border-radius:.22em;background:linear-gradient(145deg,#f13f6b,#d5004b);box-shadow:0 6px 13px #d5004b32;color:#fff;font-size:.73em;line-height:1;letter-spacing:0;transform:rotate(-9deg)}
.flow-description{font-size:16px;line-height:1.75;color:#666461;max-width:365px;margin:0 0 30px}
.flow-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flow-primary,.flow-secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;border-radius:6px;padding:13px 18px;font-size:12px;line-height:1.3;font-weight:500;transition:transform .2s,box-shadow .2s}
.flow-primary{background:#242424;color:#fff;box-shadow:0 8px 15px #0002;border:1px solid #242424}
.flow-secondary{background:#fff;color:#242424;border:1px solid #e3e2e0;box-shadow:0 2px 3px #00000008;cursor:pointer;font-family:inherit}
.flow-primary:hover,.flow-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 18px #0002}
.flow-details{display:flex;gap:28px;margin-top:52px;align-items:flex-start}
.flow-detail-label{display:block;font-size:9px;letter-spacing:1px;color:#74716e;font-weight:600;margin-bottom:12px}
.flow-markets{display:flex;align-items:center;position:relative;flex-wrap:wrap;gap:0}
.flow-markets>span{display:grid;place-items:center;width:32px;height:32px;border:3px solid #f4f4f2;border-radius:50%;background:#e0e3e8;color:#3a4657;font-size:10px;font-weight:700;margin-left:-5px;box-shadow:0 3px 6px #0001}
.flow-markets>span:first-child{margin-left:0}.flow-markets>span:nth-child(2){background:#e9dfc4;color:#886628}.flow-markets>span:nth-child(3){background:#f3dbd8;color:#a64a3b}
.flow-markets p{flex-basis:100%;font-size:11px;color:#67625e;margin:9px 0 0}.flow-detail-value{font-size:13px;line-height:1.6;margin:0;color:#4a4642}
.flow-visual{min-width:0;position:relative}
.flow-window{padding:26px 18px}
.flow-cards{list-style:none;margin:0;padding:0 0 22px;display:grid;gap:22px}
.flow-card{background:linear-gradient(125deg,#fff,#fdfdfc);border:1px solid #fff;border-radius:10px;padding:18px 21px 23px;box-shadow:0 7px 18px #403a3510,0 1px 2px #403a3509;transform:rotate(var(--card-tilt,-2deg));transform-origin:50% 50%}
.flow-card:nth-child(2){--card-tilt:2deg;--card-sway:-2deg}.flow-card:nth-child(3){--card-tilt:-3deg;--card-sway:1deg}.flow-card:nth-child(4){--card-tilt:1.5deg;--card-sway:-1.5deg}.flow-card:nth-child(5){--card-tilt:-1deg;--card-sway:2deg}
.flow-card-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.6px;color:#92908b;line-height:1.4;padding-bottom:14px;border-bottom:1px solid #f3f2f0;margin-bottom:17px}
.flow-card-body{display:flex;align-items:flex-start;gap:13px}
.flow-symbol{flex:0 0 35px;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#fbe3eb;color:#c70b49;font-size:23px;line-height:1;box-shadow:0 3px 8px #c70b4914}
.flow-card:nth-child(2) .flow-symbol{background:#e5e9f6;color:#60749b}.flow-card:nth-child(3) .flow-symbol{background:#e9e6f3;color:#82739c}.flow-card:nth-child(4) .flow-symbol{background:#eae7df;color:#8d7c58}.flow-card:nth-child(5) .flow-symbol{background:#e1ecdf;color:#5e7c56}
.flow-card h3{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.03em;margin:0 0 7px}
.flow-card p{font-size:12px;color:#74716d;line-height:1.65;margin:0}
.flow-motion{display:none;border:1px solid #d9d7d3;border-radius:20px;background:#f4f4f2;color:#68645e;padding:9px 13px;font-family:inherit;font-size:9px;letter-spacing:1px;cursor:pointer;min-height:36px}
.flow-ready .flow-motion{display:block;margin:8px auto 0}
.flow-ready .flow-window{height:650px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 83%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 83%,transparent)}
.flow-ready .flow-track{animation:flow-rise 42s linear infinite;will-change:transform}
.flow-ready .flow-card{animation:flow-sway 7s ease-in-out infinite alternate}
.flow-ready .flow-card:nth-child(2){animation-delay:-2s}.flow-ready .flow-card:nth-child(3){animation-delay:-4s}.flow-ready .flow-card:nth-child(4){animation-delay:-1s}.flow-ready .flow-card:nth-child(5){animation-delay:-3s}
.flow-ready .flow-mark{animation:flow-badge 5s ease-in-out infinite}
.flow-ready:not(.flow-visible) .flow-track,.flow-ready:not(.flow-visible) .flow-card,.flow-ready:not(.flow-visible) .flow-mark,.motion-paused .flow-track,.motion-paused .flow-card,.motion-paused .flow-mark,.flow-window:hover .flow-track,.flow-window:hover .flow-card{animation-play-state:paused}
.flow-entered .flow-copy{animation:flow-arrive .85s ease-out both}
.playbook-flow :focus-visible{outline:3px solid #d5004b;outline-offset:5px}
@keyframes flow-rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes flow-sway{from{transform:translateX(-3px) rotate(var(--card-tilt,-2deg))}to{transform:translateX(4px) rotate(var(--card-sway,1.5deg))}}
@keyframes flow-badge{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes flow-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1200px){.flow-card h3{font-size:18px}.flow-card p{font-size:14px}.flow-card-top{font-size:10px}.flow-description{font-size:18px}}
@media(max-width:760px){.playbook-flow{margin:0 3px;border-radius:26px}.flow-layout{grid-template-columns:1fr;padding:90px 26px 24px;gap:24px}.flow-copy{padding:0}.playbook-flow #index-title{font-size:clamp(43px,9vw,60px)}.flow-eyebrow{font-size:10px}.flow-description{max-width:440px}.flow-details{margin-top:32px;gap:26px}.flow-visual{width:min(100%,420px);justify-self:center}.flow-ready .flow-window{height:440px}.flow-card p{font-size:13px}.flow-card h3{font-size:17px}.flow-primary,.flow-secondary{padding:13px 14px}.playbook-flow .index-back{top:20px;left:22px;width:42px;height:42px;font-size:24px}}
@media(prefers-reduced-motion:reduce){.flow-ready .flow-window{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}.flow-cards[aria-hidden=true]{display:none}.flow-ready .flow-track,.flow-ready .flow-card,.flow-ready .flow-mark,.flow-entered .flow-copy{animation:none;will-change:auto}.flow-card{transform:none}.flow-primary:hover,.flow-secondary:hover{transform:none}.flow-ready .flow-motion{display:none}}