.flowframe-case{--ff-blue:#168bff;--ff-deep:#112f3b;--ff-fog:#eff6fa;--ff-rule:#dce3e7;container-type:inline-size}.flowframe-case .ff-figure{display:block}.flowframe-case .ff-figure>figcaption{margin:14px 10px 0;color:var(--palette-b40);font-size:13px;line-height:1.55;text-wrap:pretty}.flowframe-case .ff-eyebrow{font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#65757d}.flowframe-case .ff-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:22px;background:#e9eef1;width:fit-content;max-width:100%}.flowframe-case .ff-tabs button{border:0;border-radius:18px;background:transparent;color:#52616a;font:inherit;font-size:12px;line-height:1.3;padding:9px 14px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}.flowframe-case .ff-tabs button[aria-pressed=true]{color:#162e3b;background:#fff;box-shadow:0 2px 5px #112f3b12}.flowframe-case button:focus-visible,.flowframe-case a:focus-visible{outline:2px solid var(--ff-blue);outline-offset:4px}.flowframe-case .ff-browser{overflow:hidden;border:1px solid #15333e20;border-radius:13px;background:#fff;box-shadow:0 12px 42px #13364b1a}.flowframe-case .ff-browser-bar{height:30px;display:flex;align-items:center;gap:4px;padding:0 12px;background:#fff;color:#7c8990;font-size:9px;line-height:1}.flowframe-case .ff-browser-bar i{width:5px;height:5px;border-radius:50%;background:#d3dbe0}.flowframe-case .ff-browser-bar span:first-of-type{flex:1;text-align:center}.flowframe-case .ff-browser-screen{overflow:hidden;background:#faf9f7}.flowframe-case .ff-browser-screen img{display:block;width:100%;height:auto}.flowframe-case .ff-phone{overflow:hidden;background:#112b36;border:5px solid #112b36;border-radius:27px;box-shadow:0 20px 35px #11374b36}.flowframe-case .ff-phone img{display:block;width:100%;height:auto}.flowframe-case .ff-hero{position:relative;isolation:isolate;aspect-ratio:1.45;overflow:hidden;border-radius:28px;background:#e9f4fb}.flowframe-case .ff-hero-landscape{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.65;z-index:-2}.flowframe-case .ff-hero:after{position:absolute;inset:0;content:"";background:linear-gradient(#f4f9fc44,#f4f9fc00 55%,#f4f9fcbd);z-index:-1}.flowframe-case .ff-hero-label{position:absolute;top:5%;left:5%;right:5%;display:flex;justify-content:space-between;gap:20px;color:#113748;font-size:11px;letter-spacing:.025em}.flowframe-case .ff-hero-label span:last-child{color:#53717e}.flowframe-case .ff-hero-desktop{position:absolute;top:17%;left:7%;width:70%;height:67%;transform:rotate(-4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);border-radius:14px}.flowframe-case .ff-hero-desktop .ff-browser-screen{height:calc(100% - 30px)}.flowframe-case .ff-hero-desktop img{min-height:100%;object-fit:cover;object-position:top}.flowframe-case .ff-hero:hover .ff-hero-desktop{transform:rotate(-2deg) translateY(-4px)}.flowframe-case .ff-hero-phone{position:absolute;top:32%;right:8%;width:19%;height:53%;transform:rotate(6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.flowframe-case .ff-hero:hover .ff-hero-phone{transform:rotate(4deg) translateY(-5px)}.flowframe-case .ff-hero-bottom{position:absolute;bottom:5%;left:5%;right:5%;display:flex;justify-content:space-between;color:#1d4559;font-size:13px;line-height:1.4}.flowframe-case .ff-hero-bottom span:last-child{text-align:right;font-size:10px;color:#55707c}.flowframe-case .ff-hero-token{position:absolute;top:12%;right:10%;width:10%;aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#c6e9ff);color:#168bff;border:1px solid #fff;border-radius:22%;transform:rotate(12deg);box-shadow:0 8px 0 #7dc9fb,0 17px 24px #0a73ab22}.flowframe-case .ff-hero-token svg{width:64%;height:64%}.flowframe-case .ff-journey{overflow:hidden;border-radius:28px;background:#f5f8fa}.flowframe-case .ff-journey-art{position:relative}.flowframe-case .ff-journey-art img{display:block;width:100%;height:auto}.flowframe-case .ff-art-tag{position:absolute;top:7%;left:5%;font-size:13px;color:#14364c}.flowframe-case .ff-journey-copy{padding:0 5% 4%;margin-top:-12px;position:relative}.flowframe-case .ff-journey-detail{display:grid;grid-template-columns:1fr auto;column-gap:30px;margin-top:24px;min-height:185px}.flowframe-case .ff-journey-detail h3{margin:0!important;grid-column:1;font-size:24px}.flowframe-case .ff-journey-detail p{margin:10px 0 0!important;grid-column:1;max-width:550px;color:#61717c;font-size:15px;line-height:1.6}.flowframe-case .ff-journey-detail small{grid-column:1;margin-top:20px;color:#798892;font-size:11px}.flowframe-case .ff-icon-chain{display:flex;gap:12px;grid-column:2;grid-row:1/4;align-self:center}.flowframe-case .ff-icon-chain>span{display:grid;place-items:center;width:56px;aspect-ratio:1;border-radius:16px;background:#fff;color:#137ec6;box-shadow:0 5px 0 #d2e7f4;transform:rotate(-6deg);transition:transform .2s}.flowframe-case .ff-icon-chain>span:nth-child(2){transform:translateY(-15px) rotate(5deg)}.flowframe-case .ff-icon-chain svg{width:31px;height:31px}.flowframe-case .ff-system{padding:30px;background:#f2f5f7;border-radius:28px}.flowframe-case .ff-panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.flowframe-case .ff-system-stage{position:relative;height:420px;margin:24px 0 0;isolation:isolate}.flowframe-case .ff-system-core{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:190px;height:126px;border:1px solid #b8d6ea;border-radius:24px;background:#e0f0ff;color:#15486b;box-shadow:0 8px 0 #c6e1f4;transition:opacity .35s,transform .5s}.flowframe-case .ff-system-core svg{height:34px;width:34px;margin-bottom:8px}.flowframe-case .ff-system-core b{font-size:16px;font-weight:500}.flowframe-case .ff-system-core span{font-size:10px;color:#527e9c}.flowframe-case .ff-system-piece{position:absolute;width:126px;height:92px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:#fff;border:1px solid #dbe3e9;border-radius:14px;color:#17455e;font-size:12px;box-shadow:0 4px 12px #12324b09;transition:transform .55s,top .55s,left .55s,box-shadow .55s}.flowframe-case .ff-system-piece svg{width:30px;height:30px}.flowframe-case .ff-piece-0{left:5%;top:2%}.flowframe-case .ff-piece-1{left:calc(50% - 63px);top:0}.flowframe-case .ff-piece-2{left:calc(95% - 126px);top:2%}.flowframe-case .ff-piece-3{left:0;top:42%}.flowframe-case .ff-piece-4{left:calc(100% - 126px);top:42%}.flowframe-case .ff-piece-5{left:18%;top:76%}.flowframe-case .ff-piece-6{left:calc(82% - 126px);top:76%}.flowframe-case .ff-system-stage:before,.flowframe-case .ff-system-stage:after{content:"";position:absolute;left:12%;right:12%;top:19%;bottom:13%;border:1px dashed #afc9da;border-radius:50%;z-index:-1;transition:opacity .4s}.flowframe-case .ff-system-stage:after{inset:20% 25%;border-radius:20px}.flowframe-case .ff-system-piece i{position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:#168bff;transition:opacity .3s}.flowframe-case .ff-system-stage.separate .ff-system-core{opacity:0;transform:translate(-50%,-50%) scale(.8)}.flowframe-case .ff-system-stage.separate:before,.flowframe-case .ff-system-stage.separate:after,.flowframe-case .separate .ff-system-piece i{opacity:0}.flowframe-case .separate .ff-piece-0{transform:translate(10px,14px) rotate(-9deg)}.flowframe-case .separate .ff-piece-1{transform:translate(20px,20px) rotate(10deg)}.flowframe-case .separate .ff-piece-2{transform:translate(-15px,0) rotate(-5deg)}.flowframe-case .separate .ff-piece-3{transform:translate(55px,-5px) rotate(6deg)}.flowframe-case .separate .ff-piece-4{transform:translate(-45px,0) rotate(-8deg)}.flowframe-case .separate .ff-piece-5{transform:translate(-8px,-15px) rotate(-12deg)}.flowframe-case .separate .ff-piece-6{transform:translate(18px,-20px) rotate(9deg)}.flowframe-case .ff-system-note{font-size:13px;line-height:1.6;color:#6a7882;max-width:650px;margin:30px auto 0!important;min-height:44px;text-align:center}.flowframe-case .ff-explorer{padding:28px;background:#f0f4f6;border-radius:28px}.flowframe-case .ff-screen-stage{position:relative;margin-top:26px;padding:20px 0 10px}.flowframe-case .ff-screen-stage .ff-browser-screen{max-height:650px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.flowframe-case .ff-screen-stage .ff-browser{width:100%}.flowframe-case .ff-screen-stage.has-phone .ff-browser{width:85%}.flowframe-case .ff-screen-stage .ff-phone{position:absolute;width:20%;height:70%;right:0;bottom:0;transform:rotate(3deg);overflow:auto;scrollbar-width:none;overscroll-behavior:contain}.flowframe-case .ff-explorer-copy{max-width:600px;padding:28px 10px 0}.flowframe-case .ff-explorer-copy h3{font-size:25px;margin:8px 0 0!important;line-height:1.25}.flowframe-case .ff-explorer-copy p{color:#61717c;font-size:15px;line-height:1.7;margin:10px 0 0!important}.flowframe-case .ff-capture-note{display:block;color:#7b878e;font-size:10px;line-height:1.5;margin:22px 10px 0}.flowframe-case .ff-record{border-radius:28px;padding:30px;background:#f1f5f7}.flowframe-case .ff-sample{padding:5px 9px;border:1px solid #d6e0e6;border-radius:99px;color:#6b818f;font-size:10px;white-space:nowrap}.flowframe-case .ff-record-views{display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;margin-top:30px}.flowframe-case .ff-record-card{padding:26px;border:1px solid #dde5e9;border-radius:20px;background:#fff;min-width:0;box-shadow:0 6px 15px #12354b08}.flowframe-case .ff-record-role{display:flex;align-items:center;gap:8px;color:#64818f;font-size:11px}.flowframe-case .ff-record-role svg{width:20px;height:20px}.flowframe-case .ff-record-card h4{font-weight:500;font-size:24px;color:#173f50;margin:28px 0 16px}.flowframe-case .ff-record-card dl{margin:0;font-size:12px}.flowframe-case .ff-record-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #e8edef}.flowframe-case .ff-record-card dt{color:#839199}.flowframe-case .ff-record-card dd{margin:0;color:#4c6370;text-align:right}.flowframe-case .ff-primary{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;margin-top:22px;padding:13px 16px;border:0;border-radius:10px;background:#143d50;color:#fff;font:inherit;font-size:12px;cursor:pointer;transition:background .2s}.flowframe-case .ff-primary:hover{background:#19608a}.flowframe-case .ff-record-link{display:flex;align-items:center;justify-content:center;color:#91afc0;font-size:18px}.flowframe-case .ff-venue-card{background:#153a4c;color:#e2edf3;border:0}.flowframe-case .ff-venue-card .ff-record-role{color:#a4c0ce}.flowframe-case .ff-venue-card h4{color:#fff}.flowframe-case .ff-venue-card ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}.flowframe-case .ff-venue-card li{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px}.flowframe-case .ff-venue-card li>span{color:#a9bfcb}.flowframe-case .ff-venue-card li>b{font-weight:400;text-align:right;max-width:130px}.flowframe-case .ff-record-card p{font-size:12px;line-height:1.7;color:#a9bfcb;margin-top:23px!important}.flowframe-case .ff-record-card .is-complete{color:#228263}.flowframe-case .ff-venue-card .is-complete{color:#9bdfca}.flowframe-case .ff-admin{background:#f1f4f5;padding:36px;border-radius:28px}.flowframe-case .ff-admin-top{display:flex;gap:20px;align-items:center;margin-bottom:28px}.flowframe-case .ff-admin-top>svg{width:50px;height:50px;padding:11px;border:1px solid #ccdce4;border-radius:15px;color:#457589}.flowframe-case .ff-admin-top h3{font-size:23px;margin:4px 0 0!important;color:#284b5d}.flowframe-case .ff-admin .ff-browser-screen{max-height:610px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}.flowframe-case .ff-admin-bottom{display:flex;gap:22px;justify-content:space-between;margin:20px 0 0;font-size:11px;color:#6f8592}.flowframe-case .ff-organiser{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;overflow:hidden;padding:12px 40px 12px 0;border-radius:28px;background:#f5f7f9}.flowframe-case .ff-organiser>img{width:100%;height:auto}.flowframe-case .ff-organiser h3{color:#1b465e;font-size:30px;line-height:1.15;margin:10px 0 0!important}.flowframe-case .ff-organiser p{font-size:14px;line-height:1.7;color:#72828f;margin:15px 0 0!important}.flowframe-case .ff-mini-icons{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}.flowframe-case .ff-mini-icons>span{padding:9px;border:1px solid #e0e8ed;background:#fff;border-radius:10px;color:#4688b0}.flowframe-case .ff-mini-icons svg{display:block;height:20px;width:20px}.flowframe-case .ff-sticker{display:grid;place-items:center;aspect-ratio:1.3;background:#f2f6f8;overflow:hidden}.flowframe-case .ff-paper-tile{width:44%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;transform:rotate(-9deg);background:linear-gradient(145deg,#fff,#e6f2fc);border:1px solid white;border-radius:21px;box-shadow:-3px 5px 0 #c9e2f4,-6px 10px 0 #a0cff0,0 19px 25px #3375a21a;color:#168bff;transition:transform .3s}.flowframe-case .card:hover .ff-paper-tile{transform:rotate(-4deg) translateY(-5px)}.flowframe-case .ff-paper-tile svg{width:52%;height:52%}.flowframe-case .ff-paper-tile span{font-size:9px;color:#5494be}.flowframe-case .ff-sticker-key .ff-paper-tile{transform:rotate(10deg);color:#1d657f;background:linear-gradient(145deg,#fff,#e4f3f4);box-shadow:3px 5px 0 #bedfdf,6px 10px 0 #96c8ce,0 19px 25px #3375a21a}.flowframe-case .ff-sticker-details .ff-paper-tile{color:#112f3b;box-shadow:-3px 5px 0 #d9e1e5,-6px 10px 0 #b8c7ce,0 19px 25px #3375a21a}.flowframe-case .ff-demo-links{padding:38px;border-radius:28px;background:#f1f6f9}.flowframe-case .ff-demo-links h3{margin:10px 0 0!important;font-size:26px;color:#173b50}.flowframe-case .ff-demo-links p{font-size:14px;color:#718693}.flowframe-case .ff-demo-links>div{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.flowframe-case .ff-demo-links a{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:13px 18px;border-radius:12px;background:#fff;border:1px solid #dce7ee;color:#234f68;text-decoration:none;font-size:13px;transition:background .2s}.flowframe-case .ff-demo-links a:hover{background:#e2f0fa}
.flowframe-case .ff-cover-stack{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.flowframe-case .ff-visit-website{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-height:54px;padding:16px 23px;border:1px solid var(--ff-blue);border-radius:12px;background:var(--ff-blue);color:white;font-size:15px;font-weight:500;line-height:1.3;text-decoration:none;transition:background .18s,transform .18s}
.flowframe-case .ff-visit-website:hover{background:#0875df;border-color:#0875df;transform:translateY(-2px)}
.flowframe-case .ff-visit-website svg{width:21px;height:21px}
.flowframe-case .ff-visit-website>span{font-size:23px;line-height:1}
.flowframe-case .ff-original-cover{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:28px;cursor:zoom-in}
.flowframe-case .ff-original-cover>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.flowframe-case .ff-original-cover-copy{grid-column:1;grid-row:1;padding:40px;color:#173a49}
.flowframe-case .ff-original-cover-copy>span{font-size:12px;color:#6c828a}
.flowframe-case .ff-original-cover-copy h2{font-size:34px;line-height:1.15;letter-spacing:-.035em;font-weight:450;margin:28px 0 20px}
.flowframe-case .ff-original-cover-copy p{font-size:13px;color:#76858b;line-height:1.6}
.flowframe-case .ff-original-cover-copy a{display:inline-flex;align-items:center;gap:15px;margin-top:45px;font-size:12px;text-decoration:none;color:#28516a}
.flowframe-case .ff-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.flowframe-case .ff-gallery-item{display:flex;flex-direction:column;text-align:left;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in}
.flowframe-case .ff-gallery-image{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:22px}
.flowframe-case .ff-gallery-image>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.flowframe-case .ff-gallery-item:hover .ff-gallery-image>img{transform:scale(1.025)}
.flowframe-case .ff-gallery-expand{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;height:30px;width:30px;border-radius:50%;background:#fffffff0;color:#163c50;font-size:16px;box-shadow:0 2px 8px #123c5012}
.flowframe-case .ff-gallery-title{display:block;margin:14px 4px 0;font-size:15px;line-height:1.4;color:#254554}
.flowframe-case .ff-gallery-caption{display:block;margin:5px 4px 0;font-size:12px;line-height:1.6;color:#79868d}
.flowframe-case .ff-gallery-item-6{grid-column:1/-1;max-width:740px;width:100%;justify-self:center}
.flowframe-case .ff-gallery-item-6 .ff-gallery-image{aspect-ratio:1.28}
.flowframe-case .ff-lightbox{position:fixed;width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:22px;background:#fafbfc;color:#203d4b;box-shadow:0 20px 100px #0005;font:inherit}
.flowframe-case .ff-lightbox::backdrop{background:#101e29c9;backdrop-filter:blur(9px)}
.flowframe-case .ff-lightbox-inner{padding:20px 24px}
.flowframe-case .ff-lightbox header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;font-size:14px}
.flowframe-case .ff-lightbox button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:1px solid #d8e2e9;border-radius:50%;background:#fff;color:#203d4b;font:inherit;font-size:18px;cursor:pointer}
.flowframe-case .ff-lightbox-inner>img{display:block;width:100%;height:calc(100dvh - 220px);object-fit:contain}
.flowframe-case .ff-lightbox footer{display:flex;align-items:center;gap:16px;margin:18px 0 0;font-size:12px}
.flowframe-case .ff-lightbox footer a{margin-left:auto;color:inherit;text-underline-offset:3px}
.flowframe-case .ff-lightbox p{margin:10px 0 0;font-size:11px;color:#7a8992;line-height:1.5}
@media(max-width:760px){.flowframe-case .ff-original-cover{aspect-ratio:1;border-radius:18px}.flowframe-case .ff-original-cover-copy{grid-column:1;grid-row:2;padding:26px}.flowframe-case .ff-original-cover-copy h2{font-size:30px;margin:16px 0}.flowframe-case .ff-original-cover-copy a{margin-top:18px}.flowframe-case .ff-gallery-grid{grid-template-columns:1fr;gap:27px}.flowframe-case .ff-gallery-image{aspect-ratio:4/3}.flowframe-case .ff-gallery-item-6 .ff-gallery-image{aspect-ratio:1.28}.flowframe-case .ff-lightbox-inner{padding:16px}.flowframe-case .ff-lightbox footer{gap:10px}.flowframe-case .ff-lightbox footer a{font-size:11px}.flowframe-case .ff-system-stage{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;height:auto!important;min-height:420px}.flowframe-case .ff-system-piece{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:80px!important;transform:none!important;font-size:9px!important}.flowframe-case .ff-system-core{position:relative!important;left:auto!important;top:auto!important;grid-column:1/-1;grid-row:2;justify-self:center;transform:none!important;margin:0!important}.flowframe-case .ff-system-stage:before,.flowframe-case .ff-system-stage:after{inset:20% 20%!important}.flowframe-case .ff-system-stage.separate .ff-system-core{transform:scale(.8)!important}}
@media(max-width:760px){.flowframe-case .ff-hero{aspect-ratio:1.05}.flowframe-case .ff-hero-label{font-size:8px}.flowframe-case .ff-hero-desktop{width:76%;left:4%;top:18%;height:62%}.flowframe-case .ff-hero-phone{width:24%;right:5%;top:37%;height:47%;border-width:3px;border-radius:18px}.flowframe-case .ff-hero-token{top:12%;width:11%}.flowframe-case .ff-hero-bottom{font-size:10px}.flowframe-case .ff-hero-bottom span:last-child{font-size:8px}.flowframe-case .ff-browser-bar{height:23px;font-size:7px;padding:0 7px}.flowframe-case .ff-hero-desktop .ff-browser-screen{height:calc(100% - 23px)}.flowframe-case .ff-journey-detail{grid-template-columns:1fr;min-height:235px}.flowframe-case .ff-icon-chain{display:none}.flowframe-case .ff-journey-copy{padding:10px 20px 25px}.flowframe-case .ff-journey-detail h3{font-size:22px}.flowframe-case .ff-art-tag{font-size:10px}.flowframe-case .ff-tabs button{padding:9px 11px;font-size:11px}.flowframe-case .ff-panel-top{align-items:flex-start;flex-direction:column}.flowframe-case .ff-system{padding:22px 14px}.flowframe-case .ff-system-stage{height:410px}.flowframe-case .ff-system-piece{width:95px;height:78px;font-size:10px}.flowframe-case .ff-system-piece svg{width:25px;height:25px}.flowframe-case .ff-system-core{width:150px;height:112px}.flowframe-case .ff-system-core b{font-size:14px}.flowframe-case .ff-system-core span{font-size:9px}.flowframe-case .ff-piece-0{left:0;top:2%}.flowframe-case .ff-piece-1{left:calc(50% - 47px);top:0}.flowframe-case .ff-piece-2{left:calc(100% - 95px);top:2%}.flowframe-case .ff-piece-3{left:0;top:39%}.flowframe-case .ff-piece-4{left:calc(100% - 95px);top:39%}.flowframe-case .ff-piece-5{left:7%;top:75%}.flowframe-case .ff-piece-6{left:calc(93% - 95px);top:75%}.flowframe-case .ff-system-core{top:55%}.flowframe-case .ff-system-stage.separate .ff-piece-3{transform:translate(14px,0) rotate(6deg)}.flowframe-case .ff-system-stage.separate .ff-piece-4{transform:translate(-15px,0) rotate(-8deg)}.flowframe-case .ff-system-note{font-size:12px;min-height:65px}.flowframe-case .ff-explorer{padding:20px 14px}.flowframe-case .ff-screen-stage{margin-top:10px}.flowframe-case .ff-screen-stage .ff-browser-screen{max-height:480px}.flowframe-case .ff-screen-stage.has-phone .ff-browser{width:100%}.flowframe-case .ff-screen-stage .ff-phone{width:26%;height:51%;right:1%;bottom:-3%;border-width:3px;border-radius:18px}.flowframe-case .ff-explorer-copy{padding:34px 5px 0}.flowframe-case .ff-explorer-copy h3{font-size:22px}.flowframe-case .ff-record{padding:24px 16px}.flowframe-case .ff-record-views{grid-template-columns:1fr;gap:10px;margin-top:22px}.flowframe-case .ff-record-link{transform:rotate(90deg);height:20px}.flowframe-case .ff-record-card{padding:24px}.flowframe-case .ff-record-card h4{margin-top:20px}.flowframe-case .ff-admin{padding:24px 14px}.flowframe-case .ff-admin-top{gap:12px}.flowframe-case .ff-admin-top h3{font-size:19px}.flowframe-case .ff-admin-top>svg{width:42px;height:42px;flex-shrink:0}.flowframe-case .ff-admin-bottom{gap:12px;font-size:9px}.flowframe-case .ff-organiser{grid-template-columns:1fr;gap:0;padding:0 0 30px}.flowframe-case .ff-organiser>img{width:95%;margin:auto}.flowframe-case .ff-organiser>div{padding:0 25px}.flowframe-case .ff-organiser h3{font-size:27px}.flowframe-case .ff-sticker{aspect-ratio:1.6}.flowframe-case .ff-paper-tile{width:35%}.flowframe-case .ff-demo-links{padding:28px 22px}.flowframe-case .ff-demo-links a{flex:1;gap:15px;white-space:nowrap}.flowframe-case .ff-demo-links h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.flowframe-case *,.flowframe-case *:before,.flowframe-case *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* A shared ending makes the live project and the next case study distinct. */
.flowframe-case .facts>div{min-width:0}
.flowframe-case .facts dd{white-space:normal;overflow-wrap:anywhere}
.flowframe-case .ff-case-end{border-top:1px solid #e3e7eb;padding-top:40px!important;margin-top:64px!important}
.flowframe-case .ff-case-visit{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:48px;padding:28px 32px;border-radius:20px;background:#f2f5f7}
.flowframe-case .ff-case-visit h2,.flowframe-case .ff-case-next-heading h2{margin:0;font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.025em}
.flowframe-case .ff-case-visit>a{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;padding:14px 20px;border-radius:30px;background:#111;color:#fff;font-size:15px;line-height:1.4;text-decoration:none;transition:background .2s}
.flowframe-case .ff-case-visit>a:hover{background:#1678d4}
.flowframe-case .ff-case-end svg{flex:none;width:21px;height:21px}
.flowframe-case .ff-case-next-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.flowframe-case .ff-case-next-heading>a{display:inline-flex;align-items:center;gap:10px;color:#66717b;font-size:14px;text-decoration:none}
.flowframe-case .ff-case-next{display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden;border:1px solid #e3e7eb;border-radius:24px;color:#111;text-decoration:none}
.flowframe-case .ff-case-next-image{display:block;min-width:0;overflow:hidden;background:#f2f5f7}
.flowframe-case .ff-case-next-image img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;transition:transform .25s}
.flowframe-case .ff-case-next-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;min-width:0;padding:36px}
.flowframe-case .ff-case-next-client{font-size:15px;line-height:1.4;color:#69757f}
.flowframe-case .ff-case-next-title{font-size:clamp(24px,2.4cqw,32px);font-weight:500;line-height:1.2;letter-spacing:-.035em;text-wrap:pretty}
.flowframe-case .ff-case-next-action{display:flex;align-items:center;gap:18px;margin-top:14px;color:#136fc5;font-size:14px;line-height:1.4}
.flowframe-case .ff-case-next-action>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#168bff;color:#fff;transition:transform .2s}
.flowframe-case .ff-case-next:hover .ff-case-next-image img{transform:scale(1.025)}
.flowframe-case .ff-case-next:hover .ff-case-next-action>span{transform:translateX(4px)}
@media(max-width:600px){.flowframe-case .ff-case-end{padding-top:28px!important;margin-top:48px!important}.flowframe-case .ff-case-visit{align-items:flex-start;flex-direction:column;padding:24px;margin-bottom:36px;gap:20px}.flowframe-case .ff-case-visit>a{width:100%;justify-content:space-between;font-size:14px}.flowframe-case .ff-case-next-heading h2,.flowframe-case .ff-case-visit h2{font-size:22px}.flowframe-case .ff-case-next-heading>a{font-size:13px}.flowframe-case .ff-case-next{grid-template-columns:1fr;border-radius:20px}.flowframe-case .ff-case-next-copy{padding:24px;gap:12px}.flowframe-case .ff-case-next-title{font-size:26px}.flowframe-case .ff-case-next-action{justify-content:space-between;width:100%;margin-top:6px}.flowframe-case .ff-case-next-image img{height:auto;aspect-ratio:4/3}}
/* Project actions align with the introductory copy. */
.flowframe-case .ff-back-to-work{display:block;width:fit-content;margin:0 0 22px;color:#6b7580;font-size:13px;text-decoration:none}
.flowframe-case .ff-visit-website.ff-project-website{justify-content:flex-start;gap:14px;min-height:38px;padding:9px 14px;margin-top:22px;border-radius:9px;font-size:13px;line-height:1.3}
.flowframe-case .ff-visit-website.ff-project-website>span{font-size:17px}
.flowframe-wedding .ff-journey-detail{display:block;min-height:100px;margin-top:22px}
.flowframe-wedding .ff-journey-detail p{max-width:60ch}
.flowframe-wedding .ff-development{overflow:hidden;border-radius:24px;background:#19242d}
.flowframe-wedding .ff-development>img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.flowframe-case .ff-admin-demo{padding:20px}
.flowframe-case .ff-demo-preview{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit}
.flowframe-case .ff-demo-preview .ff-browser-screen{max-height:480px;overflow:hidden}
.flowframe-case .ff-demo-open{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:24px;padding:12px 17px;background:#112f3b;color:#fff;border-radius:12px;font-size:13px;box-shadow:0 4px 20px #0002}
.flowframe-case .ff-demo-note{margin:15px 3px 0!important;font-size:12px;line-height:1.5;color:#65757d}
.flowframe-case .ff-demo-dialog{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:1440px;max-height:none;padding:0;margin:auto;border:1px solid #ffffff20;border-radius:18px;background:#112f3b;color:#fff;overflow:hidden;font-family:var(--font-site,Arial,sans-serif)}
.flowframe-case .ff-demo-dialog::backdrop{background:#09141de6}
.flowframe-case .ff-demo-dialog-inner{display:flex;flex-direction:column;height:100%}
.flowframe-case .ff-demo-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;flex:none;font-size:15px;line-height:1.3}
.flowframe-case .ff-demo-dialog header>div{display:grid;gap:4px}
.flowframe-case .ff-demo-dialog small{font-size:11px;color:#b4cbd5}
.flowframe-case .ff-demo-dialog header button{display:flex;align-items:center;gap:16px;min-height:40px;padding:9px 13px;border:1px solid #ffffff38;border-radius:9px;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:12px;white-space:nowrap}
.flowframe-case .ff-demo-dialog header button>span{font-size:22px;line-height:1}
.flowframe-case .ff-demo-dialog iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#faf9f7}
.flowframe-case>div{--measure:960px;--wide:100%}
.flowframe-case>div>article{width:calc(100% - 64px);max-width:var(--measure);padding:160px 0 96px}
.flowframe-case>div>article>.head{max-width:800px;padding-bottom:40px}
.flowframe-case>div>article>section{margin-top:64px;padding-top:0;scroll-margin-top:120px}
.flowframe-case>div>article>section>h2{margin:0;font-size:24px;line-height:1.3;text-wrap:wrap}
.flowframe-case>div>article>section>p{max-width:none;margin:12px 0 0;font-size:18px;line-height:1.65}
.flowframe-case>div>article>section>h3{margin:40px 0 0;font-size:20px}
.flowframe-case>div>article>section>figure.wide{margin-block:24px 0}
.flowframe-wedding .ff-explorer-copy{max-width:none;padding:24px 4px 0}
.flowframe-wedding .ff-explorer-copy h3{font-size:20px;margin:0!important}
.flowframe-wedding article .closing{grid-template-columns:repeat(2,minmax(0,1fr))}
.flowframe-wedding article .closing .card .words{padding-top:22px}
@media(max-width:760px){.flowframe-case .ff-demo-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:12px}.flowframe-case .ff-demo-dialog header{padding:12px;gap:10px;font-size:13px}.flowframe-case .ff-admin-demo{padding:12px}.flowframe-case .ff-demo-open{right:10px;bottom:10px;gap:15px;padding:10px 12px;font-size:12px}.flowframe-wedding .ff-journey-detail{min-height:125px}.flowframe-wedding article .closing{grid-template-columns:1fr}.flowframe-case>div>article>section{margin-top:48px}}
/* Keep the section rail inside the margin beside wide project visuals. */
.flowframe-case nav[aria-label="Sections"][data-room="bars"]{width:clamp(48px,calc((100vw - 960px)/2 - 32px),197px)}
.flowframe-case nav[aria-label="Sections"][data-room="bars"] a{min-width:0;overflow:hidden}
.flowframe-case nav[aria-label="Sections"][data-room="bars"] [data-label]{max-width:calc(100% - 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Restore the original supporting artwork without changing the screen frames. */
.flowframe-wedding .ff-journey-detail{display:grid;grid-template-columns:1fr auto;gap:0 28px;min-height:125px}
.flowframe-wedding .ff-journey-detail p{max-width:50ch}
.flowframe-wedding .ff-icon-chain{grid-row:1/3}
.flowframe-wedding .ff-demo-open{position:static;display:inline-flex;margin-top:16px;border:0;cursor:pointer;font:inherit;font-size:13px;box-shadow:none}
.flowframe-wedding .ff-demo-note{margin-top:12px!important}
/* Match the phone viewport to the original 390 × 844 capture. Longer
   screens scroll inside it, rather than leaving a blank device chin. */
.flowframe-wedding .ff-screen-stage.has-phone{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,23%);align-items:end;gap:22px}
.flowframe-wedding .ff-screen-stage.has-phone .ff-browser{width:100%}
.flowframe-wedding .ff-phone-preview{min-width:0}
.flowframe-wedding .ff-screen-stage .ff-phone{position:relative;width:100%;height:auto;right:auto;bottom:auto;transform:none;overflow:hidden;border-radius:25px;box-sizing:border-box}
.flowframe-wedding .ff-phone-screen{aspect-ratio:390/844;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#faf9f7}
.flowframe-wedding .ff-phone-screen img{display:block;width:100%;height:auto}
.flowframe-wedding .ff-phone-preview>a{display:flex;justify-content:space-between;gap:10px;margin-top:12px;color:#486572;font-size:11px;line-height:1.5;text-decoration:none}
.flowframe-wedding .ff-phone-screen:focus-visible{outline:2px solid #168bff;outline-offset:-3px}
.flowframe-wedding article .closing .card{grid-template-columns:1fr;align-items:start;gap:0}
.flowframe-wedding .ff-original-cover{cursor:default}
@media(max-width:760px){
  .flowframe-case>div>article{width:calc(100% - 40px);padding:128px 0 72px}
  .flowframe-case>div>article>section{margin-top:48px;scroll-margin-top:100px}
  .flowframe-case>div>article>section>h2{font-size:22px}
  .flowframe-case>div>article>section>p{font-size:16px}
  .flowframe-case>div>article>section>figure.wide{margin-block:20px 0}
  .flowframe-wedding .ff-screen-stage.has-phone{grid-template-columns:1fr;gap:24px}
  .flowframe-wedding .ff-phone-preview{width:min(100%,290px);justify-self:center;order:-1}
  .flowframe-wedding .ff-screen-stage .ff-phone{border-width:5px;border-radius:27px}
  .flowframe-wedding .ff-phone-preview>a{font-size:12px;min-height:32px;align-items:center}
  .flowframe-wedding .ff-journey-detail{display:block;min-height:125px}
  .flowframe-wedding .ff-icon-chain{display:flex;gap:10px;margin:22px 0 25px}
  .flowframe-wedding .ff-icon-chain>span{width:42px;border-radius:12px}
  .flowframe-wedding .ff-icon-chain svg{width:26px;height:26px}
}