/* The About page's connected-workday illustration. Kept separate from app UI. */
.wp-about-flow { position: relative; isolation: isolate; overflow: hidden; padding-block: 88px 60px; background: #09172c; color: #f3f7ff; }
.wp-about-flow::before { position: absolute; z-index: -1; inset: 0; content: ''; background: radial-gradient(ellipse at 50% 42%, #164b7145, transparent 64%), radial-gradient(ellipse at 100% 0, #354c7026, transparent 45%); }
.wp-about-flow__shell { max-width: 1280px; margin-inline: auto; padding-inline: 32px; }
.wp-about-flow__heading { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); align-items: end; gap: 48px; }
.wp-about-flow__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #9cddee; }
.wp-about-flow__eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #89e6df; box-shadow: 0 0 0 4px #89e6df14; }
.wp-about-flow h2 { margin: 0; font-size: clamp(32px, 3.6vw, 47px); font-weight: 700; letter-spacing: -.045em; line-height: 1.18; text-wrap: balance; color: #f3f7ff; }
.wp-about-flow h2 > span { color: #8cdbeb; }
.wp-about-flow__intro { margin: 0 0 3px; color: #afbed2; font-size: 15px; line-height: 1.85; }
.wp-about-flow__figure { margin: 46px 0 0; }
.wp-about-flow__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1.25fr); align-items: center; gap: 24px; padding: 44px 36px; border: 1px solid #8eafd42a; border-radius: 24px; background: linear-gradient(#7fbbff05 1px, transparent 1px), linear-gradient(90deg, #7fbbff05 1px, transparent 1px), #0c1d33; background-size: 28px 28px; }
.wp-about-flow__connection { position: absolute; left: 18%; right: 18%; top: 50%; height: 1px; background: #488da950; }
.wp-about-flow__connection::before, .wp-about-flow__connection::after { position: absolute; content: ''; top: -1px; left: 0; width: 14%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #8ceaf0); box-shadow: 0 0 14px #79d9ef55; animation: wp-about-signal 4s linear infinite; }
.wp-about-flow__connection::after { animation-delay: -2s; }
.wp-about-flow__devices { position: relative; z-index: 1; padding-right: 24px; padding-bottom: 36px; }
.wp-about-flow__laptop { position: relative; border: 1px solid #6c88a459; border-radius: 13px; background: linear-gradient(140deg, #1d344e, #11253e); box-shadow: 0 18px 45px #020b1a55, inset 0 1px #ffffff08; }
.wp-about-flow__laptop::after { position: absolute; content: ''; height: 6px; bottom: -7px; left: -10px; right: -10px; border-radius: 2px 2px 8px 8px; background: linear-gradient(#5b718d, #293d55); }
.wp-about-flow__device-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #a9cff314; font-size: 10px; color: #d2deef; }
.wp-about-flow__device-top > i { color: #83deec; font-size: 16px; }
.wp-about-flow__status-dot { width: 5px; height: 5px; margin-left: auto; background: #6fdfb6; border-radius: 50%; }
.wp-about-flow__timer { padding: 22px 18px 16px; }
.wp-about-flow__timer > span, .wp-about-flow__workspace-title > span { display: block; font-size: 8px; letter-spacing: .15em; font-weight: 600; color: #9aafc8; }
.wp-about-flow__timer strong { display: block; margin-block: 7px; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wp-about-flow__timer strong > span { color: #6b8aa9; }
[data-flow-clock] { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-flow-clock] > b { font-weight: inherit; }
.wp-about-flow__timer small { display: flex; align-items: center; gap: 5px; color: #acc4db; font-size: 9px; }
.wp-about-flow__activity { display: flex; gap: 4px; height: 28px; padding-inline: 18px; align-items: end; }
.wp-about-flow__activity > span { flex: 1; height: 60%; background: #57c5d6; border-radius: 2px 2px 0 0; transform-origin: bottom; animation: wp-about-activity 3.8s ease-in-out infinite alternate; }
.wp-about-flow__activity > span:nth-child(3n) { height: 92%; animation-delay: -.9s; background: #87dbe5; }
.wp-about-flow__activity > span:nth-child(3n + 1) { height: 40%; animation-delay: -2s; background: #4588a5; }
.wp-about-flow__device-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; color: #98b8d2; font-size: 9px; }
.wp-about-flow__device-foot > i { color: #89dde7; font-size: 22px; }
.wp-about-flow__phone { position: absolute; bottom: 24px; right: 0; display: flex; flex-direction: column; align-items: center; width: 77px; padding: 8px 7px 13px; border: 3px solid #59738e; border-radius: 16px; background: #142940; box-shadow: 0 12px 30px #02091770; }
.wp-about-flow__phone-speaker { height: 3px; width: 23px; background: #071425; border-radius: 5px; margin-bottom: 14px; }
.wp-about-flow__phone > i { color: #8ddfea; font-size: 22px; }
.wp-about-flow__phone > strong { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: -.04em; }
.wp-about-flow__phone > span { margin-top: 3px; color: #b6cadc; font-size: 7px; }
.wp-about-flow__phone-check { display: grid; place-items: center; margin-top: 13px; width: 24px; height: 24px; border-radius: 50%; background: #84dccf; color: #12304a; }
.wp-about-flow__device-label { position: absolute; bottom: -3px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 10px; color: #b2c6dc; }
.wp-about-flow__device-label > span { margin-inline: 7px; color: #6e8da8; }
.wp-about-flow__device-label > i { font-size: 13px; }
.wp-about-flow__hub { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; text-align: center; }
.wp-about-flow__hub-mark { position: relative; display: grid; place-items: center; width: 126px; height: 126px; border: 1px solid #79ccec66; border-radius: 50%; background: radial-gradient(circle, #234861, #10263f 75%); box-shadow: 0 0 55px #6bd4f319, inset 0 0 25px #8deaff08; }
.wp-about-flow__hub-mark::before, .wp-about-flow__hub-mark::after { position: absolute; content: ''; inset: -12px; border: 1px solid #83d4ee24; border-radius: 50%; animation: wp-about-ring 4s ease-out infinite; }
.wp-about-flow__hub-mark::after { animation-delay: -2s; }
.wp-about-flow__hub-mark svg { width: 76px; height: 76px; }
.wp-about-flow__hub > span { margin-top: 22px; font-size: 17px; letter-spacing: -.025em; font-weight: 700; }
.wp-about-flow__hub > small { margin-top: 6px; color: #9fbad3; font-size: 10px; }
.wp-about-flow .wp-brand-bar { transform-box: fill-box; transform-origin: center bottom; animation: wp-about-brand-bars 6s ease-in-out infinite; }
.wp-about-flow .wp-brand-bar-two { animation-delay: .12s; }
.wp-about-flow .wp-brand-bar-three { animation-delay: .24s; }
.wp-about-flow .wp-brand-tick { stroke-dasharray: 100; animation: wp-about-brand-tick 6s ease-in-out infinite; }
.wp-about-flow__workspace { position: relative; z-index: 1; overflow: hidden; border: 1px solid #b6cae0; border-radius: 12px; background: #fff; box-shadow: 0 24px 55px #020c2055; color: #1b2559; transform: perspective(1200px) rotateY(-5deg); }
.wp-about-flow__window-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e6edf4; background: #f4f7fb; font-size: 9px; color: #607188; }
.wp-about-flow__window-bar > span:nth-child(2) { display: flex; align-items: center; gap: 6px; }
.wp-about-flow__window-dots { display: flex; gap: 4px; }
.wp-about-flow__window-dots b { width: 5px; height: 5px; border-radius: 50%; background: #c4cfde; }
.wp-about-flow__workspace-title { padding: 22px 20px 14px; }
.wp-about-flow__workspace-title > span { color: #56728e; }
.wp-about-flow__workspace-title > strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.wp-about-flow__screen { height: 155px; margin-inline: 18px; overflow: hidden; border: 1px solid #e3e9f1; border-radius: 6px 6px 0 0; }
.wp-about-flow__screen img { display: block; width: 100%; height: auto; }
.wp-about-flow__tools { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 8px; position: relative; padding: 16px 10px; border-top: 1px solid #e1e9f2; box-shadow: 0 -12px 18px #ffffffcc; background: #fff; font-size: 10px; color: #43556f; }
.wp-about-flow__tools span { display: flex; gap: 5px; align-items: center; }
.wp-about-flow__tools i { color: #3b6cff; font-size: 14px; }
.wp-about-flow__caption { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; color: #9aadc4; font-size: 10px; line-height: 1.6; }
.wp-about-flow__caption small { margin-left: 14px; color: #9aadc4; font-size: 9px; }
.wp-about-flow__motion { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 5px; min-height: 44px; padding: 8px 12px; border: 1px solid #3a516c; border-radius: 8px; color: #c7d8e9; background: #ffffff04; cursor: pointer; font-size: 10px; }
.wp-about-flow__motion[hidden] { display: none; }
.wp-about-flow__motion:hover { background: #ffffff0c; border-color: #9cc9dc; }
.wp-about-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; list-style: none; padding: 0; margin: 34px 0 0; }
.wp-about-flow__steps > li { border-top: 1px solid #a2c5e333; padding-top: 24px; }
.wp-about-flow__step-top { display: flex; align-items: center; justify-content: space-between; }
.wp-about-flow__step-top > i { color: #93ddec; font-size: 24px; }
.wp-about-flow__step-top > span { font-size: 11px; font-weight: 600; color: #9eacc3; letter-spacing: .1em; }
.wp-about-flow__steps h3 { margin-top: 17px; color: #f2f6ff; font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
.wp-about-flow__steps p { margin-top: 11px; color: #adbed3; font-size: 14px; line-height: 1.8; }
.wp-about-flow__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 38px; padding-top: 28px; border-top: 1px solid #a2c5e320; }
.wp-about-flow__footer p { color: #adc0d7; font-size: 13px; line-height: 1.75; }
.wp-about-flow__footer strong { color: #edf7ff; font-weight: 500; }
.wp-about-flow__footer small { display: block; margin-top: 3px; font-size: 10px; color: #9aadc4; }
.wp-about-flow__footer a { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 48px; padding: 12px 18px; border: 1px solid #6992af; border-radius: 10px; color: #e9f5ff; font-weight: 600; font-size: 12px; transition: background .2s, border-color .2s; }
.wp-about-flow__footer a:hover { background: #1d415d; border-color: #a1deed; }
.wp-about-flow:not([data-flow-running='true']) *, .wp-about-flow:not([data-flow-running='true']) *::before, .wp-about-flow:not([data-flow-running='true']) *::after { animation-play-state: paused !important; }
.wp-about-flow:not([data-flow-running]) *, .wp-about-flow:not([data-flow-running]) *::before, .wp-about-flow:not([data-flow-running]) *::after { animation: none !important; }
@keyframes wp-about-signal { from { left: 0; opacity: 0; } 10%, 85% { opacity: 1; } to { left: 86%; opacity: 0; } }
@keyframes wp-about-activity { to { transform: scaleY(.55); opacity: .6; } }
@keyframes wp-about-ring { from { transform: scale(.94); opacity: .6; } to { transform: scale(1.17); opacity: 0; } }
@keyframes wp-about-brand-bars { 0%, 100% { transform: scaleY(.5); } 25%, 85% { transform: scaleY(1); } }
@keyframes wp-about-brand-tick { 0%, 10% { stroke-dashoffset: 100; } 32%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 1050px) {
    .wp-about-flow__heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .wp-about-flow__intro { max-width: 630px; }
    .wp-about-flow__stage { grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1.15fr); gap: 14px; padding: 36px 24px; }
    .wp-about-flow__hub-mark { width: 96px; height: 96px; }
    .wp-about-flow__hub-mark svg { width: 63px; height: 63px; }
    .wp-about-flow__workspace-title { padding: 18px 14px 12px; }
    .wp-about-flow__workspace-title > strong { font-size: 19px; }
    .wp-about-flow__screen { height: 130px; margin-inline: 12px; }
    .wp-about-flow__tools { font-size: 9px; gap: 7px; }
    .wp-about-flow__timer { padding-inline: 12px; }
    .wp-about-flow__steps { gap: 24px; }
}
@media (max-width: 760px) {
    .wp-about-flow { padding-block: 52px 36px; }
    .wp-about-flow__shell { padding-inline: 24px; }
    .wp-about-flow h2 { font-size: clamp(30px, 7.3vw, 42px); }
    .wp-about-flow__eyebrow { margin-bottom: 19px; font-size: 10px; }
    .wp-about-flow__intro { font-size: 14px; line-height: 1.8; }
    .wp-about-flow__figure { margin-top: 28px; }
    .wp-about-flow__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; padding: 26px 20px; border-radius: 18px; }
    .wp-about-flow__devices { width: min(100%, 260px); padding-right: 28px; padding-bottom: 29px; }
    .wp-about-flow__device-top { padding-block: 8px; }
    .wp-about-flow__timer { padding: 14px 14px 12px; }
    .wp-about-flow__timer strong { font-size: 30px; }
    .wp-about-flow__activity { height: 20px; padding-inline: 14px; }
    .wp-about-flow__device-foot { padding: 6px 14px; }
    .wp-about-flow__phone { width: 69px; bottom: 24px; padding-bottom: 10px; }
    .wp-about-flow__phone-speaker { margin-bottom: 9px; }
    .wp-about-flow__phone-check { margin-top: 8px; }
    .wp-about-flow__device-label { background: #0c1d33; bottom: 0; padding-top: 3px; }
    .wp-about-flow__connection { top: 90px; bottom: 90px; left: 50%; right: auto; width: 1px; height: auto; }
    .wp-about-flow__connection::before, .wp-about-flow__connection::after { left: -1px; top: 0; height: 14%; width: 3px; background: linear-gradient(transparent, #8ceaf0); animation-name: wp-about-signal-down; }
    .wp-about-flow__hub { flex-direction: row; gap: 12px; padding: 10px 14px; border: 1px solid #6a9bb943; border-radius: 60px; background: #10253b; }
    .wp-about-flow__hub-mark { width: 55px; height: 55px; border: 0; box-shadow: none; background: transparent; }
    .wp-about-flow__hub-mark::before, .wp-about-flow__hub-mark::after { inset: -3px; }
    .wp-about-flow__hub-mark svg { width: 48px; height: 48px; }
    .wp-about-flow__hub > span { margin: 0 7px 0 0; font-size: 16px; }
    .wp-about-flow__hub > small { display: none; }
    .wp-about-flow__workspace { width: 100%; max-width: 380px; transform: none; }
    .wp-about-flow__screen { height: 112px; }
    .wp-about-flow__workspace-title { padding: 15px 14px 12px; }
    .wp-about-flow__workspace-title > strong { font-size: 20px; }
    .wp-about-flow__tools { padding: 13px 8px; }
    .wp-about-flow__caption { align-items: start; gap: 10px; font-size: 9px; }
    .wp-about-flow__caption small { display: block; margin: 3px 0 0; }
    .wp-about-flow__motion { padding-inline: 8px; font-size: 9px; }
    .wp-about-flow__steps { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
    .wp-about-flow__steps > li { position: relative; padding: 22px 0 0 44px; }
    .wp-about-flow__step-top > i { position: absolute; left: 0; top: 20px; }
    .wp-about-flow__step-top > span { position: absolute; right: 0; top: 25px; }
    .wp-about-flow__steps h3 { margin: 0; padding-right: 26px; font-size: 19px; }
    .wp-about-flow__steps p { margin-top: 9px; font-size: 13px; line-height: 1.8; }
    .wp-about-flow__footer { flex-direction: column; align-items: stretch; gap: 19px; margin-top: 28px; padding-top: 23px; }
    .wp-about-flow__footer a { justify-content: space-between; }
}
@keyframes wp-about-signal-down { from { top: 0; opacity: 0; } 10%, 85% { opacity: 1; } to { top: 86%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .wp-about-flow *, .wp-about-flow *::before, .wp-about-flow *::after { animation: none !important; transition: none !important; }
}