/* Original, dependency-free Dayflow adaptation. References: COMPONENT-SOURCES.md. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The label and destination never change. The effect works on focus as well as hover. */
.button.flow-button{position:relative;isolation:isolate;overflow:hidden;gap:20px;min-height:54px;padding:15px 23px 15px 23px;padding-inline-start:44px;border-radius:100px;background:#103777;border-color:#377fe7;color:#fff;box-shadow:0 5px 24px #146cff26;transition:border-color .25s,box-shadow .25s}
.flow-button::before{content:"";position:absolute;z-index:-1;width:9px;height:9px;inset-inline-start:20px;top:50%;border-radius:50%;background:#43D6C5;transform:translateY(-50%) scale(1);transition:transform .6s cubic-bezier(.2,.7,.2,1),background .4s}
.button.flow-button .flow-button-label{font-size:inherit;line-height:1.5;position:relative;transition:transform .4s}
.button.flow-button .flow-button-arrow{font-size:23px;line-height:1;display:inline-block;transform:translateX(0);transition:transform .4s}
.button.flow-button:focus-visible{outline:3px solid #8beddf;outline-offset:5px;transform:none}
.flow-button:focus-visible::before{background:#146CFF;transform:translateY(-50%) scale(80)}
.flow-button:focus-visible .flow-button-arrow{transform:translateX(-4px)}
@media(hover:hover) and (pointer:fine){
  .button.flow-button:hover{transform:none;background:#103777;border-color:#7bb1ff;box-shadow:0 8px 28px #146cff40}
  .flow-button:hover::before{background:#146CFF;transform:translateY(-50%) scale(80)}
  .flow-button:hover .flow-button-label{transform:translateX(5px)}
  .flow-button:hover .flow-button-arrow{transform:translateX(-4px)}
}

.hero-overline{font-size:12px;font-weight:450;letter-spacing:.035em;color:#a5bbd3}
.hero .hero-actions{margin-bottom:0}
.flow-headline{display:flex;justify-content:center;align-items:center;gap:7px;margin:38px auto 0;color:#aac1d9;font-size:14px;font-weight:450}
.flow-words{display:grid;position:relative;width:114px;height:26px;text-align:start;color:#73e3d5;overflow:hidden}
.flow-words>span{grid-area:1 / 1;opacity:0;transform:translateY(100%);animation:dayflow-words 12s infinite;animation-delay:var(--word-delay,0s);white-space:nowrap}
.flow-words>span:nth-child(2){--word-delay:4s}
.flow-words>span:nth-child(3){--word-delay:8s}
@keyframes dayflow-words{0%,29%{opacity:1;transform:translateY(0)}33%,96%{opacity:0;transform:translateY(-100%)}97%,100%{opacity:0;transform:translateY(100%)}}

/* Paths are measured from the card edges, including the mobile composition. */
.flow-connected{height:360px;margin-top:20px}
.flow-beams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow-beam-base{stroke:#43789f;stroke-opacity:.46;stroke-width:1;vector-effect:non-scaling-stroke}
.flow-beam-trail,.flow-beam-head{stroke:var(--beam-color,#43D6C5);stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 .9;stroke-dashoffset:1;animation:dayflow-beam 5.6s linear infinite;animation-delay:var(--beam-delay,0s);vector-effect:non-scaling-stroke}
.flow-beam-head{stroke:#c2fbf2;stroke-width:3;stroke-dasharray:.003 .997}
@keyframes dayflow-beam{0%{stroke-dashoffset:1;opacity:0}8%{opacity:.95}72%{stroke-dashoffset:0;opacity:.95}82%,100%{stroke-dashoffset:0;opacity:0}}
.flow-connected .source-stack{top:0;bottom:0;width:28%;gap:10px}
.flow-connected .source-card{flex:1;min-height:0;padding:11px 14px;border-inline:2px solid var(--channel-color);border-radius:13px}
.flow-connected .source-card:nth-child(1){--channel-color:#43D6C5}
.flow-connected .source-card:nth-child(2){--channel-color:#E1306C;border-inline-color:transparent;background:linear-gradient(120deg,#153350,#102b47) padding-box,linear-gradient(180deg,#833AB4,#E1306C 55%,#FCB045) border-box}
.flow-connected .source-card:nth-child(3){--channel-color:#146CFF}
.flow-connected .source-card:nth-child(4){--channel-color:#2A9DF4}
.flow-connected .source-card:first-child,.flow-connected .source-card:last-child{transform:translateX(-12px)}
.flow-connected .source-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow-connected .source-icon.sky{color:#83cdff;background:#2a9df41c}
.flow-connected .source-icon.instagram{color:#ffb0d2;background:linear-gradient(135deg,#833ab44d,#e1306c33,#fcb04533);border-color:#e1306c66}
.flow-connected .source-icon.instagram svg{stroke:url(#instagram-icon-gradient)}
.flow-connected .source-tag{font-size:9px;padding:3px 5px}
.flow-connected .flow-core{top:50%;left:50%}
.flow-connected .core-box{position:relative}
.flow-connected .core-box::after{content:"";position:absolute;inset:-7px;border:1px solid #43d6c54d;border-radius:34px;animation:dayflow-arrival 5.6s ease-out infinite;pointer-events:none}
@keyframes dayflow-arrival{0%,55%{opacity:0;transform:scale(.95)}65%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.flow-connected .lead-preview{top:76px}
.flow-connected[data-flow-active="false"] .flow-beam-trail,.flow-connected[data-flow-active="false"] .flow-beam-head,.flow-connected[data-flow-active="false"] .core-box::after{animation-play-state:paused}
.motion-paused .flow-button::before,.motion-paused .flow-button-label,.motion-paused .flow-button-arrow{transition:none!important}

@media(max-width:1050px){
  .flow-connected .source-stack{width:28%}
  .flow-connected .source-card{padding:10px;gap:8px}
  .flow-connected .source-card small{font-size:9px}
}
@media(min-width:581px) and (max-width:800px){
  .flow-connected .source-stack{width:29%}
  .flow-connected .source-card{padding:10px 8px;gap:6px}
  .flow-connected .flow-core{left:48%}
  .flow-connected .source-card strong{font-size:11px}
  .flow-connected .lead-preview{top:92px}
}
@media(max-width:580px){
  .hero-overline{font-size:11px}
  .hero-actions .button.flow-button,.closing .button.flow-button,.showcase-cta .button.flow-button{min-height:52px;padding:13px 19px;padding-inline-start:39px;font-size:13px;max-width:100%;gap:16px}
  .flow-button::before{inset-inline-start:16px}
  .flow-headline{font-size:13px;margin-top:30px;gap:6px}
  .flow-words{width:108px;height:24px}
  .flow-connected{height:536px;margin-top:20px}
  .flow-connected .source-stack{width:100%;top:0;bottom:auto;height:152px;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .flow-connected .source-card,.flow-connected .source-card:first-child,.flow-connected .source-card:last-child{flex-direction:row;text-align:right;transform:none;padding:11px 10px;gap:8px}
  .flow-connected .source-card strong{font-size:12px}
  .flow-connected .source-card small,.flow-connected .source-tag{display:none}
  .flow-connected .source-icon{width:30px;height:30px;border-radius:8px}
  .flow-connected .source-icon svg{width:19px;height:19px}
  .flow-connected .flow-core{top:222px;left:50%;transform:translate(-50%,0)}
  .flow-connected .flow-core::before,.flow-connected .lead-preview::before{display:none}
  .flow-connected .core-box::after{border-radius:26px}
  .flow-connected .lead-preview{top:380px;width:90%;left:50%;transform:translateX(-50%)}
  .flow-connected .preview-top{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .flow-beam-trail,.flow-beam-head,.flow-connected .core-box::after{display:none}
  .flow-words>span{opacity:0;transform:none}
  .flow-words>span:first-child{opacity:1}
  .flow-button::before{transition:none}
}