/* FlowCap's spectrum: warm capture, violet color, teal efficiency. */
.flowcap-brand{--coral:#d83248;--violet:#6942bc;--teal:#087c79;background:#fff;color:#20202e}
.flowcap-brand header{border-top:4px solid transparent;border-image:linear-gradient(90deg,#ff4658,#f3ae31,#24bbb0,#507bdf,#a64fd6) 1;background:#ffffffed}
.flowcap-brand .small-button{border-color:#ebcedb;background:#fff5f7;color:#a52644}
.flowcap-brand main{max-width:1240px}
.flowcap-brand .hero{position:relative;isolation:isolate;gap:42px;padding:68px 0 78px;min-height:740px;border:0}
.flowcap-brand .hero::before{content:"";position:absolute;inset:0 calc((1180px - 100vw)/2);z-index:-1;background:radial-gradient(ellipse at 88% 12%,#e9d9ff 0,transparent 44%),radial-gradient(ellipse at 80% 86%,#c5f2ec 0,transparent 42%),radial-gradient(ellipse at 2% 5%,#ffe3e2 0,transparent 35%),#fcfbff;pointer-events:none}
.flowcap-brand .hero h1{font-size:clamp(42px,5.1vw,66px);letter-spacing:-.055em;line-height:1.08}
.flowcap-brand .color-line{color:#873b94;background:linear-gradient(100deg,#c52e48,#8940b8 72%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.flowcap-brand .detail-line{color:#242238}
.flowcap-brand h1 em{color:var(--teal)}
.flowcap-brand .hero .lead{font-size:19px;max-width:560px;color:#50516a}
.flowcap-brand .eyebrow{color:var(--violet);letter-spacing:.15em;font-size:13px}
.flowcap-brand .button{background:linear-gradient(115deg,#c92f48,#a72a75);box-shadow:0 8px 24px #b6305526;border:1px solid #bb2853;min-height:48px}
.flowcap-brand .button:hover{background:linear-gradient(115deg,#b72540,#822066);box-shadow:0 10px 26px #b6305540}
.flowcap-brand .hero-image{background:linear-gradient(145deg,#ffffffbd,#ffffff50);border:1px solid #fff;border-radius:36px;padding:28px;box-shadow:0 28px 70px #533d8422,0 2px 8px #533d8410;transform:rotate(1deg)}
.flowcap-brand .hero-image img{max-height:545px;filter:drop-shadow(0 12px 18px #40325c15)}
.flowcap-brand .hero-image figcaption{font-size:14px;color:#514367;transform:rotate(-1deg)}
.brand-dot{display:inline-block;width:8px;height:8px;background:#ed425d;border-radius:50%;margin-right:7px}
.flowcap-brand #workflow{padding-top:64px}
.flowcap-brand .cards article{border:0;border-top:3px solid #bb67ba;border-radius:8px 8px 22px 22px;background:#f7f1fc}
.flowcap-brand .cards article:nth-child(2){border-color:#e85e64;background:#fff2f0}
.flowcap-brand .cards article:nth-child(3){border-color:#22a699;background:#eefaF7}
.flowcap-brand .cards h3{font-size:22px;line-height:1.2}
.flowcap-brand .quality-story{padding:64px 44px;margin:44px 0;border:1px solid #ece0f3;border-radius:32px;background:linear-gradient(135deg,#faf3ff,#fff 70%)}
.flowcap-brand .quality-story + .quality-story{border-color:#d5ede7;background:linear-gradient(135deg,#effaf6,#fff 70%)}
.flowcap-brand .quality-story + .quality-story .eyebrow{color:var(--teal)}
.flowcap-brand .quality-story h2{font-size:clamp(32px,4vw,48px);max-width:820px}
.flowcap-brand .quality-story .lead{max-width:820px;font-size:20px}
.flowcap-brand .quality-story figure{margin:32px 0 24px}
.flowcap-brand .quality-story img{border-radius:18px;border:1px solid #e1e4ec}
.flowcap-brand .quality-story figcaption{text-align:left;font-size:13px;max-width:850px}
.flowcap-brand .quality-story>p:not(.eyebrow){max-width:860px}
.flowcap-brand .split figure{background:linear-gradient(135deg,#f5e9f8,#e2f4f0);border:1px solid #e8e1f1}
.flowcap-brand a:focus-visible{outline:3px solid #6942bc;outline-offset:5px}
@media(min-width:1240px){.flowcap-brand .hero::before{inset:0 calc((1180px - 100vw)/2)}}
@media(max-width:1239px){.flowcap-brand .hero::before{left:-30px;right:-30px}}
@media(max-width:800px){.flowcap-brand .hero{gap:32px;padding:44px 0 54px;min-height:auto}.flowcap-brand .hero-image{transform:none;max-width:430px;padding:20px}.flowcap-brand .hero-image figcaption{transform:none}.flowcap-brand .hero-image img{max-height:450px}.flowcap-brand .quality-story{padding:32px 24px;margin:24px 0;border-radius:24px}.flowcap-brand .quality-story .lead{font-size:18px}}
@media(max-width:450px){.flowcap-brand .hero::before{left:-18px;right:-18px}.flowcap-brand .hero h1{font-size:42px}.flowcap-brand .quality-story{padding:28px 18px}.flowcap-brand .quality-story h2{font-size:32px}.flowcap-brand .hero-image{border-radius:26px}.flowcap-brand .hero-image figcaption{font-size:13px}}