@import url("/shared/styles/home-hero-workspace.css?v=20260826-1");
@import url("/shared/styles/home-conversion-pass.css?v=20260826-1");
/* Product Overview-inspired motion system, with a distinct story for each tab. */
.connected-demo{grid-template-columns:.7fr 1.3fr;gap:58px;max-width:1240px}
.flow-orchestra{position:relative;min-height:590px;padding:0;overflow:hidden;border:1px solid #dbe1eb;border-radius:30px;background:radial-gradient(circle at 50% 42%,#fff 0,#f4f6ff 37%,#edf4ff 70%,#eefaf6 100%);box-shadow:0 34px 90px #25385f1f}
.flow-orchestra:before{position:absolute;inset:49px 0 0;background-image:radial-gradient(#9aa9c126 1px,transparent 1px);background-size:17px 17px;content:"";mask-image:radial-gradient(circle at center,#000 0,transparent 70%)}
.flow-orchestra>header{display:flex;position:relative;z-index:10;height:49px;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #dfe3eb;background:#ffffffd9;backdrop-filter:blur(14px)}
.flow-orchestra>header b{padding:6px 10px;border-radius:99px;background:#edf2ff;color:#315de8;font-size:7px}
.connected-brand{display:flex;align-items:center;gap:8px}.connected-brand>i{display:block;width:27px;height:27px;flex:0 0 27px;border-radius:6px;background:#fff url("/shared/assets/photogram-mark.svg") center/contain no-repeat;color:transparent;font-size:0;font-style:normal}.connected-brand>span{display:block;color:#27292d;font-size:10px;font-weight:750;letter-spacing:-.02em}
.flow-lines{position:absolute;z-index:1;top:49px;right:0;left:0;width:100%;height:430px;overflow:visible}.flow-lines path{fill:none;stroke:#7185a6a8;stroke-width:2;stroke-dasharray:6 8;animation:flowDash 11s linear infinite}.flow-lines path:nth-child(2){animation-delay:-2s}.flow-lines path:nth-child(3){animation-delay:-5s}.flow-lines path:nth-child(4){animation-delay:-7s}
.flow-node{display:grid;position:absolute;z-index:4;width:210px;grid-template-columns:34px minmax(0,1fr);column-gap:8px;align-items:center;padding:15px 14px;border:1px solid #dce2ec;border-radius:16px;background:#fffffff2;box-shadow:0 15px 35px #31466e13;backdrop-filter:blur(10px)}
.flow-node i{display:grid;width:29px;height:29px;place-items:center;border-radius:9px;background:#edf2ff;color:#315de8;font-size:9px;font-style:normal}.flow-node strong,.flow-node span{display:block;min-width:0}.flow-node strong{grid-column:2;font-size:14px;line-height:1.08}.flow-node span{grid-column:2;grid-row:2;margin-top:4px;color:#697280;font-size:9px;line-height:1.22;overflow-wrap:anywhere}.flow-node>b{display:grid;grid-column:1;grid-row:2;width:17px;height:17px;margin-top:5px;place-items:center;border-radius:50%;background:#e7f6f0;color:#2d9978;font-size:8px}.flow-node.node-a{top:78px;left:23px}.flow-node.node-b{top:78px;right:23px}.flow-node.node-c{bottom:140px;left:23px}.flow-node.node-d{right:23px;bottom:140px}
.flow-node:after{position:absolute;width:7px;height:7px;border-radius:50%;background:#315de8;box-shadow:0 0 0 5px #315de812;content:"";animation:nodePulse 2.2s infinite}.node-a:after,.node-c:after{right:-4px}.node-b:after,.node-d:after{left:-4px}.node-b:after{animation-delay:.5s}.node-c:after{animation-delay:1s}.node-d:after{animation-delay:1.5s}
.flow-core{position:absolute;z-index:5;top:45%;left:50%;width:230px;min-height:190px;padding:24px 20px 18px;border:1px solid #d4dded;border-radius:30px;background:linear-gradient(155deg,#fff,#f5f7ff);box-shadow:0 28px 70px #2f467527;transform:translate(-50%,-50%);text-align:center}.flow-rings i{position:absolute;inset:-20px;border:1px solid #7794cb22;border-radius:50%;animation:ringBreath 3.2s ease-in-out infinite}.flow-rings i:nth-child(2){inset:-38px;animation-delay:.45s}.flow-rings i:nth-child(3){inset:-58px;animation-delay:.9s}.flow-mark{display:grid;width:37px;height:37px;margin:0 auto 11px;place-items:center;border-radius:12px;background:#20242d;color:#fff;font-family:Georgia,serif;font-size:20px;font-style:italic}.flow-core small{display:block;color:#315de8;font-size:5px;font-weight:800;letter-spacing:.14em}.flow-core strong{display:block;margin:9px 0 7px;font-size:20px;line-height:.98;letter-spacing:-.04em}.flow-core p{margin:0;color:#707987;font-size:7px;line-height:1.45}.flow-core em{display:block;margin-top:13px;padding-top:9px;border-top:1px solid #e2e6ed;color:#3e9b7d;font-size:6px;font-style:normal}
.flow-mark{display:flex;width:max-content;height:34px;margin:0 auto 13px;padding-left:42px;align-items:center;border-radius:0;background:transparent url("/shared/assets/photogram-mark.svg") left center/34px 34px no-repeat;color:transparent;font-size:0}
.flow-mark:after{color:#27292d;content:"PhotoGram";font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-size:16px;font-style:normal;font-weight:750;letter-spacing:-.04em}
.flow-words span{position:absolute;z-index:3;padding:5px 8px;border:1px solid #dfe5ee;border-radius:99px;background:#ffffffc9;color:#67717f;font-size:6px;box-shadow:0 7px 20px #34496b0e;animation:wordFloat 4s ease-in-out infinite}.flow-words span:nth-child(1){top:202px;left:35px}.flow-words span:nth-child(2){top:210px;right:25px;animation-delay:.8s}.flow-words span:nth-child(3){top:354px;left:50%;transform:translateX(-50%);animation-delay:1.6s}
.flow-result{display:grid;position:absolute;z-index:7;right:16px;bottom:15px;left:16px;grid-template-columns:1.25fr 1fr;align-items:center;padding:13px 15px;border:1px solid #dce2eb;border-radius:15px;background:#fffffff2;box-shadow:0 15px 35px #30476f16;backdrop-filter:blur(14px)}.flow-result>small{position:absolute;top:12px;left:15px;color:#8a929f;font-size:5px;font-weight:800;letter-spacing:.13em}.flow-result>strong{padding-top:11px;font-size:11px;line-height:1.15}.flow-result>div{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid #e2e5eb}.flow-result span{padding:4px 9px;text-align:center}.flow-result span+span{border-left:1px solid #e7e9ee}.flow-result b,.flow-result em{display:block}.flow-result b{font-size:15px}.flow-result em{margin-top:2px;color:#7a828e;font-size:5px;font-style:normal}
.flow-orchestra>.together-progress{position:absolute;right:0;bottom:0;left:0;z-index:10;height:3px;background:#dce3f4;font-style:normal}.flow-orchestra>.together-progress>b{display:block;width:0;height:100%;background:linear-gradient(90deg,#315de8,#3f9f8c)}
@keyframes flowDash{to{stroke-dashoffset:-140}}@keyframes nodePulse{70%{box-shadow:0 0 0 10px #315de800}}@keyframes ringBreath{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes wordFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
@media(max-width:1000px){.connected-demo{grid-template-columns:1fr;gap:44px}.connected-copy{max-width:680px}.flow-orchestra{min-height:590px}}
@media(max-width:700px){
  .flow-orchestra{min-height:560px;border-radius:23px}.flow-orchestra>header{padding:0 12px}.connected-brand>span{font-size:8px}.flow-orchestra>header b{font-size:6px}
  .flow-lines{height:400px}.flow-node{width:150px;grid-template-columns:24px minmax(0,1fr);column-gap:5px;padding:10px}.flow-node i{width:22px;height:22px;font-size:7px}.flow-node strong{font-size:10px}.flow-node span{font-size:7px;line-height:1.18}.flow-node>b{width:14px;height:14px}.flow-node.node-a{top:70px;left:8px}.flow-node.node-b{top:70px;right:8px}.flow-node.node-c{bottom:138px;left:8px}.flow-node.node-d{right:8px;bottom:138px}
  .flow-core{top:44%;width:170px;min-height:162px;padding:18px 13px;border-radius:24px}.flow-core strong{font-size:17px}.flow-core p{font-size:6px}.flow-core em{font-size:5px}.flow-rings i{inset:-12px}.flow-rings i:nth-child(2){inset:-24px}.flow-rings i:nth-child(3){inset:-36px}
  .flow-words span{font-size:5px}.flow-words span:nth-child(1){top:169px;left:12px}.flow-words span:nth-child(2){top:176px;right:10px}.flow-words span:nth-child(3){top:327px}
  .flow-result{right:9px;bottom:9px;left:9px;grid-template-columns:1fr;padding:12px}.flow-result>strong{max-width:250px;padding-top:10px;font-size:10px}.flow-result>div{margin-top:9px;padding-top:8px;border-top:1px solid #e2e5eb;border-left:0}.flow-result b{font-size:13px}.flow-result em{font-size:5px}
}
@media(prefers-reduced-motion:reduce){.flow-lines path,.flow-node:after,.flow-rings i,.flow-words span{animation:none}}

/* Each business stage has a distinct visual identity, carried from tab to diagram. */
.connected-workflow{--stage:#315de8;--stage-rgb:49,93,232;--stage-soft:#eef3ff;--stage-wash:#edf4ff;transition:background-color .45s ease}
.connected-workflow[data-stage="client"]{--stage:#2468e8;--stage-rgb:36,104,232;--stage-soft:#eaf1ff;--stage-wash:#eaf3ff}
.connected-workflow[data-stage="production"]{--stage:#d87916;--stage-rgb:216,121,22;--stage-soft:#fff1df;--stage-wash:#fff6e9}
.connected-workflow[data-stage="delivery"]{--stage:#7652d8;--stage-rgb:118,82,216;--stage-soft:#f0ebff;--stage-wash:#f4efff}
.connected-workflow[data-stage="growth"]{--stage:#16866e;--stage-rgb:22,134,110;--stage-soft:#e4f6f0;--stage-wash:#eaf8f4}
.connected-tabs button{position:relative;transition:color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease}
.connected-tabs button:before{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:currentColor;content:"";opacity:.5;vertical-align:1px}
.connected-tabs button[data-together="client"]{color:#2468e8}.connected-tabs button[data-together="production"]{color:#c46c12}.connected-tabs button[data-together="delivery"]{color:#7652d8}.connected-tabs button[data-together="growth"]{color:#16866e}
.connected-tabs button.active{background:var(--stage);color:#fff;box-shadow:0 7px 22px rgba(var(--stage-rgb),.25);transform:translateY(-1px)}
.connected-tabs button.active:before{background:#fff;opacity:1;box-shadow:0 0 0 4px rgba(255,255,255,.17)}
.connected-copy>p:first-child{color:var(--stage)}
.connected-outcomes span{border-color:rgba(var(--stage-rgb),.18);background:linear-gradient(145deg,var(--stage-soft),#fff)}
.connected-outcomes span b{color:var(--stage)}
.flow-orchestra{border-color:rgba(var(--stage-rgb),.24);background:radial-gradient(circle at 50% 42%,#fff 0,var(--stage-soft) 38%,var(--stage-wash) 72%,#f7fbfa 100%);box-shadow:0 34px 90px rgba(var(--stage-rgb),.14);transition:border-color .45s ease,background .55s ease,box-shadow .45s ease}
.flow-orchestra>header b{background:var(--stage-soft);color:var(--stage)}
.flow-lines path{stroke:rgba(var(--stage-rgb),.62)}
.flow-node{border-color:rgba(var(--stage-rgb),.2);box-shadow:0 15px 35px rgba(var(--stage-rgb),.09)}
.flow-node i{background:var(--stage-soft);color:var(--stage)}
.flow-node:after{background:var(--stage);box-shadow:0 0 0 5px rgba(var(--stage-rgb),.1)}
.flow-core{border-color:rgba(var(--stage-rgb),.24);background:linear-gradient(155deg,#fff,var(--stage-soft));box-shadow:0 28px 70px rgba(var(--stage-rgb),.2)}
.flow-rings i{border-color:rgba(var(--stage-rgb),.16)}
.flow-core small{color:var(--stage)}
.flow-core em{color:var(--stage)}
.flow-words span{border-color:rgba(var(--stage-rgb),.2);color:var(--stage)}
.flow-result{border-color:rgba(var(--stage-rgb),.2);box-shadow:0 15px 35px rgba(var(--stage-rgb),.1)}
.flow-result>small{color:var(--stage)}
.flow-orchestra>.together-progress{background:rgba(var(--stage-rgb),.13)}
.flow-orchestra>.together-progress>b{background:var(--stage)}
.connected-workflow[data-stage] .flow-orchestra{animation:stageReveal .52s cubic-bezier(.2,.8,.2,1)}
@keyframes stageReveal{0%{filter:saturate(.6);transform:scale(.992)}100%{filter:saturate(1);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.connected-workflow[data-stage] .flow-orchestra{animation:none}}

/* Outcome-led connected workflow layout */
.connected-workflow .connected-tabs{gap:8px;padding:7px}
.connected-workflow .connected-tabs button{padding:13px 20px;font-size:14px;font-weight:700}
.connected-workflow .connected-demo{display:flex;max-width:1080px;flex-direction:column;align-items:center;gap:24px}
.connected-workflow .connected-copy{max-width:820px;text-align:center}
.connected-workflow .connected-copy h3{margin:10px 0 0;font-size:clamp(34px,3.5vw,50px)}
.connected-workflow .connected-film{width:100%;max-width:960px}
.connected-support{display:flex;max-width:720px;flex-direction:column;align-items:center;gap:22px;text-align:center}
.connected-support p{margin:0;color:var(--muted);font-size:17px;line-height:1.55}
.connected-support .button{width:max-content}
@media(max-width:720px){
  .connected-workflow .connected-tabs{gap:5px}
  .connected-workflow .connected-tabs button{padding:12px 16px;font-size:13px}
  .connected-workflow .connected-demo{gap:20px}
  .connected-workflow .connected-copy{text-align:center}
  .connected-workflow .connected-copy h3{font-size:34px}
  .connected-support p{font-size:15px}
  .flow-node{display:none}
  .flow-lines{display:none}
  .flow-orchestra{min-height:500px}
}
@media(max-width:680px){.connected-workflow{overflow-x:clip}}

/* A purpose-built mobile workflow: readable cards instead of a scaled desktop diagram. */
.mobile-flow{display:none}
@media(max-width:720px){
  .flow-orchestra{min-height:0;padding-bottom:14px;background:linear-gradient(160deg,#fff,var(--stage-soft));box-shadow:0 18px 50px rgba(var(--stage-rgb),.12)}
  .flow-orchestra>.flow-lines,.flow-orchestra>.flow-node,.flow-orchestra>.flow-core,.flow-orchestra>.flow-words,.flow-orchestra>.flow-result{display:none}
  .flow-orchestra>header{height:52px;padding:0 14px}
  .connected-brand>span{font-size:11px}
  .flow-orchestra>header b{max-width:48%;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-flow{display:block;padding:16px 0 4px}
  .mobile-flow-core{margin:0 14px;padding:20px;border:1px solid rgba(var(--stage-rgb),.22);border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(var(--stage-rgb),.12)}
  .mobile-flow-core>div{display:flex;align-items:center;gap:9px;margin-bottom:20px}
  .mobile-flow-core img{width:32px;height:32px}
  .mobile-flow-core>div span{font-size:14px;font-weight:700;letter-spacing:-.025em}
  .mobile-flow-core small,.mobile-flow-outcome small{display:block;color:var(--stage);font-size:9px;font-weight:800;letter-spacing:.13em}
  .mobile-flow-core>strong{display:block;margin:8px 0;font-size:25px;line-height:1.04;letter-spacing:-.045em}
  .mobile-flow-core>p{margin:0;color:#656c77;font-size:15px;line-height:1.5}
  .mobile-flow-link{display:flex;height:52px;align-items:center;justify-content:center;gap:9px;color:var(--stage);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .mobile-flow-link i{position:relative;width:2px;height:28px;background:rgba(var(--stage-rgb),.28)}
  .mobile-flow-link i:after{position:absolute;bottom:-1px;left:-3px;width:8px;height:8px;border-right:2px solid var(--stage);border-bottom:2px solid var(--stage);content:"";transform:rotate(45deg)}
  .mobile-flow-track{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 13px;scroll-padding:14px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .mobile-flow-track::-webkit-scrollbar{display:none}
  .mobile-flow-track>article{display:grid;min-width:76%;grid-template-columns:36px 1fr;gap:3px 10px;align-items:center;padding:16px;border:1px solid #dfe3e9;border-radius:16px;background:#fff;scroll-snap-align:center;opacity:.62;transform:scale(.97);transition:border-color .65s cubic-bezier(.22,1,.36,1),box-shadow .65s cubic-bezier(.22,1,.36,1),opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)}
  .mobile-flow-track>article.active{border-color:var(--stage);box-shadow:0 12px 28px rgba(var(--stage-rgb),.16);opacity:1;transform:none}
  .mobile-flow-track i{display:grid;width:34px;height:34px;grid-row:1/3;place-items:center;border-radius:10px;background:var(--stage-soft);color:var(--stage);font-size:11px;font-style:normal;font-weight:750}
  .mobile-flow-track strong{font-size:16px;line-height:1.15}
  .mobile-flow-track span{color:#6d7480;font-size:13px;line-height:1.35}
  .mobile-flow-hint{margin:0 14px;color:#8a9099;font-size:10px;text-align:center}
  .mobile-flow-outcome{margin:15px 14px 0;padding:17px 18px;border-radius:16px;background:#20242d;color:#fff}
  .mobile-flow-outcome small{color:#9db4ff}
  .mobile-flow-outcome strong{display:block;margin-top:7px;font-size:17px;line-height:1.28;letter-spacing:-.025em}
  .flow-orchestra>.together-progress{position:relative;right:auto;bottom:auto;left:auto;margin:14px 14px 0;border-radius:99px;overflow:hidden}
}

/* Mobile diagram v2: compact source with four calm, desktop-like branches. */
@media(max-width:720px){
  .connected-workflow[data-stage] .flow-orchestra{animation:mobileStageReveal 1.1s cubic-bezier(.22,1,.36,1)}
  .mobile-flow{padding-top:12px}
  .mobile-flow-core{margin:0 12px;padding:14px 15px;border-radius:16px;box-shadow:0 10px 26px rgba(var(--stage-rgb),.1)}
  .mobile-flow-core>div{gap:7px;margin-bottom:10px}
  .mobile-flow-core img{width:25px;height:25px}
  .mobile-flow-core>div span{font-size:13px}
  .mobile-flow-core small{font-size:8px}
  .mobile-flow-core>strong{margin:6px 0 4px;font-size:20px;line-height:1.08}
  .mobile-flow-core>p{font-size:13px;line-height:1.42}
  .mobile-flow-link{height:38px;justify-content:flex-start;margin-left:37px;gap:8px;font-size:8px}
  .mobile-flow-link i{height:25px}
  .mobile-flow-track{position:relative;display:flex;gap:8px;overflow:visible;flex-direction:column;padding:0 12px 2px 42px;scroll-snap-type:none}
  .mobile-flow-track:before{position:absolute;top:0;bottom:22px;left:27px;width:1px;background:rgba(var(--stage-rgb),.3);content:""}
  .mobile-flow-track>article,.mobile-flow-track>article.active{position:relative;display:grid;width:100%;min-width:0;grid-template-columns:31px 1fr;gap:2px 9px;padding:11px 12px;border-color:rgba(var(--stage-rgb),.2);border-radius:13px;box-shadow:0 7px 18px rgba(var(--stage-rgb),.07);opacity:1;scroll-snap-align:none;transform:none;transition:border-color .8s ease,background .8s ease}
  .mobile-flow-track>article:before{position:absolute;top:50%;left:-15px;width:15px;border-top:1px solid rgba(var(--stage-rgb),.38);content:""}
  .mobile-flow-track>article:after{position:absolute;top:calc(50% - 3px);left:-5px;width:6px;height:6px;border-top:1px solid var(--stage);border-right:1px solid var(--stage);content:"";transform:rotate(45deg)}
  .mobile-flow-track i{width:29px;height:29px;font-size:9px}
  .mobile-flow-track strong{font-size:14px}
  .mobile-flow-track span{font-size:12px}
  .mobile-flow-hint{display:none}
  .mobile-flow-outcome{margin:13px 12px 0;padding:13px 15px;border-radius:13px}
  .mobile-flow-outcome small{font-size:8px}
  .mobile-flow-outcome strong{margin-top:5px;font-size:15px;line-height:1.3}
}
@keyframes mobileStageReveal{from{opacity:.82}to{opacity:1}}

/* Mobile diagram v3: narrower source, deeper branch indent and live connectors. */
@media(max-width:720px){
  .mobile-flow-core{width:82%;margin-right:auto;margin-left:auto;padding:12px 14px}
  .mobile-flow-core>div{margin-bottom:8px}
  .mobile-flow-core>strong{font-size:18px}
  .mobile-flow-core>p{font-size:12px;line-height:1.4}
  .mobile-flow-link{margin-left:42px}
  .mobile-flow-link i{background:repeating-linear-gradient(to bottom,var(--stage) 0 4px,transparent 4px 8px);background-size:2px 16px;animation:mobileConnectorFlow 1.8s linear infinite}
  .mobile-flow-link i:after{animation:mobileArrowDown 1.8s ease-in-out infinite}
  .mobile-flow-track{padding-right:12px;padding-left:60px}
  .mobile-flow-track:before{left:32px;width:2px;background:repeating-linear-gradient(to bottom,rgba(var(--stage-rgb),.62) 0 5px,transparent 5px 11px);background-size:2px 22px;animation:mobileConnectorFlow 2.4s linear infinite}
  .mobile-flow-track>article:before{left:-28px;width:28px;border-color:rgba(var(--stage-rgb),.48)}
  .mobile-flow-track>article:after{left:-8px;animation:mobileBranchArrow 3.2s ease-in-out infinite}
  .mobile-flow-track>article:nth-child(2):after{animation-delay:.5s}
  .mobile-flow-track>article:nth-child(3):after{animation-delay:1s}
  .mobile-flow-track>article:nth-child(4):after{animation-delay:1.5s}
}
@keyframes mobileConnectorFlow{to{background-position:0 22px}}
@keyframes mobileArrowDown{0%,65%,100%{transform:translateY(0) rotate(45deg);opacity:.65}35%{transform:translateY(3px) rotate(45deg);opacity:1}}
@keyframes mobileBranchArrow{0%,62%,100%{transform:translateX(0) rotate(45deg);opacity:.55}34%{transform:translateX(3px) rotate(45deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.mobile-flow-link i,.mobile-flow-link i:after,.mobile-flow-track:before,.mobile-flow-track>article:after{animation:none}}

/* Mobile diagram v4: half-width branches aligned to the source card's right edge. */
@media(max-width:720px){
  .mobile-flow-link{margin-left:36%}
  .mobile-flow-track{padding-right:9%;padding-left:0}
  .mobile-flow-track:before{left:36%}
  .mobile-flow-track>article,.mobile-flow-track>article.active{width:55%;margin-left:auto;grid-template-columns:27px minmax(0,1fr);gap:2px 7px;padding:10px}
  .mobile-flow-track>article:before{left:-18px;width:18px}
  .mobile-flow-track>article:after{left:-7px}
  .mobile-flow-track i{width:26px;height:26px;font-size:8px}
  .mobile-flow-track strong{font-size:13px;line-height:1.14}
  .mobile-flow-track span{font-size:11px;line-height:1.3}
}

/* Mobile diagram v5: carry each animated signal from the spine into its card. */
@media(max-width:720px){
  .mobile-flow-track>article:before{height:2px;border:0;background:linear-gradient(90deg,rgba(var(--stage-rgb),.25),var(--stage),rgba(var(--stage-rgb),.25));background-position:100% 0;background-size:200% 100%;animation:mobileBranchLine 3.2s ease-in-out infinite}
  .mobile-flow-track>article:nth-child(2):before{animation-delay:.5s}
  .mobile-flow-track>article:nth-child(3):before{animation-delay:1s}
  .mobile-flow-track>article:nth-child(4):before{animation-delay:1.5s}
}
@keyframes mobileBranchLine{0%,62%,100%{background-position:100% 0;opacity:.38}34%{background-position:0 0;opacity:1}}
@media(prefers-reduced-motion:reduce){.mobile-flow-track>article:before{animation:none}}

/* Mobile diagram v6: join the source arrow to the branch spine without a gap. */
@media(max-width:720px){
  .mobile-flow-track:before{top:-38px}
}

/* Mobile diagram v7: proportional branches always meet the source spine. */
@media(max-width:720px){
  .mobile-flow-track>article:before{left:-10%;width:10%}
}